Context-filter-polyfill NPM

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

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:

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.

@everything-registry/sub-chunk-1376 rdk0 @rubin-epo/epo-widget-lib

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago