CSS Paint Function Basic

<!DOCTYPE html>
<title>My Example</title>

<style>
  .paint-box {
    /* Fallback for browsers that do not support the Paint API */
    background-color: #eee;
    
    /* Call the custom paint worklet registered in the JavaScript below */
    background-image: paint(checkerboard);
    
    width: 100%;
    max-width: 400px;
    height: 200px;
    border: 2px solid #333;
  }
  
  .warning-msg {
    font-family: sans-serif;
    font-size: 0.9em;
    color: #d9534f;
    margin-top: 10px;
  }
</style>

<div class="paint-box"></div>

<div class="warning-msg">
  <em>Note: If you only see a solid gray box, your browser does not currently support the CSS Painting API. Try viewing this in Chrome or Edge.</em>
</div>

<script>
  // Check if the browser supports the CSS Paint API
  if ('paintWorklet' in CSS) {
    // We use a Blob here to create a self-contained example without needing an external JS file.
    // In a real project, you would use: CSS.paintWorklet.addModule('checkerboard.js');
    const workletCode = `
      registerPaint('checkerboard', class {
        paint(ctx, geom, properties) {
          const size = 20; // Size of each square
          
          for (let y = 0; y < geom.height / size; y++) {
            for (let x = 0; x < geom.width / size; x++) {
              // Alternate colors based on grid position
              const color = (x + y) % 2 === 0 ? '#ddd' : '#fff';
              ctx.fillStyle = color;
              ctx.fillRect(x * size, y * size, size, size);
            }
          }
        }
      });
    `;
    
    const blob = new Blob([workletCode], { type: 'application/javascript' });
    CSS.paintWorklet.addModule(URL.createObjectURL(blob));
  }
</script>