<div class="worklet-canvas"></div>
<script>
  CSS.paintWorklet.addModule('https://codepen.io/georgedoescode/pen/rNmVKzY.js');
</script>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: grid;
  place-items: center;
}

.worklet-canvas {
  width: 75vmin;
  height: 75vmin;
  background-image: paint(testWorklet);
  resize: both;
  overflow: auto;
}

class TestWorklet {
  paint(ctx, geometry) {
    const hue = Math.random() * 360;

    ctx.fillStyle = `hsl(${hue}, 75%, 50%)`;
    ctx.fillRect(0, 0, geometry.width, geometry.height);
  }
}

if (typeof registerPaint !== "undefined") {
  registerPaint("testWorklet", TestWorklet);
}