HTML-in-Canvas API Reaches Stable: Canvas Gains Full DOM Semantics After 10 Years

Canvas Has Been a Semantic Black Hole

Canvas is fast, but it tells nothing to anyone. Text painted inside cannot be selected, Ctrl+F cannot find it, screen readers cannot read it, and the Tab key cannot focus into it. For a pure pixel drawing surface this is reasonable — it is a canvas, not a document.

Over the past ten years, more and more interfaces moved into canvas: maps, online design tools, data dashboards, and operation panels inside 3D scenes. Users in these interfaces expect the same capabilities as on the web: selectable, searchable, keyboard-navigable.

Two Workarounds Have Been Used

To restore semantics, the industry relied on two patches:

// Option 1: screenshot first, then paste
const bitmap = await html2canvas(node)
ctx.drawImage(bitmap, 0, 0)

// Option 2: real DOM sits on top of canvas, transparent overlay
// position: absolute; opacity: 0; manually sync scroll and coordinates

// Now: DOM draws directly into canvas, no longer via bitmap
// Exact method names per stable documentation

The first loses semantics; the second loses sync — scroll, zoom, and animation require aligning two coordinate systems every frame, and drift appears as soon as complexity grows. Both approaches also demand maintaining two sets of state; a single UI change requires edits in two places.

Three Major Libraries Already Support It

Three.js, Babylon.js, and PixiJS have all added support. These libraries operate in 3D rendering, but users still need buttons, input fields, and lists inside those scenes. The old method converted DOM to textures mapped onto planes — text blurred on zoom, click positions required manual ray-casting, and input method editors barely worked.

Now those interfaces can be real DOM, composited by the GPU while remaining selectable and readable by assistive technology.

For the past ten years, canvas's performance advantage came from sacrificing semantics. This API restores semantic capabilities without giving up the rendering power.