Skip to content
CSS Custom Paint / Paint Worklet polyfill with special browser optimizations.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
src
.gitignore
CONTRIBUTING.md
LICENSE
README.md
package.json

README.md

CSS Paint Polyfill demo

CSS Custom Paint / Paint Worklets polyfill npm

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.

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:

registerPaint('box', class {
  paint(ctx, geom, properties) {
    ctx.fillRect(0, 0, geom.width, geom.height)
  }
})

... registered and applied on a page:

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

var el = document.querySelector('h1')
el.style.background = 'paint(box)'

For a more complete example, see the demo.


Installation & Usage

<script src="css-paint-polyfill.js"></script>
<!-- or: -->
<script src="https://unpkg.com/css-paint-polyfill"></script>

Or with a bundler:

import 'css-paint-polyfill';

... or with ES Modules on the web:

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

Contributing

See CONTRIBUTING.md.

To hack on the polyfill locally:

git clone git@github.com:GoogleChromeLabs/css-paint-polyfill.git
cd css-paint-polyfill
npm i
npm start
# open http://localhost:5000

css-paint-polyfill

You can’t perform that action at this time.