Color transforms do not work on Safari using the canvas backend

[Herschel]

Safari does not support CanvasRenderingContext2d.filter which is used to render the color transforms on display objects. I tried a few tricks such as putting the filter directly on the image element, but no luck.

Not sure how to solve this one. Either we find a better, fast way to apply color transforms on all browsers, or we add a potentially slower workaround for Safari.

[Justin-CB]

If this is still a problem, I think it would be better to use a workaround, rather than have it not wprk at all.

[Herschel]

It's less of a problem since the alternate canvas drawing path was added; simple shapes draw directly via canvas paths, and the color transform can be directly applied to the colors. So anything that is made up of solid fills will work with color transforms.

It still occurs for things that fallback to the old SVG rendering path. Unfortunately I don't think there's a good way to do this otherwise; it'd probably require rendering the art to an intermediate buffer (and several times if it has both an additive and a multiplicative color). I might implement this workaround when we add the blend modes/filter, which will require bitmap caching support anyway.

I would be more concerned about it if I didn't plan to have a WebGL renderer, where the issue doesn't apply.

[Herschel]

WebGL support was merged in and made default in #520, so this is no longer an issue in general use. However, the issue still occurs if the canvas backend is used.

[bbb651]

I found this polyfill that uses a second hidden canvas to apply the filter and copy draw it onto the main canvas, I haven't tested it but it'll probably be a noticeable hit in performance, I still think it's better than nothing.

[Lord-McSweeney]

Safari still doesn't support this.

[karlcow]

Some discussions happening on https://bugs.webkit.org/show_bug.cgi?id=198416

[isrishtisingh]

I found this polyfill

I tried this package, it is breaking all my canvas drawings.
Any other options to make Canvas/Ctx.filter function to work on iOS Chrome/Safari browsers?