Feedback on Librewolf from Web Dev on HTML5 Canvas Data Permissions

A user of a web app I created recently notified me they had issues using it in the Librewolf browser.

They had no idea why the web page wasn't functioning as expected, and neither did I at first as the page operates perfectly fine in Firefox and as best as we could tell together, the user was able to run test pages for HTML5 canvas correctly.

I hadn't heard of the Librewolf browser but I've always been a fan of lesser known browsers as I feel the web has become far too centralised around Chrome, so I was keen to help them sort out the issue.

Web page here: https://gradyvuckovic.gitlab.io/steam-deck-customiser/

It's a simple and harmless enough application, it's a product customiser that relies on HTML5 Canvas API to composite images of a product with customisable regions of colour. Something I created for fun for fans of the Steam Deck to play with while waiting for their Steam Decks to arrive.

Operation

During page load, the page loads a bunch of images, draws them to a hidden HTML canvas, then reads back their imagedata back to store for later use. Later on as the user changes colour options, the image data is used to composite an image of the product, with colour adjustments for each region of the product.

Unfortunately because the image data is being read during the page load process, and Librewolf blocks access to Canvas data prior to permission being given, this silently fails and on Librewolf the result is garbled nonsense colour values, so the whole thing doesn't work.

Clicking on a button to change the view does however prompt the user to give permission but by that point it's too late, because the data has been already loaded once, but junk data was grabbed. However, after a refresh, the web page works correctly from then on.

This is new to me

I wasn't aware that any web browsers did block access to canvas data and as far as I'm aware this is behaviour outside of the web specs, so it came as a surprise to me.

But not an unwelcomed one.

I have no problem with browsers asking the user for permission first before web pages do something, in fact I love it. I too care about privacy and browse the web, so this isn't a terrible idea.

However I do have some feedback on how I believe this could be improved slightly:

Developer API

I'd love to modify my web application to detect first if it has permission to access canvas data before doing so, that way I could modify my application to check first, then if it lacks the permissions, ask the user to give them.

But as far as I could tell from looking over everything on Librewolf's FAQ, there doesn't seem to be one? If I'm mistaken, I'd love to be pointed in the right direction to find it.

If Librewolf implemented an API to check first for permission, I'd be happy to use it.

User Notification

It's great that Librewolf asks the user if they wish to give permission for the web page to access canvas data during a user interaction event, but I feel the user should be also notified when a web page attempts and fails to gather canvas data outside of user events too.

This has a dual benefit, both giving the user a potential hint of why a web page might fail to operate properly if it requires access to canvas data without user interaction, but also to notify the user of when a website might be attempting to fingerprint them.

Final thought

In principle I love the idea of this change of behaviour, in practice 'failing silently' is as usual undesirable for software, and an API for developers to use to detect this restriction would be great.