Way to increase resolution of the image generated via toDataURL

This is more of a feature request. I am easily able to generate the PNG by calling toDataURL on the returned canvas. But the quality of the image is rather blurry/poor. I did some googling & found out that by default it just returns an image at 96 dpi. And there doesnt seem to be a standard way of improving this. Also the toDataURLHD is experimental and does not work any ways.

Is there any way html2canvas can return an image at a higher resolution? Or even if it can provide a way to get the DOM being rendered, I can use some library that uses the DOM (with all the computed styles applied to it) and then generate whatever image I want.

[airdrummingfool]

I figured out another way to get a high resolution image that doesn’t need to resize the body. However, it does have to absolutely position the source element due to a bug in html2canvas (#790, #820, #893, #922, etc). Based on @MisterLamb’s retina code.

function takeHighResScreenshot(srcEl, destIMG, scaleFactor) {
    // Save original size of element
    var originalWidth = srcEl.offsetWidth;
    var originalHeight = srcEl.offsetHeight;
    // Force px size (no %, EMs, etc)
    srcEl.style.width = originalWidth + "px";
    srcEl.style.height = originalHeight + "px";

    // Position the element at the top left of the document because of bugs in html2canvas. The bug exists when supplying a custom canvas, and offsets the rendering on the custom canvas based on the offset of the source element on the page; thus the source element MUST be at 0, 0.
    // See html2canvas issues #790, #820, #893, #922
    srcEl.style.position = "absolute";
    srcEl.style.top = "0";
    srcEl.style.left = "0";

    // Create scaled canvas
    var scaledCanvas = document.createElement("canvas");
    scaledCanvas.width = originalWidth * scaleFactor;
    scaledCanvas.height = originalHeight * scaleFactor;
    scaledCanvas.style.width = originalWidth + "px";
    scaledCanvas.style.height = originalHeight + "px";
    var scaledContext = scaledCanvas.getContext("2d");
    scaledContext.scale(scaleFactor, scaleFactor);

    html2canvas(srcEl, { canvas: scaledCanvas })
    .then(function(canvas) {
        destIMG.src = canvas.toDataURL("image/png");
        srcEl.style.display = "none";
    });
};

Usage:

var src = document.getElementById("screenshot-src");
var img = document.getElementById("screenshot-img");
takeHighResScreenshot(src, img, 2); // This time we provide desired scale factor directly, no more messing with DPI

EDIT: Reduced hackiness using absolute positioning instead of actually moving the element and adjusting margins, thanks to @jason-o-matic for the suggestion.

[IvoPereira]

+1 for this. Looking to get an image with html2canvas to insert into a PDF, but getting a blurry quality.