context-filter-polyfill - GitLite

KO | EN

gitlite — search

#python #hacktoberfest #llm #golang #go #android #machine-learning #rust #nodejs #macos #java #windows #awesome #security

context-filter-polyfill

(★ 107)

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

File Explorer

Download Latest Version (.zip)

- - main.yml
- - blur.filter.spec.ts
  - blur.filter.ts
  - brightness.filter.spec.ts
  - brightness.filter.ts
  - contrast.filter.spec.ts
  - contrast.filter.ts
  - drop-shadow.filter.spec.ts
  - drop-shadow.filter.ts
  - grayscale.filter.spec.ts
  - grayscale.filter.ts
  - hue-rotate.filter.spec.ts
  - hue-rotate.filter.ts
  - invert.filter.spec.ts
  - invert.filter.ts
  - none.filter.spec.ts
  - none.filter.ts
  - opacity.filter.spec.ts
  - opacity.filter.ts
  - saturate.filter.spec.ts
  - saturate.filter.ts
  - sepia.filter.spec.ts
  - sepia.filter.ts
- - supported-filters.global.ts
- - mock.data.ts
- - filter.type.ts
- - context.utils.ts
  - detection.utils.ts
  - filter.utils.spec.ts
  - filter.utils.ts
  - history.utils.ts
  - proxy.utils.ts
- example.css
- example.html
- example.jpg
- example.ts
- index.ts
- module.d.ts
- polyfill.ts
.editorconfig
.gitignore
.npmignore
.npmrc
.nvmrc
.prettierrc
CHANGELOG.md
esbuild.config.ts
eslint.config.ts
LICENSE
package-lock.json
package.json
README.md
tsconfig.json
web-test-runner.config.ts

# Installation Guide

1. Get the code

git clone https://github.com/davidenke/context-filter-polyfill

Downloads the entire project code from GitHub to your computer.

cd context-filter-polyfill

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

<script src="https://cdn.jsdelivr.net/npm/context-filter-polyfill/dist/index.min.js"></script>

Type this command into your terminal and run it.

npm install context-filter-polyfill

Downloads and installs the libraries listed in package.json.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# context-filter-polyfill

[![Build Status](https://github.com/davidenke/context-filter-polyfill/actions/workflows/main.yml/badge.svg?branch=main)](https://github.com/davidenke/context-filter-polyfill)
[![NPM Version][npm-version-image]][npm-url]
[![NPM Install Size][npm-install-size-image]][npm-install-size-url]

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

Polyfills [`CanvasRenderingContext2d`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) and [`OffscreenCanvasRenderingContext2d`](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvasRenderingContext2d) capability of adopting [CSS3 filters](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter) on canvas contexts (at least partially).

Right now ~~only WebKit [misses an implementation (Bugzilla #198416)](https://bugs.webkit.org/show_bug.cgi?id=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:

```html
<head>
  <script src="https://cdn.jsdelivr.net/npm/context-filter-polyfill/dist/index.min.js"></script>
</head>
```

Or from npm:

```bash
npm install context-filter-polyfill
```

... and import it in your code:

```js
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](https://davidenke.github.io/context-filter-polyfill/) can be compared with a non-WebKit browser like Firefox or Chrome.

## Supported filters

- [`url`](<https://developer.mozilla.org/en-US/docs/Web/CSS/filter#url()>) ✗
- [`blur`](<https://developer.mozilla.org/en-US/docs/Web/CSS/filter#blur()>) ✔
- [`brightness`](<https://developer.mozilla.org/en-US/docs/Web/CSS/filter#brightness()>) ✔
- [`contrast`](<https://developer.mozilla.org/en-US/docs/Web/CSS/filter#contrast()>) ✔
- [`drop-shadow`](<https://developer.mozilla.org/en-US/docs/Web/CSS/filter#drop-shadow()>) ✔
- [`grayscale`](<https://developer.mozilla.org/en-US/docs/Web/CSS/filter#grayscale()>) ✔
- [`hue-rotate`](<https://developer.mozilla.org/en-US/docs/Web/CSS/filter#hue-rotate()>) ✔
- [`invert`](<https://developer.mozilla.org/en-US/docs/Web/CSS/filter#invert()>) ✔
- [`none`](<https://developer.mozilla.org/en-US/docs/Web/CSS/filter#none()>) ✔
- [`opacity`](<https://developer.mozilla.org/en-US/docs/Web/CSS/filter#opacity()>) ✔
- [`saturate`](<https://developer.mozilla.org/en-US/docs/Web/CSS/filter#saturate()>) ✔
- [`sepia`](<https://developer.mozilla.org/en-US/docs/Web/CSS/filter#sepia()>) ✔

## See it in action

Just open the [integration demo](https://davidenke.github.io/context-filter-polyfill/) on Safari / iOS.

## License

[MIT](LICENSE)

[npm-install-size-image]: https://badgen.net/packagephobia/install/context-filter-polyfill
[npm-install-size-url]: https://packagephobia.com/result?p=context-filter-polyfill
[npm-url]: https://npmjs.org/package/context-filter-polyfill
[npm-version-image]: https://badgen.net/npm/v/context-filter-polyfill