1

I have a canvas object from which i want to get the color of a position with canvas.getImageData. When i paint a gradient on it and try to get the color from point (0,0) chrome behaves as expected and returns the color value 255,255,255 whereas IE returns 254,253,253.

I have here a plunker which shows what i mean :

http://plnkr.co/edit/BWSn2J2N2A6poaH4WR6a?p=preview

You can just execute this in IE and in Chrome and you'll see the difference. I use the IE v11 and the Chrome v40.

Maybe the error is during my creation of the canvas.

var RepaintGradient = function(gradient) { _gradientContext.fillStyle = 'rgb(255,0,0)'; _gradientContext.fillRect(0,0,width,height); var gradientWTT = _gradientContext.createLinearGradient(0, 0, width, 0); gradientWTT.addColorStop(0, "white"); gradientWTT.addColorStop(1, gradient); _gradientContext.fillStyle = gradientWTT; _gradientContext.fillRect(0, 0, width, height); var gradientBTT = _gradientContext.createLinearGradient(0, width, 0, 0); gradientBTT.addColorStop(0, "black"); gradientBTT.addColorStop(1, "transparent"); _gradientContext.fillStyle = gradientBTT; _gradientContext.fillRect(0, 0, width, height); var color = _gradientContext.getImageData(0, 0, 1, 1).data; alert(color[0]+' '+color[1]+' '+color[2]); };

Is this a normal behavior and IE and Chrome have this difference or is it something that i missed during the creation of the canvas ?

Improve this question
0

2 Answers 2

Reset to default
1

This is due to rounding errors during blending and composition when sub-pixeling is used - different browsers gain different result based on their approach (IE and FireFox gives the same result, webkit browsers a different result).

It's not much we can do with the inner working, but we can adjust for sub-pixeling so it won't happen by simply translating the canvas half pixel.

Add this line to the top of the gradient function:

 _gradientContext.setTransform(1,0,0,1, 0.5,0.5); // offset 0.5 pixel

and it should work

The reason being that pixels are initially rendered from the pixel's center, meaning 0.5 of the pixel is interpolated both ways. Translating 0.5 pixel will match the center to the pixel grid.

Update (from comments):

Another approach using coordinates to calculate color value (HSL) instead of picking a pixel (this approach will also allow you to set a point in the picker based on input values):

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

@Bongo no problem! just be aware of that if you use transforms other places you will need a save/restore in the function (or better, rebuild the transforms each you need them) - otherwise, this will reset them.
@markE I haven't tried but as the main issue in this case is sub-pixeling there is a good chance it should work. Though, the alpha channel would be another factor (and possibly gamma) so it need to be tested...
@Bongo another approach using coordinates to calculate color value (HSL) instead of picking a pixel (this approach will also allow you to set a point in the picker based on input values): stackoverflow.com/questions/16835070/…
@KenFyrstenberg I changed yesterday everything to coordinates. So your second approach was my favourit :)
@Bongo great to hear :) - I updated the answer to include this.
|
1

It's normal...

Different browsers are allowed to impliment slightly different renderings of canvas gradients.

Even one image will be rendered slightly differently on each browser.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.