Introducing the HTML-in-Canvas API origin trial | Blog | Chrome for Developers

Skip to main content

English

Deutsch

Español – América Latina

Français

Indonesia

Italiano

Nederlands

Polski

Português – Brasil

Tiếng Việt

Türkçe

Русский

עברית

العربيّة

فارسی

हिंदी

বাংলা

ภาษาไทย

中文 – 简体

中文 – 繁體

日本語

한국어

Sign in

Blog

Chrome for Developers

Blog

Introducing the HTML-in-Canvas API origin trial

Stay organized with collections

Save and categorize content based on your preferences.

Thomas Nattestad

Natalia Markoborodova

GitHub

LinkedIn

Bluesky

For years, web developers have had to make a tough architectural choice when building complex, highly-interactive visual applications on the web: do you lean on the DOM for its rich semantic features, or do you render directly to the element for low-level graphics performance?

With the new experimental HTML-in-Canvas API —available now in origin trial—you don't have to choose. This API lets you draw DOM content directly into a 2D canvas or a WebGL/WebGPU texture while keeping the UI interactable, accessible, and hooked up to your favorite browser features. By combining HTML with low-level graphics processing, you can create experiences that were previously impossible.

The DOM versus Canvas

To understand the power of this new API, it helps to look at the relative strengths of both the DOM and the Canvas.

The DOM is the staple of web UI. It offers text layout solutions out of the box, using semantically understood content to create rich interfaces. This lets users perform common operations across web pages seamlessly—things we often take for granted, like highlighting text to copy, or right-clicking an image to save it. The DOM also integrates with essential browser features: accessibility tools, translate, find-in-page, reader mode, extensions, dark mode, browser zoom, and autofill.

Canvas (and WebGL/WebGPU), on the other hand, allows for low-level access to drive a grid of pixels for highly advanced 2D and 3D graphics. Games and complex web apps (like Google Docs or Figma) require this performant, low-level access. Because the canvas is fundamentally a grid of pixels, supporting features like responsive text used to require complex custom UI logic, drastically increasing your bundle size. Crucially, all the powerful browser features integrated into the DOM break completely when the UI is trapped inside a static canvas pixel grid.

The advantages of bringing the DOM to Canvas

The HTML-in-Canvas API is the bridge that gives you the best of both worlds. By placing HTML inside the element and synchronizing its transform, you ensure the content remains fully interactive, and that all browser integrations function automatically.

Here's what you get by letting the DOM handle your UI inside a element:

Text layout and formatting: Simplified text layout and formatting, including multiline or bidirectional text with CSS styles applied.

Form controls: Expressive and easier to use form controls with extensive customization options.

Text selection, copy/paste, and right-click: Users can highlight text inside your 3D scenes, or right-click context menus natively.

Text selection, copy/paste, and right-click: Users can highlight text inside your 3D scenes, or right-click context menus natively.

Accessibility: Content rendered inside the canvas is exposed to the accessibility tree. Accessibility systems can parse the UI as they do normal HTML, and expose it to systems like screen readers.

Find-in-page: Users can use find-in-page (Ctrl/Cmd+F) to search for text, and the browser will highlight it directly within your WebGL textures.

Find-in-page: Users can use find-in-page (Ctrl/Cmd+F) to search for text, and the browser will highlight it directly within your WebGL textures.

Indexability and AI agent interfaceable: Web crawlers and AI agents can seamlessly index and read the text rendered into your 2D and 3D scenes.

Extension integration: Browser extensions work natively. For example, a text-replacement extension will automatically update the text rendered on your 3D meshes.

DevTools integration: You can inspect your canvas content, including for WebGL/WebGPU UI elements directly in Chrome DevTools. Tweak a CSS style in the inspector, and watch it instantly update on the 3D texture!

High-level use cases

This API unlocks incredible potential across several domains:

Large canvas-based applications: Heavyweight web apps like Google Docs, Miro, or Figma can now render complex application UI components natively into their canvas-driven workspaces, improving accessibility and reducing bundle weight.

3D scenes and games: Marketing sites, immersive WebXR experiences, and web games can now place fully interactable web UI into 3D scenes—like a 3D book that uses real DOM text, or an in-game terminal that natively supports copying and pasting.

How to use the API

Using the API happens in three phases: Setting up your canvas, rendering into the canvas,...