Html2canvas: Canvas rendering is blurry on retina displays

This library is great, but experiencing that as well. I think this is the same issue as #379, #373, #340, #203, #312, and #158 and mentioned in #390.

Any updates on this?

https://github.com/niklasvh/html2canvas/pull/127 fix the blurry

not fixed

:+1:

+1 please fix

+1 scalling and zooming css styles are not working right ? It could be solved by zooming html taking screenshot and it should look sharper

+1 please fix

+1 fix

@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;
},
});

@breim
Bro，3Q for your help.But it seems to be less obvious.Rendering problems in retina devices

Please fix it!

+1 please fix

Plz fix it, Orz

+1

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
});

@MisterLamb Your solution works brilliantly.

I also would like this fixed please

+1

+1 Fix

@MisterLamb I'm trying your solution but can't seem to get it working. I've created this fiddle with your fix that doesn't seem to do anything - do you know what I'm doing wrong? You can click the button in the fiddle and allow downloading multiple files to test it and see that they're identical in this implementation.

@MisterLamb ah just changed to 0.5.0-alpha1 and works better, thank you. Updated the

+1

@MisterLamb et al, just tried today, and this snippet does no longer work with 0.5.0 b4 - getting empty canvas - and rendered correctly if not using own canvas.

edit: probably my bug, altered fiddle is okay.

edit 2: could not narrow it down, reimplemented like this and now I have something visible but with some offset. perhaps there is a style somewhere that h2c does not fully support and it messes up the result :( lucky me.

edit 3: yes, had to move it up to document.body to get rid of the offset.

@MisterLamb you are a real genius, thanks for sharing ... it saved my day

@MisterLamb you are the best 👍

@makc me too! getting empty canvas - and rendered correctly if not using own canvas.

FYI - @eKoopmans solution works well so far in testing: https://github.com/niklasvh/html2canvas/pull/1087 .. Currently running with it

Closing in favor of #1087

@MisterLamb but how to improve the resolution of the image ??
when i am trying to save this image it saved in 96dpi , i need 300+ dpi image . how i can do this ???

@shivtumca12 in the latest release, v1.0.0-alpha.1, you can use the scale option to increase the resolution (scale: 2 will double the resolution from the default 96dpi).

//Faça zoom de 90%, antes de chamar o html2canvas, depois volte o zoom para 100%.

document.body.style.zoom = '99%';
html2canvas(document.querySelector("#content"), {allowTaint:false, widht: _width, height: _height }).then(function (canvas) {

    // var pdf = new jsPDF('p','pt','a4');
    // pdf.addImage(canvas.toDataURL("image/png"), 'PNG', 10, 10, 580, 0)                            
    // pdf.save('Grafico.pdf');        
    var link = document.createElement('a');
    link.href = canvas.toDataURL("image/png");
    link.download = 'Dashboard.png';
    document.body.appendChild(link);
    link.click();
    link.style.display = 'none';
    document.body.removeChild(link)        
    document.body.style.zoom = '100%';        
    $('.preloader-wrapper').hide();
});

@MisterLamb The above your solution is worked for texts in the html page. While displaying text it will convert the text in the image brilliantly. But the image content(image) of html page is still displaying with blurr. Please advice me how can correct it.

Images are still blurry for me as well.

window.devicePixelRatio = 2;

I put this before I did html2canvas and it worked for me

Hi, I want to enter the Persian text utf8, but the font fails
How to solve this problem

wiht http://jsfiddle.net/o0a8pbwd/1/ codes

Why does not this picture know?