hub / github.com/davidenke/context-filter-polyfill

github.com/davidenke/context-filter-polyfill @0.3.23

Chat with this repo

repository ↗ · DeepWiki ↗ · release 0.3.23 ↗ · + Follow

43 symbols 102 edges 38 files 0 documented · 0%

What it actually does AI analysis from the code graph — generated when you open this

loading…

README

context-filter-polyfill

Examples: https://davidenke.github.io/context-filter-polyfill/

Polyfills CanvasRenderingContext2d and OffscreenCanvasRenderingContext2d capability of adopting CSS3 filters on canvas contexts (at least partially).

Right now ~~only WebKit misses an implementation (Bugzilla #198416)~~ all engines support it natively, despite Safari not having shipped it yet in the stable release channel.

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';

Changes in 0.3.14

Since version 0.3.14 the method of how the polyfill is applied has been reworked. It now polyfills the filter on each drawing function call instead of applying it once on the context in the end.

This results in more accurate behavior compared to the previous implementation.

The polyfilled and native results can be compared with a non-WebKit browser like Firefox or Chrome.

Supported filters

See it in action

Just open the integration demo on Safari / iOS.

License

MIT

Extension points exported contracts — how you extend this code

HTMLElementTagNameMap (Interface)

(no doc)

src/example.ts

WindowEventMap (Interface)

(no doc)

src/polyfill.ts

CanvasRenderingContext2D (Interface)

(no doc)

src/utils/context.utils.ts

OffscreenCanvasRenderingContext2D (Interface)

(no doc)

src/utils/context.utils.ts

HTMLCanvasElement (Interface)

(no doc)

src/utils/context.utils.ts

OffscreenCanvas (Interface)

(no doc)

src/utils/context.utils.ts

Core symbols most depended-on inside this repo

normalizeNumberPercentage

called by 9

src/utils/filter.utils.ts

normalizeLength

called by 6

src/utils/filter.utils.ts

normalizeAngle

called by 5

src/utils/filter.utils.ts

opacity

called by 5

src/filters/opacity.filter.ts

grayscale

called by 4

src/filters/grayscale.filter.ts

saturate

called by 4

src/filters/saturate.filter.ts

blur

called by 4

src/filters/blur.filter.ts

brightness

called by 4

src/filters/brightness.filter.ts

Shape

Function 26

Method 7

Interface 6

Class 4

Languages

TypeScript100%

Modules by API surface

src/example.ts12 symbols

src/utils/context.utils.ts5 symbols

src/utils/history.utils.ts4 symbols

src/utils/filter.utils.ts4 symbols

src/utils/proxy.utils.ts3 symbols

src/utils/detection.utils.ts2 symbols

src/polyfill.ts2 symbols

src/filters/sepia.filter.ts1 symbols

src/filters/saturate.filter.ts1 symbols

src/filters/opacity.filter.ts1 symbols

src/filters/none.filter.ts1 symbols

src/filters/invert.filter.ts1 symbols

For agents

$ claude mcp add context-filter-polyfill \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact