Bug 198416 - Support CanvasRenderingContext2D.filter
Summary: Support CanvasRenderingContext2D.filter
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Canvas (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Enhancement
Assignee: Said Abou-Hallawa
URL:
Keywords: BrowserCompat, InRadar
Depends on: 246732 246675 246681 246697 246822
Blocks:
  Show dependency treegraph
 
Reported: 2019-05-31 04:57 PDT by Paul Neave
Modified: 2023-09-27 01:18 PDT (History)
11 users (show)

See Also:


Attachments
Chrome output (2.06 MB, image/png)
2022-02-16 04:20 PST, Thomas Steiner
no flags Details
Safari output (2.11 MB, image/png)
2022-02-16 04:21 PST, Thomas Steiner
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Paul Neave 2019-05-31 04:57:38 PDT
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.
Comment 1 Radar WebKit Bug Importer 2019-05-31 09:12:33 PDT
<rdar://problem/51303686>
Comment 2 Xidorn Quan 2021-01-18 13:09:53 PST
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.
Comment 3 Philip Jägenstedt 2022-01-07 03:46:50 PST
See also bug 234298, which is about the more recent addition of the CanvasFilter interface.
Comment 4 Thomas Steiner 2022-02-16 04:20:53 PST
Created attachment 452178 [details]
Chrome output
Comment 5 Thomas Steiner 2022-02-16 04:21:34 PST
Created attachment 452179 [details]
Safari output
Comment 6 Thomas Steiner 2022-02-16 04:23:50 PST
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).
Comment 7 Said Abou-Hallawa 2022-08-29 17:58:30 PDT
Pull request: https://github.com/WebKit/WebKit/pull/3793
Comment 8 Karl Dubost 2023-03-08 07:08:29 PST
Related webcompat issue
https://github.com/bigbluebutton/bigbluebutton/issues/13969
Comment 9 Thomas Steiner 2023-09-26 01:12:58 PDT
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.
Comment 10 Simon Fraser (smfr) 2023-09-26 08:56:58 PDT
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.
Comment 11 Thomas Steiner 2023-09-26 09:36:27 PDT
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.
Comment 12 Karl Dubost 2023-09-26 21:00:05 PDT
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
Comment 13 Thomas Steiner 2023-09-27 01:04:31 PDT
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).
Comment 14 Karl Dubost 2023-09-27 01:10:11 PDT
> 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.
Comment 15 Thomas Steiner 2023-09-27 01:18:48 PDT
> 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."