RESOLVED FIXED 198416
Support CanvasRenderingContext2D.filter
https://bugs.webkit.org/show_bug.cgi?id=198416
Summary Support CanvasRenderingContext2D.filter
Paul Neave
Reported 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.
Attachments
Chrome output (2.06 MB, image/png)
2022-02-16 04:20 PST, Thomas Steiner
no flags
Safari output (2.11 MB, image/png)
2022-02-16 04:21 PST, Thomas Steiner
no flags
Radar WebKit Bug Importer
Comment 1 2019-05-31 09:12:33 PDT
Xidorn Quan
Comment 2 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.
Philip Jägenstedt
Comment 3 2022-01-07 03:46:50 PST
See also bug 234298, which is about the more recent addition of the CanvasFilter interface.
Thomas Steiner
Comment 4 2022-02-16 04:20:53 PST
Created attachment 452178 [details] Chrome output
Thomas Steiner
Comment 5 2022-02-16 04:21:34 PST
Created attachment 452179 [details] Safari output
Thomas Steiner
Comment 6 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).
Said Abou-Hallawa
Comment 7 2022-08-29 17:58:30 PDT
Karl Dubost
Comment 8 2023-03-08 07:08:29 PST
Thomas Steiner
Comment 9 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.
Simon Fraser (smfr)
Comment 10 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.
Thomas Steiner
Comment 11 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.
Karl Dubost
Comment 12 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
Thomas Steiner
Comment 13 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).
Karl Dubost
Comment 14 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.
Thomas Steiner
Comment 15 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."
EWS
Comment 16 2024-04-25 14:07:09 PDT
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
Comment 17 2024-06-20 11:15:04 PDT
*** Bug 249753 has been marked as a duplicate of this bug. ***
Said Abou-Hallawa
Comment 18 2024-06-20 11:20:52 PDT
*** Bug 246732 has been marked as a duplicate of this bug. ***
Note You need to log in before you can comment on or make changes to this bug.