Bug 275436 - Support OffscreenCanvasRenderingContext2D.filter
Summary: Support OffscreenCanvasRenderingContext2D.filter
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Canvas (show other bugs)
Version: Safari Technology Preview
Hardware: Mac (Apple Silicon) macOS 14
: P2 Normal
Assignee: Said Abou-Hallawa
URL:
Keywords: InRadar
Depends on: 277638
Blocks:
  Show dependency treegraph
 
Reported: 2024-06-13 05:21 PDT by Quinton Ashley
Modified: 2024-08-05 10:23 PDT (History)
5 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Quinton Ashley 2024-06-13 05:21:49 PDT
I'm working on q5.js, a new, lightweight implementation of the p5.js api.

https://q5js.org

Here's the module for rendering images on a 2d canvas:

https://q5js.org/src/q5-2d-image.js

The `nativeFilter` function that uses the ctx.filter property with an OffScreenCanvas works in Chrome but not in Safari Technology Preview with the Canvas context filter flag on.

ctx.filter is set to "none" by default instead of undefined so it seems like it's successfully enabled.

```js
ctx.filter = "blur(6px)"
```

But after changing it, the dev tools still report its set to "none" and nothing happens visually when the offscreen canvas is drawn to the main canvas which is visible. I tried all different filters, not just blur and nothing works.

I'm excited to have ctx.filter in Safari because I could remove the code for software implemented filter from the default q5 bundle. For typical use, it's not necessary in other browsers except Safari and makes q5 perform the worst at image filtering in Safari currently.

Thanks for taking a look at this issue!
Comment 1 Karl Dubost 2024-06-18 23:26:48 PDT
This ccould be related to the work done 
in Bug 273923
which has just been merged. 

To double check
Comment 2 Radar WebKit Bug Importer 2024-06-20 05:22:14 PDT
<rdar://problem/130199724>
Comment 3 Said Abou-Hallawa 2024-06-21 17:50:46 PDT
Pull request: https://github.com/WebKit/WebKit/pull/30074