Canvas and Uint32Array are not working as expected

Getting a data buffer from a HTML sketchpad and assigning it to a Uint32Array is resulting in erroneous behaviour on Brave browser for Windows and MacOS. It’s working fine on Brave browser on iOS and Android.

What we’re trying to do is a simple function to check if a HTML function is blank or not:

// returns true if every pixel's uint32 representation is 0 (or "blank")
function isCanvasBlank(canvas) {
  const context = canvas.getContext('2d');

  const pixelBuffer = new Uint32Array(
    context.getImageData(0, 0, canvas.width, canvas.height).data.buffer
  );

  return !pixelBuffer.some(color => color !== 0);
}

However, a blank canvas is returning a false value by Brave, where all other browsers (Chrome, Safari, Firefox, Edge) are returning true.

You can check out a live example of this issue on this stackoverflow page.

In this link, there is “run code snippet” to run the function. You’ll see that it won’t work on Brave but it’ll work on other browsers.


Description of the issue:
How can this issue be reproduced?

  1. Open this stackoverflow link: https://stackoverflow.com/questions/17386707/how-to-check-if-a-canvas-is-blank
  2. Run the code snippet.
  3. You’ll get a not blank result even if the canvas is blank. It works on every other browser.

Expected result:
It should return not blank

Brave Version( check About Brave):

Version 1.30.86 Chromium: 94.0.4606.61 (Official Build) (x86_64)

Additional Information:
The issue is occurring because of non-zero values being found in the Uint32Array when a data.buffer is extracted from a HTML Canvas. We’ve verified this on other browsers, which don’t have any non-zero values being extracted.

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