Javascript – Need to export a div into multiple HD images of same height for print, but getting blurry images

I’m trying to export the div toto into HD images:

• images should have HD resolution (I really don’t care if the files are heavy)
• the div should be exported to multiple images with fixed height (defined in the script) and fixed width (div "toto" width)
• final format should be jpg/jpeg.

The script works, except that the images are blurry, text is blurry… so images cannot be used for print.

Even putting dpi 600 doesn’t have any effect.

Actually both SCALE and DPI have no effect on last version of html2canvas.

I wrote a script with html2canvas but cannot improve it.

Here is my code :

document.getElementById('captureButton').addEventListener('click', function() {
    const mybook = document.getElementById('toto');

    const scale = 1;
    const segmentHeight = 800;

    const captureScreenshots = (canvas, totalHeight) => {
        const numSegments = Math.ceil(totalHeight / segmentHeight);

        for (let i = 0; i < numSegments; i++) {
            const segmentCanvas = document.createElement('canvas');
            const context = segmentCanvas.getContext('2d');

            const sourceY = i * segmentHeight;
            const destY = 0;

            segmentCanvas.width = canvas.width; // Keep the same width
            segmentCanvas.height = segmentHeight;

            context.drawImage(canvas, 0, sourceY, canvas.width, segmentHeight, 0, destY, canvas.width, segmentHeight);

            const dataURL = segmentCanvas.toDataURL('image/jpeg');

            const a = document.createElement('a');
            a.href = dataURL;
            a.download = `screenshot-${i}.jpeg`;
            a.click();
        }
    };

    html2canvas(mybook, {
        dpi: 600,
        scale: 5,
        useCORS: true,
        logging: true,
        letterRendering: true,
    }).then(function(canvas) {
        const totalHeight = canvas.height;

        if (totalHeight > segmentHeight) {
            captureScreenshots(canvas, totalHeight);
        } else {
            const dataURL = canvas.toDataURL('image/jpeg');

            const a = document.createElement('a');
            a.href = dataURL;
            a.download = 'screenshot.jpeg';
            a.click();
        }
    });
});

I don’t know if it’s even possible to get HD images with html2canvas. Maybe someone has an idea for an alternative solution ?

So far I tested html2canvas, I also tested domtoimage (but didn’t succeed to have it work).