WICG Specification

Render HTML into Canvas — natively

Q: Can I use HTML inside a canvas element?

Historically, no — is a bitmap drawing surface, and any HTML placed inside it is treated as invisible fallback content. The WICG HTML-in-Canvas proposal changes that: its drawElementImage() method renders live DOM elements directly into 2D, WebGL, and WebGPU canvases, available today behind a Chrome flag. See it in action in the hello-world demo.

Q: How do I put HTML inside a canvas today?

You have two options: enable the flag-gated native API (chrome://flags/#canvas-draw-element in Chrome Canary or Brave) and draw elements with drawElementImage(), or use a screenshot-style library like html2canvas that re-implements rendering in JavaScript. See the render HTML to canvas comparison for code and trade-offs, and the browser support guide for flag setup.

The spec adds three primitives that draw fully-styled, accessible HTML straight into <canvas> — no html2canvas, no screenshots, no libraries.

Chrome Canary or Brave Stable
Flag is dev-only
No install

Explore Demos Read the Spec

Enable the flag (30 seconds)

Works in Chrome Canary and Brave Stable (Chromium 147+). No install if you already have one of these.

Paste this URL into your address bar

Chrome blocks direct links to chrome:// pages for security, so copy-paste is required. Brave users: brave:// also works.
Set Enable the new drawElement API for Canvas to Enabled
Relaunch the browser
Hit Relaunch at the bottom of the flags page, then reload this site.

Three Primitives, One New Superpower

The spec introduces a minimal, composable API surface — each piece solves a distinct problem.

`layoutsubtree`

Add this attribute to a <canvas> to opt its children into layout and hit testing — they behave like normal DOM elements but remain invisible until drawn.

<canvas layoutsubtree>
  <div id="content">
    Laid out, accessible,
    ready to draw.
  </div>
</canvas>

`drawElementImage()`

Draws a child element into the canvas with the current transform applied. Works across 2D, WebGL, and WebGPU contexts.

const t = ctx.drawElementImage(
  element, x, y
);
// Sync DOM position
element.style.transform =
  t.toString();

`paint` event

Fires whenever a child element's rendering changes — clear the canvas and redraw in one efficient callback, once per frame.

canvas.onpaint = (e) => {
  ctx.reset();
  for (const el of e.changedElements) {
    ctx.drawElementImage(el, 0, 0);
  }
};

Why This Matters

Accessibility built in

Drawn elements are the fallback content — the accessibility tree always matches what's on screen.

Real CSS rendering

Fonts, ligatures, RTL, subpixel rendering — the browser does the hard work, not a polyfill.

No hacks required

Replace html2canvas-style workarounds with a native API that's fast, correct, and privacy-preserving.

2D, WebGL & WebGPU

One API surface that works across all three canvas contexts — render HTML as 3D textures, apply shaders, and more.

Featured Demos

View all demos

A sample of the gallery — browse all 18 interactive HTML canvas examples, complete and forkable, across 2D, WebGL, and WebGPU contexts.

Featured WebGPU Intermediate

vgpu WebGPU Shader on Live HTML

Shade live HTML with Vercel vgpu: drawElementImage paints a real DOM card into canvas, a WebGPU foil shader warps it on hover, and the same pass snapshots for OG images via vgpu/node. An HTML-in-Canvas demo by En Dash.

featuredvgpuvercelwebgpuhtml-in-canvasdrawElementImagecanvasshaderwgslholographicog-imageendash

WebGL Intermediate

Elastic Bulge

Mouse-driven elastic displacement effect: a WebGL2 shader warps laid-out HTML content with a radial bulge and soft drop-shadow that follow the pointer.

webglshaderdisplacementinteractivevisual

WebGL Advanced

3D Room with Live Web Content

A Three.js first-person 3D room where live HTML elements are rendered as textures on surfaces — a monitor dashboard, a styled poster, and a TV playing CSS animations.

demowebglthree-js3dinteractivedom-rendering

2D Intermediate

Accessible Charts

Bar and pie charts with real HTML labels, ARIA roles, keyboard navigation, and hand-drawn focus rings.

accessibilitychartsariakeyboard-navigation

WebGL Advanced

CSS-to-Shader Pipeline

Pick a source (live form, article, or CSS-painted scene) and a fragment shader (CRT, chromatic, halftone, ASCII, and more). The DOM lives under the shader — type, Tab, and hover all still work.

webglshadereditorcreative-toolglsleffects

2D Advanced

Frosted Glass Backdrop

Draggable frosted glass panel with custom gaussian, directional, and tilt-shift blur effects composited between HTML rendering layers.

demo2dblurcompositingvisualinteractive

Get Started

The HTML-in-Canvas API is available today in Chrome Canary and Brave Stable (Chromium 147+) behind the canvas-draw-element flag. Enable it, open a demo, and start experimenting.

Browser Setup Guide Try Your First Demo

Coming from html2canvas? See how to render HTML to canvas with the native API — comparison, code, and migration notes.

Track the spec at github.com/WICG/html-in-canvas

Frequently Asked Questions

Can I use HTML inside a canvas element?

Historically, no — <canvas> is a bitmap drawing surface, and any HTML placed inside it is treated as invisible fallback content. The WICG HTML-in-Canvas proposal changes that: its drawElementImage() method renders live DOM elements directly into 2D, WebGL, and WebGPU canvases, available today behind a Chrome flag. See it in action in the hello-world demo.

How do I put HTML inside a canvas today?

You have two options: enable the flag-gated native API (chrome://flags/#canvas-draw-element in Chrome Canary or Brave) and draw elements with drawElementImage(), or use a screenshot-style library like html2canvas that re-implements rendering in JavaScript. See the render HTML to canvas comparison for code and trade-offs, and the browser support guide for flag setup.