context-filter-polyfill
v0.3.13
Published
Polyfills `CanvasRenderingContext2d.filter` capability of adopting CSS3 filters to canvas contexts at least partially.
Downloads
7,358
Readme
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.