The registerPaint()
method of the PaintWorkletGlobalScope
interface registers a class to programmatically generate an image where a CSS property expects a file.
registerPaint(name, classRef)
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 PaintWorkletGlobalScope
. The file itself is loaded through CSS.paintWorklet.addModule()
(documented here on the parent class of PaintWorklet, at Worklet.addModule()
.
class CheckerboardPainter {
paint(ctx, geom, properties) {
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();
}
}
}
}
registerPaint("checkerboard", CheckerboardPainter);
The first step in using a paintworklet 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);
}