HTML-in-Canvas
This is a proposal for using 2D and 3D to customize the rendering of HTML content.<canvas>
Status
This is a living explainer which is continuously updated as we receive feedback.
The APIs described here are implemented behind a flag in Chromium and can be enabled with .chrome://flags/#canvas-draw-element
Motivation
There is no web API to easily render complex layouts of text and other content into a . As a result, -based content suffers in accessibility, internationalization, performance, and quality.<canvas><canvas>
Use cases
-
Styled, Laid Out Content in Canvas. There’s a strong need for better styled text support in Canvas. Examples include chart components (legend, axes, etc.), rich content boxes in creative tools, and in-game menus.
-
Accessibility Improvements. There is currently no guarantee that the canvas fallback content used for accessibility always matches the rendered content, and such fallback content can be hard to generate. With this API, elements drawn into the canvas will match their corresponding canvas fallback.
<canvas> -
Composing HTML Elements with Effects. A limited set of CSS effects, such as filters, backdrop-filter, and mix-blend-mode are already available, but there is a desire to use general WebGL shaders with HTML.
-
HTML Rendering in a 3D Context. 3D aspects of sites and games need to render rich 2D content into surfaces within a 3D scene.
-
Media Export. There’s a need to export HTML content as images or video.