Skip to content

Polyfills `CanvasRenderingContext2d.filter` capability of adopting CSS3 filters to canvas contexts at least partially.

License

Notifications You must be signed in to change notification settings

SpeechifyInc/context-filter-polyfill

 
 

Repository files navigation

context-filter-polyfill

Build Status

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:

  1. monkey patching all properties of the CanvasRenderingContext2d
  2. monkey patching all getters and setters of the CanvasRenderingContext2d
  3. 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.

About

Polyfills `CanvasRenderingContext2d.filter` capability of adopting CSS3 filters to canvas contexts at least partially.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Languages

  • TypeScript 87.3%
  • HTML 12.0%
  • JavaScript 0.7%