Controlling page breaks when creating and printing canvas using html2canvas

I have a series of blocks that, in order for it to be presentable, I convert it to a canvas using html2canvas() and then print the canvas using jQuery.printThis()

The html structure is like:

<div id="container">
    <div class="block">bla bla bla -- long content</div>
    <div class="block">bla bla bla -- long content</div>
    <div class="block">bla bla bla -- long content</div>
    <div class="block">bla bla bla -- long content</div>
    ....
</div>

The code for printing is:

html2canvas(document.getElementById('container')).then(function (canvas) {
    jQuery('<img>').attr("src", canvas.toDataURL('image/png')).printThis();
});

The problems is that, when there are more blocks than fit inside a page, and the blocks are several lines, the page break is in the middle of a block.

If I add the css:

@media print {
    .basket-product-row {
        page-break-inside: avoid;
    }
}

and print the div directly without html2canvas() using just

jQuery('#container').printThis();

then the pages are divided correctly.

How do I still use html2canvas() and control the page breaks?