Web/API/PaintWorklet

From Get docs

This is an experimental technologyCheck the Browser compatibility table carefully before using this in production.


The PaintWorklet interface of the CSS Painting API programmatically generates an image where a CSS property expects a file. Access this interface through CSS.paintWorklet.

Properties

PaintWorklet.devicePixelRatio
Returns the current device's ratio of physical pixels to logical pixels.

Event handlers

None.

Methods

This interface inherits methods from Worklet.

PaintWorklet.registerPaint()
Registers a class programmatically generate an image where a CSS property expects a file.
CSS.PaintWorklet.addModule()
The addModule() method, inhertied from the Worklet interface loads the module in the given JavaScript file and adds it to the current PaintWorklet.

Examples

The following three examples go together to show creating, loading, and using a PaintWorklet.

Create a PaintWorklet

The following shows an example worklet module. This should be in a separate js file. Note that registerPaint() is called without a reference to PaintWorklet.

class CheckerboardPainter {
  paint(ctx, geom, properties) {
    // Use `ctx` as if it was a normal canvas
    const colors = ['red', 'green', 'blue'];
    const size = 32;
    for(let y = 0; y < geom.height/size; y++) {
      for(let x = 0; x < geom.width/size; x++) {
        const color = colors[(x + y) % colors.length];
        ctx.beginPath();
        ctx.fillStyle = color;
        ctx.rect(x * size, y * size, size, size);
        ctx.fill();
      }
    }
  }
}

// Register our class under a specific name
registerPaint('checkerboard', CheckerboardPainter);

Load a PaintWorklet

The following example demonstrates loading the above worklet from its js file and does so by feature detection.

<script>
  if ('paintWorklet' in CSS) {
    CSS.paintWorklet.addModule('checkerboard.js');
  }
</script>

Use a PaintWorklet

This example shows how to use a PaintWorklet in a stylesheet, including the simplest way to provide a fallback if PaintWorklet isn't supported. 

<style>
  textarea {
    background-image: url(checkerboard);
    background-image: paint(checkerboard);
  }
</style>
<textarea></textarea>

You can also use the @supports at-rule.

@supports (background: paint(id)) {
  background-image: paint(checkerboard);
}

Specifications

Specification Status Comment
CSS Painting API Level 1The definition of 'PaintWorkletGlobalScope' in that specification. Working Draft Initial definition.

Browser compatibility

Update compatibility data on GitHub

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
PaintWorkletGlobalScope Chrome

Full support 65

Edge

Full support ≤79

Firefox

?

IE

No support No

Opera

?

Safari

?

WebView Android

Full support 65

Chrome Android

Full support 65

Firefox Android

?

Opera Android

?

Safari iOS

?

Samsung Internet Android

Full support 9.0

devicePixelRatio Chrome

Full support 65

Edge

Full support ≤79

Firefox

?

IE

No support No

Opera

?

Safari

?

WebView Android

Full support 65

Chrome Android

Full support 65

Firefox Android

?

Opera Android

?

Safari iOS

?

Samsung Internet Android

Full support 9.0

registerPaint Chrome

Full support 65

Edge

Full support ≤79

Firefox

?

IE

No support No

Opera

?

Safari

?

WebView Android

Full support 65

Chrome Android

Full support 65

Firefox Android

?

Opera Android

?

Safari iOS

?

Samsung Internet Android

Full support 9.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown


See Also