Overview
Introduction to standard HTML-in-Canvas specifications and visual rendering pipelines.
What is HTML-in-Canvas?
Historically, web applications had to make an trade-off: use standard DOM structures for accessibility, semantic forms, and searchability, or choose Canvas (WebGL/WebGPU) for massive low-level GPU hardware acceleration.
The native HTML-in-Canvas API bridges this division. By binding markup nodes directly under the <canvas> element tree, the layout engine draws standard elements directly to GPU draw cycles while keeping keyboard focus, text selections, search findability, and screen reader layers working natively.
Key Capabilities
Pure Accessibility
Nested subtrees within the canvas are exposed directly to the browser accessibility tree (AOM) natively.
Find-in-Page Search
Standard browser search (`Cmd/Ctrl + F`) highlights text instances directly inside GPU canvas layouts.
Direct DevTools Inspect
Inspect, modify, and adjust styles inside nested canvas element subtrees straight from Chrome DevTools.
Ready to get started?
Move on to our Quick Start guide to set up the layoutsubtree context in your local project workspace.