api.CanvasRenderingContext2D.getImageData - Firefox Incognito 136.0.2 result contains noise

[Evgeni-Yorgakiev]

What type of issue is this?

Browser bug (a bug with a feature that may impact site compatibility)

What information was incorrect, unhelpful, or incomplete?

In Firefox Incognito 136.0.2 the context.fillRect does not work as intended and as it works in Firefox normal
the following code

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

var width = 137;
var height = 274;

canvas.width = width;
canvas.height = height;

context.fillStyle = '#f00';
context.fillRect(0, 0, width, height);

let indexes = [];
var imageData = context.getImageData(0, 0, width, height);
for (let index = 0; index < imageData.data.length; index++) {
  if (imageData.data[index] > 0 && imageData.data[index] < 255) {
        indexes.push(index);
    }
}
console.log(indexes.length)
console.log(imageData.data[indexes[0]])

On Firefox normal and other browsers it logs first 0 which is the amount of indexes in the imageData that do not a value of 255 or 0 which is the correct behaviour. After that it logs undefined as there is no elements in the array
On Firefox Incognito the same code logs 57 first indicating that there are 57 elements in the array that have a value different than 255 or 0. After which it logs 1 which would be the first element of the array.
This indicates that not ALL pixels in the canvas have been filled correctly. Although visually they would all be the same color since the different is too small for the human eye to see. Any code that relies on going through the array to find the first non red pixel would fail if there is something drawn on top of the red rectangle.

Changing the width from 137 to 136 fixes the issue.

What browsers does this problem apply to, if applicable?

Firefox

What did you expect to see?

The expected behavior is that all of the pixels in the canvas would be red and the getImageData would return an array filled with just 255 for red and 0 for everything else instead of 254s and 1s mixed in the array

Did you test this? If so, how?

https://developer.mozilla.org/en-US/play
tested it here by pasting the code provided in the javascript section and

<canvas id="canvas" width="700" height="400" ></canvas>

this code in the html section

Can you link to any release notes, bugs, pull requests, or MDN pages related to this?

No response

Do you have anything more you want to share?

No response

MDN URL

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillRect

MDN metadata

MDN page report details

• Query: api.CanvasRenderingContext2D.fillRect
• Report started: 2025-03-19T14:02:55.365Z

[caugner]

Thanks for reporting, I can reproduce this in Firefox Nightly 139.0a1 (2025-04-08) with the code provided in this MDN Playground.

In a non-private window, the console logs:

> 0
> undefined

In a private window, the console logs:

> 226
> 253

And here's an adaptation that uses a 2x2 canvas and logs the imageData:

# Non-private
> Uint8ClampedArray [255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255] 

# Private
> Uint8ClampedArray [252, 3, 0, 255, 255, 3, 1, 255, 255, 0, 0, 255, 255, 0, 0, 255] 

[caugner]

@Evgeni-Yorgakiev I have asked my Firefox colleagues, and this is Firefox's protection against fingerprinting:

Random data is introduced to background images when the image is read back by the website. If a website merely renders data to the background, it will render without alteration. Although typically this does not happen, if the website reads the image data in the background (and potentially displays it to you again), it will have subtle noise that may affect how the image is displayed.

I hope that helps!

As this is not something we capture in BCD, I'm going ahead and close this issue as not planned. But I will let the content team know, in case they want to document this on the getImageData() page.