HTML-in-Canvas : proposition d’une nouvelle API pour rendre du contenu HTML directement dans le canvas

(github.com/WICG)

6 points par GN⁺ 2025-08-07 | Aucun commentaire pour le moment. | Partager sur WhatsApp

HTML-in-Canvas est un projet WICG qui propose une nouvelle API standard permettant de dessiner directement des éléments/contenus HTML à l'intérieur de l'élément <canvas> sur le Web.
Né pour résoudre les problèmes de mise en page de texte complexe, d'accessibilité, d'internationalisation, ainsi que de qualité/performance, il permet d'utiliser directement le style HTML dans divers cas d'utilisation de Canvas comme les graphiques, l'UI ou les menus de jeux.
Grâce à de nouvelles méthodes comme drawElement, texElement2D, setHitTestRegions, il devient possible de rendre et de texturer directement des éléments HTML dans un contexte Canvas 2D ou WebGL.
Les zones d’interaction, l’amélioration de l’accessibilité, l’UI 2D dans des scènes 3D, les mises en page basées sur CSS/HTML… intègrent des besoins concrets des développeurs web.
Disponible via un flag expérimental dans Chrome Canary (138.0.7175.0 ou supérieur), avec les retours et rapports de bugs bienvenus.

Vue d'ensemble et enjeux

Propose une nouvelle API pour dessiner directement des éléments HTML dans <canvas>.
Auparavant, il n'y avait pas de méthode simple pour rendre facilement des mises en page complexes, du texte et des contenus basés sur HTML dans <canvas>, ce qui limitait l'accessibilité, l'internationalisation, la performance et la qualité.
HTML-in-Canvas répond à ce manque en prenant en charge le rendu HTML en Canvas 2D et WebGL, augmentant son applicabilité à des outils de graphiques, des boîtes de texte riche, des interfaces de jeu, etc.

Représentation dans le canvas de texte et de contenu de mise en page stylisé
- Exemples : légende de graphique, axes, zones d'éditeur de texte enrichi, menu de jeu, etc.
Amélioration de l’accessibilité
- Résout la discordance entre le contenu alternatif du canvas existant et le rendu réellement affiché.
- La nouvelle API permet de synchroniser les informations d'accessibilité.
Association de HTML et de shader WebGL
- Répond à la nécessité de combiner HTML avec des shaders WebGL standard au-delà des effets CSS filter.
Rendu HTML dans un contexte 3D
- Permet d'insérer du contenu 2D riche dans des zones 3D de jeux ou de sites web.

L'attribut <canvas layoutsubtree> active la mise en page des éléments HTML enfants du canvas (par défaut, il n'est visible que visuellement, non exposé aux algorithmes de navigation de l'UA).
CanvasRenderingContext2D.drawElement(element, x, y, options)
- Rend un élément HTML enfant du canvas à la position indiquée.
- options.allowReadback contrôle la prévention des fuites de données personnelles (application d'une politique de tainting prévue ensuite).
- Les paramètres dwidth et dheight permettent de redimensionner à la taille voulue.
WebGLRenderingContext.texElement2D(...)
- Dessine directement un élément HTML spécifié en texture WebGL pour un usage dans une scène 3D.
setHitTestRegions
- Associe les éléments dessinés sur une zone au hit test du canvas pour rediriger automatiquement les événements souris/toucher.
Option fireOnEveryPaint (ResizeObserver)
- Déclenche un rerendu en détectant automatiquement le bon moment lors des changements/repositionnements HTML pour redessiner le canvas.

Lors d'un appel à drawElement, la matrice de transformation du canvas (CTM) est prise en compte, et l'image est clipée uniquement dans la border box de l'élément.
L'image dessinée sur le canvas est statique (si l'élément change après le rendu, il faut rappeler drawElement).
Non pris en charge pour les canvas hors écran ou non présents dans le DOM (limitation technique).
Les éléments interactifs (boutons, formulaires, etc.) peuvent être dessinés, mais ne deviennent pas interactifs automatiquement.
Les iframes cross-origin, SVG foreignObject, etc. ne sont pas pris en charge.
Les questions d'accessibilité, de sécurité et de confidentialité (PII) restent en discussion.

Exemple de texte complexe : dessin direct sur le canvas de texte et boîtes HTML stylés avec une mise en page complexe via drawElement.
Exemple WebGL : création d'une texture WebGL à partir de contenu HTML avec texElement2D, puis mappage sur un cube 3D.
Exemple text-input : affichage de zones interactives pour les formulaires via setHitTestRegions et fireOnEveryPaint.

Activez via le flag de Chrome Canary --enable-blink-features=CanvasDrawElement.
Le contenu du canvas pouvant ne pas être tainted, il faut impérativement rester vigilant face aux risques de fuite d'informations personnelles.
L'API et son comportement évoluent en permanence, et les cas de tests HTML à grande échelle sont encore insuffisants.
Les retours sont bienvenus : signalez les questions de compatibilité, les cas d'échec de rendu et les problèmes d'accessibilité en créant une issue sur GitHub.

En chartes, dataviz, UI in-canvas, HUD/menus dans les jeux 3D, etc., cette API améliore la capacité d'expression et de productivité du web.
Là où la conversion HTML→Canvas (style, mise en page, support multilingue, accessibilité) était auparavant complexe, elle peut désormais être traitée directement via une API standard.
Attendue comme une technologie puissante pour les développeurs de graphismes, de jeux et d'applications web.