PDF.JS How to make pdf-js viewer canvas responsive?
<p>I have to display PDF using PDFJS library on my page. The problem is that since I give the scale as a fixed number canvas in which PDF is rendered is not responsive and does not fit the bootstrap grid column width. Here is HTML code:</p>

<pre><code>&lt;div class="row"&gt;
   &lt;div class="col-md-1" style="padding-right: 15px;"&gt;
     &lt;input type="button" ng-click="openPreviousPage()"/&gt;
   &lt;/div&gt;
   &lt;div class="col-md-8"&gt;
     &lt;canvas id="the-canvas" style="border: 1px solid black;"&gt;&lt;/canvas&gt;
    &lt;/div&gt;
    &lt;div class="col-md-1 col-md-offset-2" style="padding-right:15px;"&gt;
      &lt;input type="button" ng-click="openNextPage()" /&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>and my Typescript in a controller:</p>

<pre><code> openPage = (pdf: PDFDocumentProxy, pageNumber: number) =&gt; {
        pdf.getPage(pageNumber).then(function getPage(page) {
            var scale = 1;
            var viewport = page.getViewport(scale);

            var canvas = &lt;HTMLCanvasElement&gt;document.getElementById('the-canvas');
            var context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;


            var renderContext = {
                canvasContext: context,
                viewport: viewport
            };

            //...rest of actions
        });
    }
</code></pre>

<p>Would be grateful for any hint.</p>