0

The following code intends to set the canvas background color to rgba(16,0,0,0.1), with an expected output of [16,0,0,26], assuming an alpha value of 0.1 is equivalent to an ImageData byte of 26:

var canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgba(16, 0, 0, 0.1)";
ctx.fillRect(0, 0, 50, 50);
var output = ctx.getImageData(0, 0, 1, 1).data;
console.log(output.toString(16));

However, instead of [16,0,0,26], we get [20,0,0,26]. Somehow, a color value has inexplicably changed. If RGBA values are being stored correctly, this shouldn't occur, right?

Consider this second example, where we set a pixel value directly:

var canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
var imgData = ctx.createImageData(50, 50);

imgData.data[0] = 16;
imgData.data[1] = 0;
imgData.data[2] = 0;
imgData.data[3] = 26;

ctx.putImageData(imgData, 0, 0);
var output = imgData.data;
console.log(output.slice(0,4).toString());

Now it correctly retrieves [16,0,0,26]. However, if output = ctx.getImageData(0, 0, 1, 1).data is used instead, we again get [20,0,0,26]. So this suggests getImageData is doing something wrong, corrupting our color values.

So, why 20? It seems to be directly related to the alpha channel. As opacity decreases, the RGB values appear to become less precise than what they should, almost as if the color is being converted to RGB and then back to RGBA again. In fact, this may not be far from the truth, as the cause appears to be related to rounded alpha composition math:

// Divide alpha value
var A = 26 / 255;  // 0.10196078431372549
var C = 16 * A;    // 1.6313725490196078
C = Math.round(C); // rounding should not occur
C = C / A;         // 19.615384615384617
C = Math.round(C); // rounding should not occur

Here's some simulation code showing that this kind of rounded conversion largely represents what getImageData is doing.

So why does this occur in both Firefox and Chrome? Is this a bug that's gone unnoticed for years, or very odd, but intentional behavior? If this is intentional behavior, why is it this way, and how can one work around it?

bryc
  • 12,710
  • 6
  • 41
  • 61
  • `1.63` rounds to 2 because that's what "rounding" means. – Pointy Jun 02 '22 at 13:19
  • 1
    It's not a bug. As [noted in the HTML spec](https://html.spec.whatwg.org/multipage/canvas.html#pixel-manipulation:concept-premultiplied-alpha): "_Due to the lossy nature of converting between color spaces and converting to and from [premultiplied alpha](https://html.spec.whatwg.org/multipage/canvas.html#concept-premultiplied-alpha) color values, pixels that have just been set using `putImageData()`, and are not completely opaque, might be returned to an equivalent `getImageData()` as different values._" – CherryDT Jun 02 '22 at 14:26
  • "How can one work around it": By not treating the image data as general-purpose data storage, because it isn't. If you need to preseve the exact values, you need to store them elsewhere. The image data is purpose-built for performant storage and drawing of image data, so it makes sense that it gets "normalized" to something that is faster to apply by doing some calculations in advance - with alpha value of 0.1, it doesn't make a difference during drawing whether R is 16 or 20, so there is no need to differentiate between them in the image data either and rounding can occur once when storing it – CherryDT Jun 02 '22 at 14:31
  • @CherryDT Thanks for the info. No one is expecting general purpose storage; but many would assume canvas stores its pixels losslessly and exactly as programmed. The end result here is that `canvas` will increasingly lose color depth information as the opacity decreases. This is certainly something to keep in mind. Most comparable APIs or image formats don't work this way. – bryc Jun 02 '22 at 16:38
  • It's just, for me this is the same as other interfaces that in theory accept a wider range of values but when stored, they preserve and return only a subset or normalize it. For instance, if you do `document.body.style.display = 'what'`, afterwards you will get `document.body.style.display === ''` because the effect of `'what'` (being an unsupported value) is the same as unsetting the property. Similarly, if you do `window.location.href = 'https://google.com:443'` it will afterwards be `'https://google.com/'` without `:443` but with trailing `/` instead, etc. – CherryDT Jun 02 '22 at 17:12

0 Answers0