Examples: https://davidenke.github.io/context-filter-polyfill/
Polyfills CanvasRenderingContext2d and OffscreenCanvasRenderingContext2d capability of adopting CSS3 filters on canvas contexts (at least partially).
Right now only WebKit misses an implementation (Bugzilla #198416) all engines support it natively, despite Safari not having shipped it yet in the stable release channel.
Add the polyfill to your page via script tag from a CDN:
<head>
<script src="https://cdn.jsdelivr.net/npm/context-filter-polyfill/dist/index.min.js"></script>
</head>Or from npm:
npm install context-filter-polyfill... and import it in your code:
import 'context-filter-polyfill';Since version 0.3.14 the method of how the polyfill is applied has been reworked. It now polyfills the filter on each drawing function call instead of applying it once on the context in the end.
This results in more accurate behavior compared to the native implementation.
The polyfilled and native results can be compared with a non-WebKit browser like Firefox or Chrome.
url✗blur✔brightness✔contrast✔drop-shadow✔grayscale✔hue-rotate✔invert✔none✔opacity✔saturate✔sepia✔
Just open the integration demo on Safari / iOS.