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.
<rdar://problem/51303686>
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.
See also bug 234298, which is about the more recent addition of the CanvasFilter interface.
Created attachment 452178 [details] Chrome output
Created attachment 452179 [details] Safari output
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).
Pull request: https://github.com/WebKit/WebKit/pull/3793
Related webcompat issue https://github.com/bigbluebutton/bigbluebutton/issues/13969
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.
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.
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.
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
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).
> 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.
> 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."