Bug 198416 – Support CanvasRenderingContext2D.filter

• Component: Canvas
• Status: RESOLVED FIXED

[Paul Neave]

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

Please consider adding support to apply CSS-like filters to 2D canvas contexts, enabling fast and easy pixel manipulation. It's not listed on https://webkit.org/status/ but it has been supported by other browsers for nearly 2 years since Chrome 52 and Firefox 49.

[Radar WebKit Bug Importer]

<rdar://problem/51303686>

[Xidorn Quan]

I just want to chip in here that, as Safari has an especially poor performance of SVG filter (see bug 191197), we were considering using canvas to generate static image in order to mitigate, but Safari is again the only mainstream browser without filter support on canvas, so :(

Either fixing this or the performance issue would help a lot.

[Philip Jägenstedt]

See also bug 234298, which is about the more recent addition of the CanvasFilter interface.

[Thomas Steiner]

Created attachment 452178 [details]
Chrome output

[Thomas Steiner]

Created attachment 452179 [details]
Safari output

[Thomas Steiner]

It would be fantastic if `CanvasRenderingContext2D.filter` were supported. Not having it makes my app, SVGcode (https://svgco.de/) unbearably slow on Safari. I have created a little demo https://canvas-svg-filter.glitch.me/ for you to try, compare the output in Chrome (https://bugs.webkit.org/attachment.cgi?id=452178) vs. in Safari (https://bugs.webkit.org/attachment.cgi?id=452179).

[Said Abou-Hallawa]

Pull request: https://github.com/WebKit/WebKit/pull/3793

[Karl Dubost]

Related webcompat issue
https://github.com/bigbluebutton/bigbluebutton/issues/13969

[Thomas Steiner]

Is there any interest in merging the PR open at https://github.com/WebKit/WebKit/pull/3793? It's currently in draft still.

Apparently this affects Adobe: https://mastodon.social/@bendelarre/111128782070315769.

[Simon Fraser (smfr)]

There is much discussion on https://github.com/whatwg/html/issues/5621 about the canvas filter API, including feedback from Apple folks on the shape of the API.

We think the layer-based API described in https://github.com/whatwg/html/issues/8476 is much closer to what developers will want most of the time.

[Thomas Steiner]

Is getting support for an existing (clumsy-ish) API for improved Web compatibility mutually exclusive with working on a better API? The `CanvasRenderingContext2D.filter` API is supported by Firefox and Chromium, Safari is the odd one out: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter#browser_compatibility.

[Karl Dubost]

Thomas, 
do you know shims, or deployed codes trying to deal with CanvasRenderingContext2D.filter missing in Safari? Even in the context of Google Properties, where a feature would not be proposed to Safari users because of the lack of it. 


A bit of searching brings me.

https://github.com/davidenke/context-filter-polyfill

There is a couple of stackoverflow recurring questions about it.

Some issues too
https://github.com/ruffle-rs/ruffle/issues/25
https://github.com/joakin/elm-canvas/issues/38
https://github.com/excalidraw/excalidraw/issues/4301#issuecomment-974895667
https://github.com/bigbluebutton/bigbluebutton/issues/13969#issuecomment-1456734957 (related to video chat)


PS: to note the PR in
https://github.com/WebKit/WebKit/pull/3793

[Thomas Steiner]

Thanks, but this shim doesn't work at all for the concrete use case. Compare the output from https://keen-brazen-occupation.glitch.me (the version with the shim) on Safari to the output from Chrome (https://bug-198416-attachments.webkit.org/attachment.cgi?id=452178).

[Karl Dubost]

> Thanks, but this shim doesn't work at all for the concrete use case

yes probably. :) 
That was not the intent of the comment. 

The question were:
* Do you know shims, or deployed codes trying to deal with CanvasRenderingContext2D.filter missing in Safari?
* Have features been removed in Google properties because of missing filter?


This is to evaluate the current webcompat impact.

[Thomas Steiner]

> That was not the intent of the comment. 

Ah, I see. I understood the comment differently.

> The question were:
> * Do you know shims, or deployed codes trying to deal with ?
> CanvasRenderingContext2D.filter missing in Safari?

No, but I have come across the shim that you linked, but dismissed it for the reasons from my previous comment.

> * Have features been removed in Google properties because of missing filter?

I can't speak for all of Google and honestly don't know. I can say that because filters don't work, one of our demo web apps https://svgco.de/ is slow on Safari, because posterization doesn't work. 

> This is to evaluate the current webcompat impact.

Adobe have said the following in https://github.com/web-platform-tests/interop/issues/493#issue-1913922306:

"The `filter` functionality is in use by our apps at Adobe, though we are now having to build workarounds."

[EWS]

Committed 278000@main (222707e75165): <https://commits.webkit.org/278000@main>

Reviewed commits have been landed. Closing PR #3793 and removing active labels.

[Said Abou-Hallawa]

*** Bug 249753 has been marked as a duplicate of this bug. ***

[Said Abou-Hallawa]

*** Bug 246732 has been marked as a duplicate of this bug. ***