Canvas is blurry

[ghost]

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

is converted to canvas then if that div is relatively positioned it will possibly, dependent on browser mostly, be blurred) but in this version it seems to happen no matter what. The demos in the currently available version of 0.3.4 and 0.4.0 seem to look for '/build/html2canvas.js' which doesn't exist in these versions so I have only been able to test and compare with the 0.3.4 version I downloaded some time ago. Any ideas on this problem would be greatly appreciated. Many thanks. Please see attached screenshot from 'html2canvas-0.4.1/examples/demo2.html'...

[brcontainer]

Browser/System?
Is 32bit or 64bit?

[ghost]

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

[brcontainer]

Our now you said I'm blind, LOL.

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

[ghost]

not used to the markdown. sorry about massive font

[ghost]

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

[asimon-option]

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

[ohvitorino]

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

[asimon-option]

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

[niklasvh]

Are you on retina?

[asimon-option]

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.

[ohvitorino]

I'm not running a mac either.
Windows 7

Chrome: Version 32.0.1700.107 m
Firefox: Version 27.0.1

[bleuscyther]

Same issue

[ghost]

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" notifications@github.com wrote:

Same issue

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

[bleuscyther]

Yes it is definitely less burry.

[DavidHequet]

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/

[Paratron]

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?

[btm1]

+1 blurry on retina

[MisterLamb]

For those having the issue with retina displays, see my answer in #390

[niklasvh]

Fixed in 1.0.0