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
.
To avoid leaking visited links, this feature is currently disabled in Chrome-based browsers for <a>
elements with an href
attribute, and for children of such elements. For details, see the following:
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, inherited from the Worklet
interface loads the module in the given JavaScript file and adds it to the current PaintWorklet.
The following three examples go together to show creating, loading, and using 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) {
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 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>
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);
}