HTML-in-Canvas is a web platform proposal that enables rendering of HTML content into 2D and 3D canvas elements.
The proposal addresses the lack of a web API for drawing complex, styled HTML layouts directly into canvas. Currently, developers must manually recreate text, layout, and styling within canvas, leading to accessibility, internationalization, and performance problems. The solution introduces five primitives: a canvas `content` attribute to opt into drawable mode, a `drawable` attribute on canvas descendants to enable drawing, layout and rendering capabilities, rendering events for DOM-to-canvas synchronization, and geometry update capabilities for canvas-to-DOM synchronization. Canvas descendants in drawable mode are laid out with static positioning and respect CSS and HTML accessibility primitives like aria-hidden, though they initially lack geometry information and hit testing support.
Developers working on chart components, creative tools, in-game menus, or 3D web experiences that need to render rich 2D content should evaluate this proposal. It directly addresses use cases involving styled text in canvas, accessibility maintenance without manual DOM synchronization, applying WebGL shaders to HTML elements, rendering HTML surfaces within 3D scenes, and exporting HTML as images or video. The proposal is currently implemented behind a flag in Chromium, allowing early experimentation.
The project receives issues from both core team members and external users, indicating real-world adoption interest without an overwhelming support burden. Maintainers typically respond to new issues and pull requests within a day.
