CSS Houdini – The Paint API

Houdini opens the browser for developer‑defined rendering.

• Paint API lets you draw with JavaScript directly onto an element’s background.

if ('paintWorklet' in CSS) {
  CSS.paintWorklet.addModule('bg-paint.js');
}

bg-paint.js

registerPaint('bg', class {
  static get inputProperties(){ return ['--color']; }
  paint(ctx, size, props){
    ctx.fillStyle = props.get('--color').toString();
    ctx.fillRect(0,0,size.width,size.height);
  }
});

---

Example usage

.box { background-image:paint(bg); --color:#ff6600; }