HTML-in-Canvas

The HTML-in-Canvas API (drawElementImage) lets you capture live, rendered DOM elements directly into a canvas at GPU speed. This means you can take any HTML — dashboards, forms, landing pages, app UIs — and render them as textures in WebGL scenes with shaders, 3D transformations, and post-processing effects.

Chrome flag required. The drawElementImage API is experimental and must be enabled manually:

Open chrome://flags/#canvas-draw-element in Chrome or Brave
Set CanvasDrawElement to Enabled
Restart the browser

HyperFrames enables this flag automatically during rendering (--enable-features=CanvasDrawElement), so rendered videos work without manual setup. The flag is only needed for live preview in the Studio.

How it works

Place HTML content inside a <canvas layoutsubtree> element
The browser renders the HTML children as normal DOM
Call ctx.drawElementImage(element, x, y, w, h) to capture the rendered pixels into the canvas
Use the canvas as a Three.js texture, apply shaders, map to 3D geometry

<!-- 1. HTML content lives inside the canvas -->
<canvas id="capture" layoutsubtree width="1920" height="1080">
  <div class="my-dashboard">
    <h1>Revenue: $4.2M</h1>
    <div class="chart">...</div>
  </div>
</canvas>

<!-- 2. WebGL canvas for 3D rendering -->
<canvas id="theater" width="1920" height="1080"></canvas>

// 3. Capture HTML to canvas
var capCanvas = document.getElementById("capture");
var ctx = capCanvas.getContext("2d");
ctx.drawElementImage(capCanvas.querySelector(".my-dashboard"), 0, 0, 1920, 1080);

// 4. Use as Three.js texture
var texture = new THREE.CanvasTexture(capCanvas);
var material = new THREE.MeshBasicMaterial({ map: texture });

What makes this different

Traditional approaches like html2canvas re-parse and re-render the DOM in JavaScript — they’re slow, lossy, and miss CSS features like backdrop-filter, complex shadows, and web fonts. The drawElementImage API uses the browser’s own compositor, so:

Pixel-perfect — every CSS feature is supported because the browser renders it natively
GPU-accelerated — captures at 60fps, fast enough for real-time animation
Live content — the HTML can animate, scroll, and change between captures
Multiple captures simultaneously — no nesting restrictions, multiple <canvas layoutsubtree> elements can capture different content in the same composition

Feature detection

Always feature-detect before using the API. Compositions should fall back gracefully for browsers without the flag enabled.

function isSupported() {
  var tc = document.createElement("canvas");
  if (!("layoutSubtree" in tc)) return false;
  tc.setAttribute("layoutsubtree", "");
  var ctx = tc.getContext("2d");
  return ctx && typeof ctx.drawElementImage === "function";
}

if (isSupported()) {
  ctx.drawElementImage(element, 0, 0, w, h);
} else {
  // Fallback: draw text directly on canvas, use static image, etc.
}

Re-capturing every frame

For animated content (scrolling, transitions, counters), call drawElementImage inside your render loop to update the texture every frame:

function render() {
  // Update HTML state
  scrollContainer.style.transform = "translateY(-" + scrollOffset + "px)";
  counterEl.textContent = Math.round(currentValue);

  // Re-capture
  ctx.clearRect(0, 0, W, H);
  ctx.drawElementImage(htmlElement, 0, 0, W, H);
  texture.needsUpdate = true;

  // Render 3D scene with updated texture
  renderer.render(scene, camera);
}

Catalog blocks

Install all HTML-in-Canvas blocks at once:

npx hyperframes add html-in-canvas

Or install individually:

Block	Description	Install
iOS 26 Liquid Glass Home Screen	iPhone home screen with live Liquid Glass notifications and widgets	`npx hyperframes add ios26-liquid-glass`
macOS Tahoe Liquid Glass Desktop	MacBook desktop with liquid glass windows, dock, and notifications	`npx hyperframes add macos-tahoe-liquid-glass`
Liquid Glass Notification	Native-feeling glass notification stack with progress and reply states	`npx hyperframes add liquid-glass-notification`
iPhone & MacBook	Real 3D GLTF devices with live HTML screens	`npx hyperframes add vfx-iphone-device`
Text Cursor	Dramatic text reveal with chromatic shadows	`npx hyperframes add vfx-text-cursor`
Portal	Dimension breach with volumetric light	`npx hyperframes add vfx-portal`
Shatter	HTML shatters into glass fragments	`npx hyperframes add vfx-shatter`
Magnetic	Magnetic field particle visualization	`npx hyperframes add vfx-magnetic`
Liquid Background	Organic liquid simulation	`npx hyperframes add vfx-liquid-background`

Rendering

HyperFrames enables the Chrome flag automatically during rendering. No special configuration needed:

npx hyperframes render --output my-video.mp4

For Docker renders, the flag is also enabled automatically inside the container.

​HTML-in-Canvas

​How it works

​What makes this different

​Feature detection

​Re-capturing every frame

​Catalog blocks

​Rendering