Html2canvas: Canvas is blurry

Created on 14 Feb 2014 · 19Comments · Source: niklasvh/html2canvas

Using the latest version I get blurred canvasses – tried this across chrome, firefox and safari all with the same result. Previously using 0.3.4 this happened sometimes but only (i think) with relatively positioned target elements (eg. if

Source

ghost

All 19 comments

Browser/System?
Is 32bit or 64bit?

brcontainer on 15 Feb 2014

Chrome

Version 32.0.1700.107

Safari

Version 7.0.1 (9537.73.11)

Firefox

27.0

System – 64bit I think...
Mac OS X 10.9.1
MacBook Pro
Retina, 13-inch, Late 2012
Processor 2.9 GHz Intel Core i7
Memory 8 GB 1600 MHz DDR3
Graphics Intel HD Graphics 4000 1024 MB

ghost on 15 Feb 2014

Our now you said I'm blind, LOL.

I have an old mac, I'll try to test firefox.

brcontainer on 15 Feb 2014

not used to the markdown. sorry about massive font

ghost on 15 Feb 2014

I think it may possibly be a retina issue. I tried the same tests on an older macbook and they looked fine.

ghost on 16 Feb 2014

Any news on this? I started getting blurred canvas as well. No version change for the past months (I'm on 0.4.1).

asimon-option on 20 Feb 2014

Yes, I'm using 0.4.1 and I also get the blurred canvas. Both in FF and in Chrome on windows.

ohvitorino on 24 Feb 2014

I bet that something else changed on the browsers... It's really anoying because it was working perfectly fine a few weeks ago. Or maybe it's something else...

asimon-option on 24 Feb 2014

Are you on retina?

niklasvh on 24 Feb 2014

Not really, I'm not running a mac. Just a regular desktop with a 1080p monitor attached. I'm using Windows 8 but I tested it on Windows 7 and the same thing happened.

asimon-option on 24 Feb 2014

I'm not running a mac either.
Windows 7

Chrome: Version 32.0.1700.107 m
Firefox: Version 27.0.1

ohvitorino on 24 Feb 2014

Same issue

bleuscyther on 24 Feb 2014

Ignoring the retina issue, the blurring has been resolved for me (in latest and earlier) versions by only targeting absolutely positioned elements. (abs pos container - relative within that seems ok.) Currently working fine within that limitation (I clone the div I need and reposition to abs 0,0 then get the canvas.)

On 25/02/2014, at 6:42, "jeffrey n. carre" [email protected] wrote:

Same issue

—
Reply to this email directly or view it on GitHub.

ghost on 24 Feb 2014

👍1

Yes it is definitely less burry.

bleuscyther on 24 Feb 2014

Hi,

I had same result when trying to render a bootstrap dialog content, i found that the crop functionnality provider by canvas is faulty when you use float value for left/top crop start.

So i fully render my page with html2canvas then crop my elements providing int value.

you can see result in this jsfiddle so you can update your crop method

http://jsfiddle.net/onclebob/e4rfszpL/12/

DavidHequet on 16 Jan 2015

😕1

I was able to reconstruct the bug - the result is being blurry if you crop the rendered result and not provide integer values for the cropping; so its not a fault of html2canvas.

@luckystairs can you confirm that?