Native browser filters for canvas?

[ghost]

I would like to ask to add support for native filters for HTML5 Canvas due to hardware acceleration in rendering. The fact is that if you use ImageData, then one way or another you can get drawdowns in FPS, even if you run compute shaders through the GPU. Plus cache can not fully solve performance issues. I would also like to mention the problems of cross origin policy when using ImageData.

Details:

• https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter
• https://html.spec.whatwg.org/multipage/canvas.html#filters

If this Issues does not concern, then I ask you to transfer it to the category of discussions.

[lavrton]

Previously, this feature had a terrible browsers support. But now I think it is getting better. So, it will make sense to experimentally support it.

[vikpe]

Yes, native filters would be nice!

(source: MDN)

[vikpe]

Added CSS filters to my Quake model texture editor: https://vikpe.org/qw-gfx/ . Simple and performant.

css_filters.webm

apply filters:

layer.getContext().setAttr("filter", "blur(5px) hue-rotate(30deg)");
layer.draw();

get the result (layer with filters applied):

layer.getNativeCanvasElement();

remove filters:

layer.getContext().setAttr("filter", "none");
layer.draw();

[lavrton]

Safari is the blocker. I hope they will support it soon.