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
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:
clearRect
drawImage
fill
fillRect
fillText
stroke
strokeRect
strokeText
The contents of the offscreen canvas are applied back to the original canvas and is then resetted.