PaintWorklet.registerPaint

Draft
This page is not complete.

The PaintWorklet.registerPaint() method of the PaintWorklet interface registers a class programmatically generate an image where a CSS property expects a file.

Syntax

registerPaint(name, class);

Parameters

name
The name of the worklet class to register.
class
A reference to the class that implements the worklet.

Return value

undefined

Exceptions

TypeError
Thrown when one of the arguments is invalid or missing.
InvalidModificationError
Thrown when the a worklet already exists with the specified name.

Examples

The following shows registering an example worklet module. This should be in a separate js file. Note that registerPaint() is called without a reference to PaintWorklet. The file itself is loaded through CSS.paintWorklet.addModule() (documented here on the parent class of PaintWorklet, at Worklet.addModule().

/* checkboardWorklet.js */

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);

The first step in using a paintworket is defining the paint worklet using the registerPaint() function, as done above. To use it, you register it with the CSS.paintWorklet.addModule() method:

<script>
   CSS.paintWorklet.addModule('checkboardWorklet.js');
</script>

You can then use the paint() CSS function in your CSS anywhere an <image> value is valid.

li { 
   background-image: paint(checkerboard); 
}

Specifications

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

Browser compatibility

No compatibility data found. Please contribute data for "api.PaintWorklet.registerPaint" (depth: 1) to the MDN compatibility data repository.

See Also