Canvas rendering is blurry on retina displays

Thanks for the great library! One thing I’m noticing though is that the screenshots are blurry when using a retina display. For example, here’s what the screenshot of https://github.com/niklasvh/html2canvas looks like on a retina display (as taken from the test page).

I think maybe there needs to be a check for the ratio between the window.devicePixelRatio and the context.backingStorePixelRatio somewhere in the rendering of the canvas…?

p.s. Here are some useful links I came across while trying to get to the root of the issue.

• Apple’s Safari Canvas Guide.
• html5rocks.com HiDPI Blog Post.
• Related question on Stack Overflow.

[MisterLamb]

Apparently you can use an existing canvas for rendering (which you can preconfigure to be displayed in retina).

Example:

var w = 1000;
var h = 1000;
var div = document.querySelector('#divtoconvert');
var canvas = document.createElement('canvas');
canvas.width = w*2;
canvas.height = h*2;
canvas.style.width = w + 'px';
canvas.style.height = h + 'px';
var context = canvas.getContext('2d');
context.scale(2,2);
html2canvas(div, { canvas: canvas }).then(function(canvas) {
    // do what you want
});

[breim]

@zqcloveping Bro, try this configs, not solve 100% but increases quality

html2canvas(document.getElementById(‘flag’), { useCORS: true, allowTaint: true, letterRendering: true, onrendered: function(canvas) { var ctx = canvas.getContext(‘2d’); ctx.webkitImageSmoothingEnabled = false; ctx.mozImageSmoothingEnabled = false; ctx.imageSmoothingEnabled = false; }, });