Javascript bug: getImageData() returns incorrect values

here my JS code:

  function test2D() {
  const c = document.getElementById("aux");
  const ctx = c.getContext("2d");

  ctx.beginPath();
  ctx.rect(0, 0, 10, 10);
  ctx.fillStyle = "#102030";
  ctx.fill();

  ctx.beginPath();
  ctx.rect(0, 0, 5, 3);
  ctx.fillStyle = "#100000";
  ctx.fill();
  
  const data = ctx.getImageData(0, 0, 10, 10).data;
  let str = '';
  data.forEach((b,i)=> {str+=parseInt(b)+', '; if((i+1) % 4 == 0) str += '\n';});
  console.log(str);
}

test2D();

https://jsfiddle.net/tfoller/6armw15b/1/

and here is what I see in your Browser (1.20.103 Win10):

16, 0, 0, 255, 
16, 1, 0, 255, 
16, 1, 0, 255, 
16, 0, 0, 255, 
16, 1, 0, 255, 
16, 32, 48, 255, 
16, 33, 48, 255, 
16, 33, 48, 255, 
16, 32, 48, 255, 
16, 33, 48, 255, 
16, 0, 0, 255, 
16, 0, 0, 255, 
16, 1, 0, 255,
...

random 33 instead of 32 in

16, 33, 48, 255,

and 1 instead of 0 in

16, 1, 0, 255,

This code works perfectly in FF 85 and Chrome 88 (desktop Win10) but not in Brave.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.