title: PDF.JS How to make pdf-js viewer canvas responsive?
body: <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>