canvas.toDataUrl("image/png") introduces noise

Browser Support
1

Description of the issue:
When using canvas.toDataURL(“image/png”), noise is introduced in the resulting data.

Steps to Reproduce (add as many as necessary):

  1. Set up a canvas element and an img element
  2. Fill it with a color (I used rgb(128,0,0))
  3. run img.src = canvas.toDataURL(“image/png”)
  4. Screenshot the result, and explore in an image editor
    Most pixels are the correct rgb(128,0,0), other are (for me*) rgb(128,1,0).

Example code at jsfiddle:
https://jsfiddle.net/t5md3f80/2/show

Actual Result:

image
image1056×918 10 KB

Expected result:
The same, but without the errant noise.

Reproduces how often:
100% of the time.

Operating System and Brave Version(See the About Brave page in the main menu):
Windows 8.1
Brave Version 1.7.98 Chromium: 81.0.4044.113 (Official Build) (64-bit)

Additional Information:
* I have reason to believe that at least one user of my site had their results introduce noise in the blue channel, rather than green, so ymmv.

2

Googling around this seems intentional, will update further.

3

Update:

This does appear to be intentional, and is known as ‘farbling’, and is applied regardless of Private/non-Private, and Shields Down vs Up, except that it can be detected by js when Shields are down (pixel values can be read), but not when shields are up (imagedata is zero length).

The only question that remains is: why is farbling applied even when Shields are down?
This fundamentally breaks a portion of my site where it needs perfect color matching. I can work around it for now by allowing a single lower bit difference when Brave is detected, but it seems I shouldn’t have to.

1 Like
4

Noticed the same thing and it is also breaking some features of a website I own. I am using canvas and canvas.toDataUrl to create and download game sprites.
Shields down should disable this ‘farbling’

2 Likes
5

Sorry to hear the same ‘feature’ is breaking your site. I suppose we could report our sites as ones where Brave’s shields aren’t working right, but something tells me a github Issue may be more appropriate.

Meanwhile, something in the behavior changed since my last post.

While it still introduces the noise - whether Shields are up or down - I can no longer programmatically detect that noise in my test page; however it still thwarts part of the functionality on the actual site (not sure why they’re different as of yet), so I’m leaving the ‘compatibility mode’ code in place.

I’d also like to note that my original post was based on personal research, as there had been no public statements on ‘farbling’ at the time. On May 18th, 2020, a blog post did provide some information:

6

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