https://davidenke.github.io/context-filter-polyfill/
Polyfills CanvasRenderingContext2d.filter capability of adopting CSS3 filters to canvas contexts at least partially.
Successfully tested on
- macOS Safari
- iOS Safari
- Windows 10 IE11
- Windows 10 Edge 16-18
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';url✗blur✔brightness✔contrast✔drop-shadow✔grayscale✔hue-rotate✔invert✔none✔opacity✔saturate✔sepia✔
Just open the integration demo on Safari / iOS or IE11.
The polyfill is applied by the following steps:
- monkey patching all properties of the
CanvasRenderingContext2d - monkey patching all getters and setters of the
CanvasRenderingContext2d - monkey patching all methods of the
CanvasRenderingContext2d
These patches are proxying all changes to a offscreen canvas which applies the appropriate filter polyfills everytime a drawing function is called:
clearRectdrawImagefillfillRectfillTextstrokestrokeRectstrokeText
The contents of the offscreen canvas are applied back to the original canvas and is then resetted.