Repository files navigation

A polyfill that brings Houdini'sCSS 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 CanvastoDataURL() /toBlob() speed.

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

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

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

CSS.paintWorklet.addModule('./box.js')varel=document.querySelector('h1')el.style.background='paint(box)'

For a more complete example, see thedemo.

<scriptsrc="css-paint-polyfill.js"></script><!-- or: --><scriptsrc="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';

SeeCONTRIBUTING.md.

To hack on the polyfill locally:

git clone git@github.com:GoogleChromeLabs/css-paint-polyfill.gitcd css-paint-polyfillnpm inpm start# open http://localhost:5000