Javascript bug: getImageData() returns incorrect values

1

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();

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.

2

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