In the code provided, the image file named "img" was created using Gimp.
This image contains a color pixel :
rgba=176 99 234 167.
However, when displayed in a particular context and then its composition retrieved
using getImageData, there is a slight variance in the RGBA values...why?
GetImageData => 177,99,235,167
The Browser being used is Firefox Version 101
var canvas = document.createElement('canvas');
canvas.height = 1;
canvas.width = 1;
var img = new Image();
img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAABhWlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TtSIVUSuIOGSoThZEizhKFYtgobQVWnUwufQLmjQkKS6OgmvBwY/FqoOLs64OroIg+AHi6OSk6CIl/i8ptIj14Lgf7+497t4BQq3EVLNjElA1y0hEI2I6syr6XtGFfgxhAGGJmXosuZhC2/F1Dw9f70I8q/25P0evkjUZ4BGJ55huWMQbxDObls55nzjACpJCfE48YdAFiR+5Lrv8xjnvsMAzA0YqMU8cIBbzLSy3MCsYKnGYOKioGuULaZcVzluc1VKFNe7JX+jPaitJrtMcRRRLiCEOETIqKKIECyFaNVJMJGg/0sY/4vjj5JLJVQQjxwLKUCE5fvA/+N2tmZuecpP8EaDzxbY/xgDfLlCv2vb3sW3XTwDvM3ClNf3lGjD7SXq1qQWPgL5t4OK6qcl7wOUOMPykS4bkSF6aQi4HvJ/RN2WAwVugZ83trbGP0wcgRV0t3wAHh8B4nrLX27y7u7W3f880+vsBq/ZyvpKWOQAAAAAGYktHRAD/AP8A/6C9p5MAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAHdElNRQfmBhIJOxEgSszOAAAAGXRFWHRDb21tZW50AENyZWF0ZWQgd2l0aCBHSU1QV4EOFwAAABBJREFUCB0BBQD6/wCwY+qnBmkCpSTSg9wAAAAASUVORK5CYII=";
// rgba = 176 99 234 167
img.onload = function() {
var context = canvas.getContext('2d');
context.drawImage(img, 0, 0, 1, 1);
var imgData = context.getImageData(0, 0, 1, 1);
console.log(imgData);
console.log("this is not 176 99 234 167");
}updated June 20 : My output with Firefox :
https://i.stack.imgur.com/ujQ4o.png
updated June 19 : perhaps the explanation for this discrepancy can be found at this link.
https://html.spec.whatwg.org/multipage/canvas.html
NOTE Due to the lossy nature of converting between color spaces and converting to and from 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.