How do you make a CSS background a Javascript Canvas?

Question

I found another stack overflow post on this topic where the answer included using: document.getCSSCanvasContext and WebKit to interact with the canvas serving as the CSS background, but that function is depreciated. How else could you make a CSS background a canvas?

Here's the code from the other answer that doesn't work anymore:

<html>
 <head>
 <style>
 div { background: -webkit-canvas(squares); width:600px; height:600px; border:2px solid black }
 </style>

 <script type="application/x-javascript">
function draw(w, h) {
 var ctx = document.getCSSCanvasContext("2d", "squares", w, h);

 ctx.fillStyle = "rgb(200,0,0)";
 ctx.fillRect (10, 10, 55, 50);

 ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
 ctx.fillRect (30, 30, 55, 50);
}
 </script>
 </head>
 <body onload="draw(300, 300)">
   <div></div>
 </body>

</html>

score 2 · Accepted Answer · answered May 23 '20 at 02:27

There's a new(ish) API called CSS Houdini that allows you to do exactly what you wanted: https://developer.mozilla.org/en-US/docs/Web/API/PaintWorklet. It's browser support is still super minimal (chromium only currently). There is a pollyfill that should help expand support if needed.

Here's an overview of houdini

There's also an answer with this in the previous stack overflow answers: use canvas as a css background. The links from that answer are incredibly helpful. Especially (two links down) https://twitter.com/DasSurma/status/983305990731894785, which gave an example of how to get the API to work without importing a separate file.

if ("paintWorklet" in CSS) {
  const src = document.querySelector('script[language$="paint"]').innerHTML;
  const blob = new Blob([src], {
    type: 'text/javascript'
  });
  CSS.paintWorklet.addModule(URL.createObjectURL(blob));
}

.squares {
  background-image: paint(squares);
  width: 200px;
  height: 200px;
  border: 2px solid black;
}

.checkboxes {
  background-image: paint(checkerboard);
  width: 200px;
  height: 200px;
  border: 2px solid black;
  --checkerboard-spacing: 10;
  --checkerboard-size: 32;
}

<div style="display:flex;">
  <div class="squares">
  </div>
  <div class="checkboxes">
  </div>
</div>
<script language="javascript+paint">
  class SquaresPainter {
    paint(ctx, gemetry, properties) {
      ctx.fillStyle = 'rgb(200,0,0)';
      ctx.fillRect(10, 10, 55, 50);

      ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
      ctx.fillRect(30, 30, 55, 50);
    }
  }
  registerPaint('squares', SquaresPainter);
  // checkerboard.js from https://developers.google.com/web/updates/2018/01/paintapi
  class CheckerboardPainter {
    // inputProperties returns a list of CSS properties that this paint function gets access to
    static get inputProperties() {
      return ['--checkerboard-spacing', '--checkerboard-size'];
    }

    paint(ctx, geom, properties) {
      // Paint worklet uses CSS Typed OM to model the input values.
      // As of now, they are mostly wrappers around strings,
      // but will be augmented to hold more accessible data over time.
      const size = parseInt(properties.get('--checkerboard-size').toString());
      const spacing = parseInt(
        properties.get('--checkerboard-spacing').toString()
      );
      const colors = ['red', 'green', 'blue'];
      for (let y = 0; y < geom.height / size; y++) {
        for (let x = 0; x < geom.width / size; x++) {
          ctx.fillStyle = colors[(x + y) % colors.length];
          ctx.beginPath();
          ctx.rect(x * (size + spacing), y * (size + spacing), size, size);
          ctx.fill();
        }
      }
    }
  }
  registerPaint('checkerboard', CheckerboardPainter);
</script>

Just a note: Houdini is the Working Group's name. They are responsible for the development of a lot of different APIs. The one API in use here is the PaintWorklet API. — Kaiido, May 24 '20 at 02:30

How do you make a CSS background a Javascript Canvas?

1 Answers1

Linked