{"id":21553170,"url":"https://github.com/davidenke/context-filter-polyfill","last_synced_at":"2025-04-12T14:18:57.436Z","repository":{"id":43642964,"uuid":"179903990","full_name":"davidenke/context-filter-polyfill","owner":"davidenke","description":"Polyfills `CanvasRenderingContext2d.filter` capability of adopting CSS3 filters to canvas contexts at least partially.","archived":false,"fork":false,"pushed_at":"2025-01-12T00:01:10.000Z","size":1344,"stargazers_count":97,"open_issues_count":0,"forks_count":23,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-12T14:18:52.923Z","etag":null,"topics":["canvas2d","context","filter","polyfill"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/davidenke.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-04-07T01:11:40.000Z","updated_at":"2025-02-22T10:36:59.000Z","dependencies_parsed_at":"2024-06-18T21:24:33.779Z","dependency_job_id":"6f89bb71-d115-4c27-bf28-3b5ec91623f0","html_url":"https://github.com/davidenke/context-filter-polyfill","commit_stats":{"total_commits":201,"total_committers":2,"mean_commits":100.5,"dds":0.00995024875621886,"last_synced_commit":"523696069b2534e44a8da5d972504a15b5df06cb"},"previous_names":[],"tags_count":42,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidenke%2Fcontext-filter-polyfill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidenke%2Fcontext-filter-polyfill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidenke%2Fcontext-filter-polyfill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidenke%2Fcontext-filter-polyfill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davidenke","download_url":"https://codeload.github.com/davidenke/context-filter-polyfill/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248578876,"owners_count":21127714,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas2d","context","filter","polyfill"],"created_at":"2024-11-24T07:09:43.754Z","updated_at":"2025-04-12T14:18:57.414Z","avatar_url":"https://github.com/davidenke.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# context-filter-polyfill\n\n[![Build Status](https://github.com/davidenke/context-filter-polyfill/actions/workflows/main.yml/badge.svg?branch=main)](https://github.com/davidenke/context-filter-polyfill)\n[![NPM Version][npm-version-image]][npm-url]\n[![NPM Install Size][npm-install-size-image]][npm-install-size-url]\n\nExamples: https://davidenke.github.io/context-filter-polyfill/\n\nPolyfills [`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).\n\nRight 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.\n\n## Installation\n\nAdd the polyfill to your page via script tag from a CDN:\n\n```html\n\u003chead\u003e\n  \u003cscript src=\"https://cdn.jsdelivr.net/npm/context-filter-polyfill/dist/index.min.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n```\n\nOr from npm:\n\n```bash\nnpm install context-filter-polyfill\n```\n\n... and import it in your code:\n\n```js\nimport 'context-filter-polyfill';\n```\n\n## Changes in 0.3.14\n\nSince version 0.3.14 the method of how the polyfill is applied has been reworked.\nIt now polyfills the filter on each drawing function call instead of applying it once on the context in the end.\n\nThis results in more accurate behavior compared to the previous implementation.\n\nThe [polyfilled and native results](https://davidenke.github.io/context-filter-polyfill/) can be compared with a non-WebKit browser like Firefox or Chrome.\n\n## Supported filters\n\n- [`url`](\u003chttps://developer.mozilla.org/en-US/docs/Web/CSS/filter#url()\u003e) ✗\n- [`blur`](\u003chttps://developer.mozilla.org/en-US/docs/Web/CSS/filter#blur()\u003e) ✔\n- [`brightness`](\u003chttps://developer.mozilla.org/en-US/docs/Web/CSS/filter#brightness()\u003e) ✔\n- [`contrast`](\u003chttps://developer.mozilla.org/en-US/docs/Web/CSS/filter#contrast()\u003e) ✔\n- [`drop-shadow`](\u003chttps://developer.mozilla.org/en-US/docs/Web/CSS/filter#drop-shadow()\u003e) ✔\n- [`grayscale`](\u003chttps://developer.mozilla.org/en-US/docs/Web/CSS/filter#grayscale()\u003e) ✔\n- [`hue-rotate`](\u003chttps://developer.mozilla.org/en-US/docs/Web/CSS/filter#hue-rotate()\u003e) ✔\n- [`invert`](\u003chttps://developer.mozilla.org/en-US/docs/Web/CSS/filter#invert()\u003e) ✔\n- [`none`](\u003chttps://developer.mozilla.org/en-US/docs/Web/CSS/filter#none()\u003e) ✔\n- [`opacity`](\u003chttps://developer.mozilla.org/en-US/docs/Web/CSS/filter#opacity()\u003e) ✔\n- [`saturate`](\u003chttps://developer.mozilla.org/en-US/docs/Web/CSS/filter#saturate()\u003e) ✔\n- [`sepia`](\u003chttps://developer.mozilla.org/en-US/docs/Web/CSS/filter#sepia()\u003e) ✔\n\n## See it in action\n\nJust open the [integration demo](https://davidenke.github.io/context-filter-polyfill/) on Safari / iOS.\n\n## License\n\n[MIT](LICENSE)\n\n[npm-install-size-image]: https://badgen.net/packagephobia/install/context-filter-polyfill\n[npm-install-size-url]: https://packagephobia.com/result?p=context-filter-polyfill\n[npm-url]: https://npmjs.org/package/context-filter-polyfill\n[npm-version-image]: https://badgen.net/npm/v/context-filter-polyfill\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidenke%2Fcontext-filter-polyfill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavidenke%2Fcontext-filter-polyfill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidenke%2Fcontext-filter-polyfill/lists"}