Web/API/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 1The 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.