css-paint-polyfill

    3.3.0 • Public • Published

    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.

    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:

    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

    Install

    npm i css-paint-polyfill

    DownloadsWeekly Downloads

    508

    Version

    3.3.0

    License

    Apache-2.0

    Unpacked Size

    138 kB

    Total Files

    12

    Last publish

    Collaborators

    • developit