jsPDF: How to add top and bottom margin on all pages

I am using jsPDF to download html page with images as a multipage PDF. This places the content into multiple pages, however near the footer area content spills into the margin and also text repeats on the next page. Please can someone help?

Here is my JS function that does the download

function saveAspdf() {

// using addImage
var docName = $(".entity_title_text").html() + '.pdf';  

html2canvas($("#content"), {      
  onrendered:function(canvas) { 

    var pdf = new jsPDF('p', 'mm');

    var imgData = canvas.toDataURL('image/png');
    var imgWidth = 200; 
    var pageHeight= pdf.internal.pageSize.height;

    // Total image height
    var imgHeight = canvas.height * imgWidth / canvas.width;
    var heightLeft = imgHeight;
    
    // For pagination
    var pageNum = 1;
    var totalPages =  Math.ceil(heightLeft / pageHeight);
    
    // give some top padding to first page
    var position = 20;
    
    pdf.addImage(imgData, 'PNG', 20, position, imgWidth, imgHeight, imgWidth * 10, imgHeight *10, 'NaN', 'FAST');
    pdf.setFontSize(5);
    var str = "Page " + pageNum  + " of " +  totalPages;
    //key is the interal pageSize function
    pdf.text(str, 175, pageHeight - 10);
    heightLeft -= pageHeight;
    while (heightLeft >= 0) {
      pageNum++;
      // top padding for other pages
      position = heightLeft - imgHeight; 
      //position = heightLeft - imgHeight;
      pdf.addPage();

      pdf.addImage(imgData, 'PNG', 20, position + 20, imgWidth, imgHeight, imgWidth * 10, imgHeight *10, 'NaN', 'FAST');
      str = "Page " + pageNum  + " of " +  totalPages;
      pdf.text(str, 175, pageHeight - 10);
      heightLeft -= pageHeight;
    }

    pdf.save(docName);
  }});

}