New issue
Advanced search Search tips

Issue 637576 link

Starred by 1 user
Status: WontFix
Owner: ----
Closed: Aug 2016
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 2
Type: Bug



Sign in to add a comment

Canvas rgb values inaccurate with low alpha channel values

Reported by jwdu...@gmail.com, Aug 14 2016 
UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36

Steps to reproduce the problem:
1. Write a rgba value to canvas (using either fillStyle or putImageData).
2. Read back using getImageData.
3. Low alpha values corrupt the rgb values.

Please see jsFiddle here: http://jsfiddle.net/intrinsica/eesLjfaa/

What is the expected behavior?
rgb values should be left untouched when changing the alpha channel.

What went wrong?
In the attached test case, the rgb values returned were +/-1. A lower alpha setting increases the difference.

Did this work before? No 

Chrome version: 52.0.2743.116  Channel: stable
OS Version: 10.0
Flash Version: Shockwave Flash 22.0 r0

For reference: http://stackoverflow.com/questions/22384423/canvas-corrupts-rgb-when-alpha-0

Possibly related: https://bugs.chromium.org/p/chromium/issues/detail?id=234014

Reproducible in other browsers such as IE, Edge, Firefox, Safari, Opera.

This test case arose from a need to pack data into a png for transfer and later unpack it. Presently, a work-around is to avoid the alpha channel. Ideally and academically, the fourth byte would be useful if it did not corrupt the rgb values.
TestCase.PNG
103 KB View Download

Comment 1 by f...@opera.com, Aug 15 2016

Components: Blink>Canvas
The reason for this is the use of a premultiplied backing store being used for the canvas, and in part because of the (low) precision used. The spec [1] does not require values to "round-trip" between getImageData<->putImageData.

I'll leave this as "Unconfirmed" for the Canvas guys to get a chance to expand on this, but I'm afraid this is a "WontFix".

[1] See that "Note" just before the example near the end of this section in the spec: https://html.spec.whatwg.org/multipage/scripting.html#pixel-manipulation

Comment 2 by xidac...@chromium.org, Aug 15 2016

Status: WontFix (was: Unconfirmed)
Yes, the behavior is expected. As pointed out by fs@, the reason is that canvas is always backed by a premultiplied sksurface. The lower alpha value is, the bigger the precision loss. If you change the alpha to be 0, the result will be all 0.

Comment 3 by pie...@gmail.com, May 28 2018 

doers this mean it's impossible to use canvas or img to load 4-byte data in textures for webgl shaders?

as far as i can tell this basically renders (NPI) the alpha channel useless for anything but low-precision image data.

Comment 4 by f...@opera.com, May 28 2018 

Reading through a <canvas> context will definitely not guarantee anything. <img> (or ImageBitmap) should work I believe.
►

Sign in to add a comment