diffuse image (bug)

[viruseg]

Copy html on the canvas gives a blurred image. Html which result in defective put in the archive (https://www.dropbox.com/s/u75mle86adnkcie/gif2.zip)

Error occurs on Windows 8 x64:
Internet Explorer 10: click to button "Run (abnormal)"
Mozila Firefox: click to button "Run (abnormal)" or button "Run (normal)". Blurry is not as strong as in Internet Explorer, but still blurry.
Chrome & Opera: there is no error.

Windows XP Pro SP3 x86:
Chrome 26.0.1410.64: click to button "Run (abnormal)" or button "Run (normal)". The text is a more bold than it should be.
Firefox & Opera: there is no error.

[niklasvh]

I'm not able to reproduce the error here http://jsfiddle.net/486r6/ on either Linux Chrome or win8 Chrome

[viruseg]

Here's a screenshot error on Win 8 x64 Internet Explorer 10: https://www.dropbox.com/s/vtznulx1ym3hy5t/ie10error_1.png
It is seen especially as smeared smiley.

Strange, but in Mozila Firefox bug I do not play, although I had almost the same situation as in Internet Explorer 10.

[viruseg]

I figured out under what conditions an error. If the parent has the coordinates of the point, for example: left: 470.5px;
Here is an example where the error appears: https://www.dropbox.com/s/tfpmydc7quzrv2z/gif2.zip

[leonzinger]

i have made a PR here with the fix: #373
Hope it helps

[viruseg]

To fix this bug should be:

n.left
replaced by
Math.ceil(n.left)

n.top
replaced by
Math.ceil(n.top)

Also all round properties such as objects: width, height, etc.

[AndyBoat]

@viruseg
I wonder how to make it by CSS? Because I am having some trouble with it too but prefer solving it in CSS instead of JS

[viruseg]

Баг появляется только если в координатах DOM есть свойства характеризующие размер элемента (width, height, left, top, margin, padding) значение которых не целочисленное. Это приводит к тому, что элемент отрисовывается в двух смежных пикселях вместо одного.
Попробуйте построить сетку координат в CSS так чтобы все значения были целыми.

Sorry for my English. This is a translation in google translate.
The bug appears only if the coordinates DOM element has properties which characterize the size (width, height, left, top, margin, padding) where the value is not an integer. This leads to the fact that the element is drawn in two adjacent pixels instead of one.
Try to build in the CSS coordinate grid so that all values are integers.