What problem are you trying to solve?

High-performance web applications rely on <canvas> for control over rendering that goes beyond standard HTML/CSS. However, by using <canvas>, they lose all the rich, built-in features of the web platform, including:

• Advanced formatting, such as styled multi-line text.
• Interactivity, such as forms, selection, and native scrolling.
• Accessibility.

This forces a bad trade-off: developers must either re-implement these fundamental browser features in JS, or simply not provide them, resulting in a sub-par, inaccessible user experience.

What solutions exist today?

• Canvas 2D Text APIs: fillText() and strokeText() are limited in that they only draw a single, un-wrapped line of text with a single style. They have no concept of layout, internationalization, or interactivity. WebGL provides no text rendering support at all.
• DOM Overlays: developers can overlay elements on top of the canvas. This is fragile and makes it impossible to compose HTML content with 2D or 3D canvas graphics (e.g., applying a WebGL shader to an HTML element).
• "Invisible DOM" for Accessibility: Apps build a duplicate, invisible DOM tree just for screen readers.

How would you solve it?

Add the ability to render elements from the canvas subtree directly into canvas, and add the ability to make this rendering interactive (forwarding input and handling updates). Adding these capabilities enables canvas surfaces to benefit from all of the styling, layout and behaviors of HTML/SVG.

Anything else?

This feature is being incubated in WICG following the WHATWG standards process.

Explainer: https://github.com/WICG/html-in-canvas
Ongoing prototyping in Chromium
Contributor: Google, Igalia
Workstream: HTML