Html2canvas: Canvas rendering is blurry on retina displays

Created on 24 May 2014  ·  37Comments  ·  Source: niklasvh/html2canvas

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).
screen shot 2014-05-24 at 1 29 51 pm

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.

Bug

Most helpful comment

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

All 37 comments

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?

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.
original
notimproved

@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
notimproved (3)

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

image

Why does not this picture know?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

kunal886496 picture kunal886496  ·  3Comments

wbarrantes picture wbarrantes  ·  3Comments

anthonymejia picture anthonymejia  ·  4Comments

bishwapoudel picture bishwapoudel  ·  4Comments

rrutkows picture rrutkows  ·  4Comments