https://github.com/GoogleChromeLabs/css-paint-polyfill

CSS Custom Paint / Paint Worklet polyfill with special browser optimizations.
https://github.com/GoogleChromeLabs/css-paint-polyfill

css css-paint-api houdini polyfill

Last synced: 3 months ago
JSON representation

CSS Custom Paint / Paint Worklet polyfill with special browser optimizations.

• Host: GitHub
• URL: https://github.com/GoogleChromeLabs/css-paint-polyfill
• Owner: GoogleChromeLabs
• License: apache-2.0
• Created: 2018-05-18T21:09:42.000Z (over 6 years ago)
• Default Branch: main
• Last Pushed: 2023-09-08T18:19:04.000Z (over 1 year ago)
• Last Synced: 2024-08-02T06:24:03.964Z (6 months ago)
• Topics: css, css-paint-api, houdini, polyfill
• Language: JavaScript
• Homepage: https://googlechromelabs.github.io/css-paint-polyfill/
• Size: 213 KB
• Stars: 727
• Watchers: 21
• Forks: 38
• Open Issues: 20
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-github-repos - GoogleChromeLabs/css-paint-polyfill - CSS Custom Paint / Paint Worklet polyfill with special browser optimizations. (JavaScript)
• awesome-list - css-paint-polyfill

README

        


  

  


    CSS Custom Paint / Paint Worklets polyfill

    

  


A polyfill that brings Houdini's [CSS Custom Paint API] and Paint Worklets to all modern browsers (Edge, Firefox, Safari and Chrome).

Performance is particularly good in Firefox and Safari, where this polyfill leverages `-webkit-canvas()` and `-moz-element()` for optimized rendering. For other browsers, framerate is governed by Canvas `toDataURL()` / `toBlob()` speed.

As of version 3, this polyfill also includes basic implementations of `CSS.supports()`, `CSS.registerProperty()` and CSS unit functions (`CSS.px()` etc), which are injected in browsers without native support.

## What are Paint Worklets?

Paint Worklets are JavaScript modules in which you can program custom graphics code. Once registered, they can be applied to elements using CSS:

An example `box.js` worklet:

```js

registerPaint('box', class {

  paint(ctx, geom, properties) {

    ctx.fillRect(0, 0, geom.width, geom.height)

  }

})

```

... registered and applied on a page:

```js

CSS.paintWorklet.addModule('./box.js')

var el = document.querySelector('h1')

el.style.background = 'paint(box)'

```

For a more complete example, see the [demo](https://github.com/GoogleChromeLabs/css-paint-polyfill/tree/master/demo).

---

## Installation & Usage

```html

```

Or with a bundler:

```js

import 'css-paint-polyfill';

```

... or with ES Modules on the web:

```js

import 'https://unpkg.com/css-paint-polyfill';

```

---

## Contributing

See [CONTRIBUTING.md](https://github.com/GoogleChromeLabs/css-paint-polyfill/blob/master/CONTRIBUTING.md).

To hack on the polyfill locally:

```sh

git clone [email protected]:GoogleChromeLabs/css-paint-polyfill.git

cd css-paint-polyfill

npm i

npm start

# open http://localhost:5000

```

---



  



[CSS Custom Paint API]: https://developers.google.com/web/updates/2018/01/paintapi