title: How to perfectly add my image in to pdf file using jsPDF without the image getting distorted
body: <p>I spend a day and half trying to solve this .Im trying to get a screenshot of my whole webpage and add it in to a pdf file using jspdf. How can i align it in a way that it looks in a similar manner like we get when use the default print option in the browser. Neat and clean. However in jspdf i dont understand how to extend my data to next page in pdf also .  This is what i have tried:</p>
  <pre><code>function setScreenshot() {
      html2canvas(document.body).then(
          function (canvas) {
              var extra_canvas = document.createElement(&quot;canvas&quot;);
              let height = $('body').height();
              let width = $('body').width();
              extra_canvas.setAttribute('width', width);
              extra_canvas.setAttribute('height', height);
              var ctx = extra_canvas.getContext('2d');
              ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, width, height);
              var dataURL = extra_canvas.toDataURL();
              var img = $(document.createElement('img'));
             doc = new jsPDF({
                  unit: 'px',
              });
              let docWidth = doc.internal.pageSize.width
              let docHeight = doc.internal.pageSize.height
              let widthRatio = docWidth / canvas.width
              let heightRatio = docHeight / canvas.height
              doc.addImage(dataURL, 'JPEG', 0, 0, width, height * heightRatio);
              doc.save('ExportFile.pdf');
              $('#screenShot').attr('download', 'Test file.png');
              $('#screenShot')[0].click();
  
          })
  } 
  </code></pre>
  <p>I have also tried changing  the canvas size to the that of an a4 sheet like following :</p>
  <pre><code> ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, 793, 1122);
  </code></pre>
  <p>But again it doesnt work for smaller devices as the image gets stretched out.Any solution to this will be real helpful . Thank you guys .Also suggest if there is an alternate method or library using which i can achieve the same .</p>