Bug 234298 - Implement SVG filter interface for Canvas2D
Summary: Implement SVG filter interface for Canvas2D
Status: RESOLVED INVALID
Alias: None
Product: WebKit
Classification: Unclassified
Component: Canvas (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-12-14 08:23 PST by Aaron Krajeski
Modified: 2022-05-02 07:44 PDT (History)
6 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Aaron Krajeski 2021-12-14 08:23:33 PST
SVG filters are currently useable in canvas2D but there is no javascript interface for them. WHATWG has recently approved spec changes to this effect:
https://github.com/whatwg/html/issues/5621

Tests are written and can be reviewed and commented upon at:
https://github.com/web-platform-tests/wpt/tree/master/html/canvas/element/manual/filters
https://github.com/web-platform-tests/wpt/tree/master/html/canvas/element/filters
https://github.com/web-platform-tests/wpt/tree/master/html/canvas/offscreen/filters

Chromium implementation bug: crbug.com/1169216
Comment 1 Radar WebKit Bug Importer 2021-12-21 08:24:15 PST
<rdar://problem/86770008>
Comment 2 Philip Jägenstedt 2022-01-07 03:47:48 PST
See also bug 198416, which is about the basic support (string) for the filter attribute. Or at least it was filed before CanvasFilter was added to the spec, so that's a reasonable interpretation of it.
Comment 3 Thomas Steiner 2022-02-16 04:29:38 PST
I would love to use this in my app SVGcode (https://svgco.de/), since the alternative is to work with dynamically built SVG filter strings (https://github.com/tomayac/SVGcode/blob/ae0a3fbf616afee2accdbfaae1c2d79713f631c7/src/js/preprocess.js#L151-L205), which works if I force this execution path in Chrome, but which fails in Safari (tracked as https://bugs.webkit.org/show_bug.cgi?id=198416#c6). So despite being clumsy, it's not even a working work-around.

Long story short, having the new `CanvasFilter` would make my code a lot easier (https://github.com/tomayac/SVGcode/blob/main/src/js/preprocessworker.js#L89-L113).
Comment 4 Aaron Krajeski 2022-02-16 10:47:19 PST
@Thomas Steiner

Have you tried in Chrome Canary? The feature is launched there!
Comment 5 Aaron Krajeski 2022-02-16 11:41:27 PST
(In reply to Aaron Krajeski from comment #4)
> @Thomas Steiner
> 
> Have you tried in Chrome Canary? The feature is launched there!

Never mind! I just re-read your comment. Glad you're using the new feature in Chrome!
Comment 6 Thomas Steiner 2022-02-16 13:27:25 PST
> Never mind! I just re-read your comment. Glad you're using the new feature in Chrome!

Yeah, I use the new code path by default in Chrome, but what I meant with “forcing” the other code path in Chrome was to artificially fail my feature detection so Chrome takes the Safari/Firefox code path just to verify the approach works in theory (it doesn’t in Safari/Firefox in practice).
Comment 7 Anne van Kesteren 2022-05-02 07:44:19 PDT
Resolving this as INVALID per https://github.com/whatwg/html/pull/7874.