1

While manipulating pixels with JS Canvas putImageData there is a difference in required and rendered color. While drawing RGB(255,255,0) the out put on canvas is RGB(254,254,86) instead. Same is the case with other values. Where is the problem?

Here is the JSFiddle

Check Screenshot

var canvas = document.getElementById('canvas');
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var ctx = canvas.getContext('2d');
var imageData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
var data = imageData.data;
var red = 255;
var green = 255;
var blue = 0;
var alpha = 255;
for (var y = 0; y < canvasHeight; ++y) {
  for (var x = 0; x < canvasWidth; ++x) {
    var index = (y * canvasWidth + x) * 4;
    data[index] = red;
    data[++index] = green;
    data[++index] = blue;
    data[++index] = alpha;
  }
}
ctx.putImageData(imageData, 0, 0);
Waqas Tariq
  • 84
  • 4
  • How do you get that value? When reading it through the getImageData method, I have the correct values on Firefox, Chrome and Safari: https://jsfiddle.net/uspnqxaf/ However, the displayed value is different between each browser, because they don't use the same ICC profile to render the page. – Kaiido Feb 11 '19 at 01:50
  • Got values with the help of a screen color picker app. – Waqas Tariq Feb 11 '19 at 02:12
  • Then that's just a difference between your browser setting, and your color picker settings. Just [set the background of that page to the same RGB value](https://jsfiddle.net/4dvnfup1/), do you have the same discrepancy? – Kaiido Feb 11 '19 at 04:55
  • You can test what you have by doing `console.log(data)`. What you get is an `Uint8ClampedArray`, and you can check that the data is correct – enxaneta Feb 11 '19 at 09:27
  • Data is correct. as Kaiido said its the ICC profile causing it. Thanks all. – Waqas Tariq Feb 11 '19 at 10:19

0 Answers0