HTML-in-Canvas dans Chrome 157 : DOM interactif dans 2D, WebGL et WebGPU

Natalia Markoborodova

Publié le 26 octobre 2026

Après un essai Origin Trial réussi, Chrome 157 marque la sortie stable officielle de l'API HTML-in-Canvas. L'API HTML-in-Canvas comble l'écart entre le monde interactif et accessible du DOM et le contrôle hautes performances au niveau des pixels de <canvas>. Cette API vous offre le meilleur des deux mondes : des fonctionnalités de navigateur riches et des graphismes de canevas accélérés par GPU.

Le dilemme entre Canvas et DOM

Auparavant, lorsque vous créiez des applications Web visuellement exigeantes, vous deviez choisir entre des éléments HTML standards et des contextes de canevas bruts.

Avant HTML-in-Canvas

Avant cette API, si vous créiez des interfaces utilisateur utilisant beaucoup de canevas, vous deviez choisir entre deux approches, chacune présentant ses propres inconvénients :

1. Affichage du texte directement sous forme de pixels de canevas (fillText()) : les applications dessinaient le texte et les commandes d'interface utilisateur de manière impérative sous forme de pixels bruts. Cette approche a entraîné les inconvénients suivants :
   • Problème d'accessibilité : les lecteurs d'écran et les outils d'assistance ne peuvent pas lire les pixels du canevas, sauf si vous créez et synchronisez manuellement un DOM de remplacement invisible.
   • Perte de fonctionnalités du navigateur : les utilisateurs ne peuvent pas effectuer de recherche avec la fonctionnalité "Rechercher sur la page" (Ctrl/Cmd+F), copier et coller du texte naturellement, déclencher des menus contextuels, ni utiliser la traduction et le correcteur orthographique du navigateur.
   • Moteurs de typographie complexes : la prise en charge de l'internationalisation nécessite de regrouper de grands moteurs de mise en page JavaScript.
2. Superpositions HTML flottantes au-dessus du canevas : par exemple, en utilisant des bibliothèques qui positionnent des éléments HTML standards sur le canevas en calculant les cadres de délimitation et les transformations matricielles en JavaScript. Les inconvénients de cette approche sont les suivants :
   • Décalage de synchronisation et déchirement visuel : le défilement, le zoom ou les mouvements de caméra en 3D peuvent entraîner un décalage ou un tremblement des éléments DOM de superposition par rapport aux pixels du canevas en raison de différences de temps de rendu.
   • Limites de découpage et d'ordre Z : les superpositions HTML se trouvent toujours au-dessus de l'intégralité du tampon du canevas. Il n'était pas possible d'intégrer du code HTML dans une scène 3D (par exemple, derrière un objet 3D, dans un matériau en verre ou reflété dans un miroir) sans recourir à des solutions complexes de conversion d'iframe en image.
   • Surcharge de performances : pour que les superpositions restent alignées avec le canevas, vous devez recalculer la transformation de chaque superposition en JavaScript et l'écrire dans style.transform sur chaque frame. Le navigateur analyse ensuite chaque chaîne et recalcule le style de l'élément avant de pouvoir afficher le frame. Le travail du thread principal augmente donc avec chaque superposition que vous ajoutez. Dans un contexte 2D, drawElementImage() met à jour la position de l'élément pour vous. Dans WebGL et WebGPU, vous transmettez la transformation que vous calculez à updateElementGeometry() sous forme de matrice. Dans les deux cas, le navigateur n'analyse pas le CSS ni ne recalcule les styles.

Principaux avantages du HTML dans Canvas

HTML-in-Canvas élimine ces compromis. En plaçant du code HTML dans l'élément <canvas>, le contenu reste interactif et toutes les intégrations de navigateur fonctionnent automatiquement.

Le contenu HTML affiché dans un <canvas> dispose des mêmes fonctionnalités que le code HTML en dehors de <canvas> :

• Mise en page et mise en forme du texte : prise en charge de la mise en page et de la mise en forme du texte, y compris du texte multiligne ou bidirectionnel avec des styles CSS appliqués.
• Commandes de formulaire : commandes de formulaire expressives avec de nombreuses options de personnalisation CSS et de nuanceur.
• Sélection de texte, copier-coller et clic droit : les utilisateurs peuvent mettre en surbrillance du texte dans des scènes 3D ou déclencher des menus contextuels.
• Accessibilité : le contenu HTML affiché dans le canevas est exposé à l'arborescence d'accessibilité pour les lecteurs d'écran.
• Intégration des fonctionnalités du navigateur : les fonctionnalités du navigateur telles que la traduction, la saisie automatique et la recherche sur la page fonctionnent d'emblée. Les utilisateurs peuvent traduire ou rechercher du texte dans les textures WebGL et WebGPU.
• Intégration d'extensions : les extensions de navigateur fonctionnent sur le contenu. Par exemple, une extension de remplacement de texte met automatiquement à jour le texte affiché sur vos maillages 3D.
• Intégration des outils pour les développeurs : inspectez et ajustez les styles CSS des éléments d'interface utilisateur du canevas directement dans les outils pour les développeurs Chrome.
• Indexabilité et agents IA : les robots d'exploration et les agents IA peuvent indexer le contenu DOM affiché dans des scènes 2D et 3D.
• Modification et exportation de contenus multimédias : exportez des composites de canevas complets contenant des éléments DOM actifs directement vers des images (toDataURL(), toBlob()) ou des flux vidéo (captureStream()).

