WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
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
Details
Safari output
(2.11 MB, image/png)
2022-02-16 04:21 PST
,
Thomas Steiner
no flags
Details
View All
Add attachment
proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1
2019-05-31 09:12:33 PDT
<
rdar://problem/51303686
>
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
Pull request:
https://github.com/WebKit/WebKit/pull/3793
Karl Dubost
Comment 8
2023-03-08 07:08:29 PST
Related webcompat issue
https://github.com/bigbluebutton/bigbluebutton/issues/13969
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.
Top of Page
Format For Printing
XML
Clone This Bug