Experimental web platform research

HTML-in-Canvas Lab

Small, focused tests for rendering live DOM through Canvas 2D—and finding the edges of the emerging API.

001Nested effectsCurrent experiment
002Coming nextAnother boundary test

Experiment 001

Nested canvas effects

Three HTML-in-Canvas layers, with independently routed post-processing at every boundary.

Checking browser…
Effect routing
Outer Middle Inner
Layer 1 · psychedelic color separation

The outer canvas colors everything beneath it.

If the inner layers split into shifting colors, their pixels crossed this boundary.

Layer 2 · cursor fisheye

Move your pointer across this card.

The lens should bend the already-pixelated canvas below it.

Layer 3 · pixelation

0 clicks survived the trip.

Checking interaction mode…
  1. Outer: animated RGB split
  2. Middle: pointer fisheye
  3. Inner: chunky pixelation

The demo paints from the deepest canvas outward. If the fisheye bends chunky pixels and the outer layer color-separates the result, effects are crossing both recursive canvas boundaries.

Observed October 23, 2026

Findings

Works

Effects survive nesting

Pixelation, localized distortion, and animated color processing compose across three nested Canvas 2D boundaries. Each parent captures the processed bitmap produced by its child.

Likely bug

DOM clicks stop working

Once HTML-in-Canvas is active, the deepest real DOM button renders but does not receive pointer clicks through the ancestor canvases. The ordinary-DOM fallback remains interactive.

Interpretation

Painting and hit-testing diverge

Recursive bitmap composition appears functional, while hit-test geometry is not propagated through the same nested canvas chain. This looks like an implementation bug or an unimplemented edge of the experimental API.

Tested with the experimental HTML-in-Canvas implementation enabled in Chromium. The API is under active development; behavior may change.