context-filter-polyfill
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
Installation
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';Supported filters
-
url✗ -
blur✔ -
brightness✔ -
contrast✔ -
drop-shadow✔ -
grayscale✔ -
hue-rotate✔ -
invert✔ -
none✔ -
opacity✔ -
saturate✔ -
sepia✔
See it in action
Just open the integration demo on Safari / iOS or IE11.
Strategy
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.