JsPDF & Html2canvas - изображение обрезается, если страница «несколько»

Question

У меня есть страница с несколькими продуктами. Один продукт разделен на 3 отдельных элемента. Я перебираю каждый продукт и преобразую каждый div в отдельное изображение html2canvas, в результате получается один продукт, имеющий 3 страницы в PDF (по одной на каждый div)

Это прекрасно работает с 1 продуктом (3 страницы в pdf)), но больше (например, 4-я страница в PDF), и верхняя часть изображения по какой-то причине начинает обрезаться.

Вот код, который я использую

var doc = new jsPDF(1, "pt", "letter");
(async function loop(){
<?php 
    $count = 0; 
    foreach($products as $k => $v){ 
    $count++; 
    ?>
var k = '<?php echo $k; ?>';
for(var i=1;i<4;i++){
    await new Promise(function(resolve){
        html2canvas($("#pdfcontent"+i+"_"+k)[0], {scale: 2}).then((canvas) => {
            var imgData = canvas.toDataURL('image/jpeg', 1.0);
            doc.addImage(imgData, 'JPEG', 10, 0,  590.28, 590.28/canvas.width * canvas.height);
            if (i < 3){
                doc.addPage();
            }else{
                <?php if ($count == count($products)){ ?>
                doc.save('test.pdf');
                <?php }else{ ?>
                doc.addPage();
                <?php } ?>
            }
            resolve();
        });
    });
}
<?php 
    } 
    ?>
})();

ВотНа втором изображении вы можете увидеть скриншоты, в которых нет заголовка, даже если вы знаете, что он использует тот же код, что и для первого изображения.

Первое изображение

Второе изображение

Буду признателен за любую помощь в решении этой проблемы.