Cas d'utilisation principaux

HTML-in-Canvas offre des fonctionnalités dans plusieurs domaines :

• Applications volumineuses basées sur un canevas : les applications Web lourdes peuvent afficher des composants d'UI directement dans les espaces de travail de canevas, ce qui améliore l'accessibilité et réduit la taille du bundle.
• Scènes et jeux 3D : les expériences et jeux WebXR immersifs peuvent positionner des éléments DOM interactifs (comme des terminaux de jeu ou des livres 3D lisibles) directement dans les scènes.
• Édition et exportation de contenus multimédias : les outils de création combinant une typographie HTML riche et des effets de nuanceur peuvent exporter des scènes composites directement dans des images ou des flux vidéo.
• Interfaces utilisateur expressives : vous pouvez manipuler le contenu HTML sous forme de pixels bruts pour créer des effets visuels basés sur des nuanceurs.

Guide de démarrage rapide pour HTML dans Canvas

Pour afficher du code HTML dans un canevas, procédez comme suit :

1. Préparez votre canevas. Définissez de manière déclarative les attributs appropriés pour indiquer au navigateur qu'il doit afficher du code HTML dans un canevas. Cette configuration est identique pour les contextes 2D, WebGL et WebGPU. Découvrez comment configurer votre canevas et comment déclarer des éléments HTML à dessiner indépendamment.

   <!-- Prepare your canvas by setting the `content` attribute -->
   <canvas id="canvas" width="600" height="400" content="drawable">
     <!-- Mark child as `drawable` to render to canvas -->
     <div id="myElement" drawable>
       <!-- Your HTML here -->
     </div>
   </canvas>
   

2. Dessinez l'image de l'élément dans le canevas. L'implémentation exacte dépend du rendu HTML dans un contexte 2D, WebGL ou WebGPU.

   const ctx = canvas.getContext("2d");
   // Draw HTML element into canvas in 2D
   ctx.drawElementImage(myElement, myElementX, myElementY);
   

3. Facultatif : Synchronisez le DOM et les pixels. La synchronisation de la géométrie dépend également du contexte que vous utilisez. En 2D, le navigateur gère cela automatiquement par défaut, tandis que dans les contextes 3D, vous devez créer une transformation et la transmettre à la méthode updateElementGeometry.

   // In 3D, construct a transform as needed, for example:
   const transform = new DOMMatrix().translate(x, y);
   // Synchronize the element's DOM and pixels
   canvas.updateElementGeometry(myElement, { canvasTransform: transform });
   

Compatibilité avec les frameworks et l'écosystème

Les principales bibliothèques graphiques WebGL et 3D sont compatibles avec HTML-in-Canvas :

• Three.js : offre une compatibilité expérimentale avec THREE.HTMLTexture.

  const material = new THREE.MeshBasicMaterial();
  material.map = new THREE.HTMLTexture(uiElement);
  const mesh = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), material);
  scene.add(mesh);
  

• PlayCanvas : compatible avec le streaming de textures HTML à l'aide de setSource().

  canvas.addEventListener('paint', () => {
    htmlTexture.setSource(htmlElement);
  }, { once: true });
  

• Babylon.js : fournit une liaison intégrée via BABYLON.HtmlTexture.

  const htmlTexture = new BABYLON.HtmlTexture("htmlTexture", uiElement, scene);
  material.diffuseTexture = htmlTexture;
  

• PixiJS : compatibilité intégrée dans la version v8.19.0 avec HTMLSource.

  import { HTMLSource } from 'pixi.js/html-source';
  const sprite = Sprite.from(new HTMLSource({ resource: form, autoUpdate: true }));
  app.stage.addChild(sprite);
  

• CanvasUI : bibliothèque de composants Open Source conçue spécifiquement pour HTML-in-Canvas.

Pour en savoir plus sur l'implémentation, consultez la documentation de chaque framework.

Détection des fonctionnalités et stratégies de remplacement

Pour assurer la compatibilité entre les navigateurs, vérifiez la compatibilité de l'API avant d'exécuter votre code :

export function supportsHtmlInCanvas() {
  if (typeof document === "undefined") return false;
  const canvas = document.createElement("canvas");
  canvas.setAttribute("content", "drawable");
  return canvas.content === "drawable";
}

Si l'API n'est pas disponible, vous pouvez utiliser d'autres interfaces utilisateur, des superpositions HTML flottantes ou l'une des bibliothèques disponibles (par exemple, three-html-render, html2canvas ou dom-to-image).

Étapes suivantes

• Consultez la documentation complète sur HTML-in-Canvas de Chrome pour les développeurs.
• Améliorez l'assistance au codage à l'aide de Modern Web Guidance.
• Envoyez vos commentaires sur le dépôt GitHub du WICG.
• Consultez les démonstrations de la communauté sur l'intégration de code HTML dans Canvas.