Randy Llobera

If you spend enough time on LinkedIn, X, or YouTube, you'd think the only thing happening in software right now is AI. Meanwhile, browser engineers quietly keep shipping genuinely interesting stuff.

HTML in Canvas is one of those features.

The idea is simple: what if you could render actual HTML and CSS inside a canvas instead of drawing everything manually? Usually, developers building canvas-based applications recreate things the browser already knows how to do: layout, styling, text rendering, UI components, accessibility, and more.

HTML in Canvas flips that idea around as simple as this:

<canvas id="canvas" style="width: 400px; height: 200px;" layoutsubtree>
  <form id="form_element">
    <label for="name">name:</label>
    <input id="name">
  </form>
</canvas>

<script>
  const ctx = document.getElementById('canvas').getContext('2d');

  canvas.onpaint = () => {
    ctx.reset();
    const transform = ctx.drawElementImage(form_element, 100, 0);
    form_element.style.transform = transform.toString();
  };

  // Size the canvas grid to match the device scale factor to prevent blurriness.
  const observer = new ResizeObserver(([entry]) => {
    canvas.width = entry.devicePixelContentBoxSize[0].inlineSize;
    canvas.height = entry.devicePixelContentBoxSize[0].blockSize;
  });
  observer.observe(canvas, {box: 'device-pixel-content-box'});
</script>

<br>

It doesn't look revolutionary at all right? Well, at least the input field does look different...

Think of what that means. Instead of rebuilding layouts, text rendering, styling systems, and UI controls inside a canvas application, developers may be able to leverage the platform that already exists: games, editors, diagramming tools, visualizations, design software, and other graphics-heavy applications could potentially benefit from that.

Will it change how most websites are built? Probably not. But it's the kind of feature that makes me excited about the web. While everyone is focused on the next AI model release, browser vendors are still pushing the platform forward in ways that may shape the next decade of software. Sometimes the most interesting things in tech aren't the loudest ones.

By the way, don't forget to enable the HTML-in-Canvas flag in your browser if you want to try it out: chrome://flags/#canvas-draw-element

Check out these cool demos: https://html-in-canvas.dev/demos/

HTML in Canvas. Not Everything Interesting in Tech Is AI