CSS Houdini Paint Worklets draw custom backgrounds using a Canvas-like API inside CSS. Register with CSS.paintWorklet.addModule() and use with background: paint(my-painter). An advanced browser extensibility feature.
CSS Houdini (Worklets)
// Register a paint worklet
CSS.paintWorklet.addModule("checker.js");
// checker.js
registerPaint("checker", class {
paint(ctx, size) {
const cellSize = 20;
for (let y = 0; y < size.height; y += cellSize) {
for (let x = 0; x < size.width; x += cellSize) {
ctx.fillStyle = (x + y) % (cellSize*2) ? "#000" : "#fff";
ctx.fillRect(x, y, cellSize, cellSize);
}
}
}
});
// CSS
.element { background: paint(checker); }