context-filter-polyfill 0.3.15
Install from the command line:
Learn more about npm packages
$ npm install @speechifyinc/context-filter-polyfill@0.3.15
Install via package.json:
"@speechifyinc/context-filter-polyfill": "0.3.15"
About this version
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.
Details
- context-filter-polyfill
-
SpeechifyInc
- 5 months ago
- MIT
- 21 dependencies
Assets
- context-filter-polyfill-0.3.15.tgz
Download activity
- Total downloads 0
- Last 30 days 0
- Last week 0
- Today 0