- Il permet le rendu direct des éléments DOM dans les contextes Canvas 2D, WebGL et WebGPU.
- Il conserve l'interactivité native, l'accessibilité pour les lecteurs d'écran et l'indexation par les moteurs de recherche.
- Elle élimine le besoin d'utiliser des bibliothèques de captures d'écran externes pour intégrer des interfaces Web dans des environnements graphiques complexes.
Pendant très longtemps, les développeurs web ont été contraints de choisir entre deux voies assez rigides pour créer des applications visuelles performantes. Soit on s'appuyait sur le DOM pour tirer parti de sa structure sémantique et de son accessibilité, soit on se lançait tête baissée dans l'élément canvas pour obtenir des performances brutes en graphisme bas niveau. En clair, il s'agissait de choisir entre simplicité structurelle et puissance visuelle , sans juste milieu.
C’est là qu’intervient l’API expérimentale HTML-in-Canvas, déjà disponible via les tests de code source. Cet outil est une véritable pépite car il permet de dessiner du contenu DOM directement sur un canevas 2D, voire sur des textures WebGL et WebGPU, avec un détail crucial : l’interface reste interactive et accessible . Plus besoin de choisir : nous pouvons désormais combiner le meilleur des deux mondes pour créer des expériences qui, jusqu’à récemment, étaient tout simplement impossibles à programmer.
L'éternel dilemme : DOM contre Canvas
Pour comprendre en quoi il s'agit d'un changement de paradigme, il est nécessaire d'examiner la contribution de chaque élément. Le DOM constitue le fondement du Web ; il fournit des solutions de mise en page de texte prêtes à l'emploi et permet aux utilisateurs d'effectuer des actions naturelles, comme sélectionner du texte à copier ou faire un clic droit sur une image pour l'enregistrer. De plus, il est parfaitement compatible avec les outils d'accessibilité, le mode lecture, les extensions de navigateur et le zoom.
En revanche, Canvas (et ses prédécesseurs WebGL et WebGPU) offre un contrôle total sur chaque pixel, essentiel pour les jeux ou les applications exigeantes comme Figma ou Google Docs. Le problème est que, étant essentiellement une grille de pixels, tout ce qu'on y place reste figé dans une image statique . Pour obtenir du texte adaptatif, il fallait donc reprogrammer toute la logique, ce qui augmentait considérablement la taille du code et rendait inutilisables toutes les fonctionnalités natives du navigateur.
Qu'est-ce qu'on y gagne à intégrer le DOM dans le Canvas ?
L'API HTML-in-Canvas sert de passerelle indispensable. En intégrant le HTML dans le canevas et en synchronisant sa transformation, on obtient un contenu entièrement interactif. Parmi ses principaux avantages, on note une mise en page simplifiée , avec notamment la prise en charge des langues bidirectionnelles et des textes multilignes via CSS, sans aucune difficulté.
De plus, les contrôles de formulaire fonctionnent à merveille et sont bien plus faciles à personnaliser. Mais la fonctionnalité la plus puissante est que le contenu rendu sur le canevas est accessible via l'arbre d'accessibilité, permettant ainsi aux lecteurs d'écran d'interpréter l'interface . Même la fonction de recherche native du navigateur (Ctrl+F) peut localiser et surligner le texte dessiné dans une texture WebGL — une chose qui semble magique, mais qui est désormais une réalité.
Il ne faut pas oublier non plus que les robots d'exploration Web et les agents d'IA peuvent indexer le contenu, et que les extensions de navigateur fonctionnent nativement. Par exemple, si vous utilisez une extension de traduction, le texte affiché dans vos modèles 3D sera automatiquement mis à jour. Même depuis les outils de développement de Chrome, il est possible d'inspecter et de modifier les styles CSS en temps réel et d'observer leur impact sur la texture 3D.
Cas d'utilisation et applications réelles
Cette technologie ouvre des perspectives incroyables. Pour les applications Canvas de grande envergure, elle permet le rendu natif de composants d'interface complexes, réduisant ainsi la taille des fichiers et améliorant l'accessibilité. Dans le monde du jeu vidéo et du WebXR, c'est une véritable mine d'or : on pourrait créer un livre 3D dont les pages seraient du HTML ou un terminal de commande intégré à un jeu, permettant le copier-coller de texte natif.
Mise en œuvre technique : étape par étape
L'API est actuellement en phase de développement préliminaire (Chrome 148-150). Pour la tester, vous devez utiliser Chrome Canary et activer l'option correspondante. chrome://flags/#canvas-draw-elementLe processus d'utilisation est divisé en trois phases principales.
1. Configuration du canevas
La première chose à faire est d'ajouter l'attribut layoutsubtree (o content="drawable" Dans les versions plus récentes comme Chrome 157+, ajoutez `<canvas>` à la balise `<canvas>`. Cela indique au navigateur la présence d'éléments imbriqués à inclure dans la mise en page. Pour éviter que le contenu n'apparaisse flou, il est essentiel de… ajuster la grille du canevas au facteur d'échelle de l'appareil à l'aide d'un ResizeObserver.
2. Le processus de rendu
Dans un contexte 2D, nous utilisons la méthode drawElementImage dans le cadre de l'événement onpaintCet événement se déclenche chaque fois que l'élément doit être redessiné, par exemple lorsque l'utilisateur sélectionne du texte. Pour WebGL, la fonction équivalente est : texElementImage2Det pour WebGPU, il est utilisé copyElementImageToTextureDans les trois cas, l'objectif est traduire le DOM en une texture ou surface graphique.
3. Synchronisation des transformations CSS
C'est là que beaucoup échouent. Une fois l'élément rendu, il faut indiquer au navigateur sa position physique à l'écran pour que les clics et les survols fonctionnent. En 2D, on applique la transformation renvoyée par la méthode de dessin à la propriété. style.transform de l'élément. En 3D, c'est plus complexe, car cela nécessite convertir la matrice MVP WebGL convertir l'élément en tableau DOM, le normaliser et l'associer à la fenêtre d'affichage du canevas.
Soutien et limitations de la bibliothèque
Heureusement, nous n'avons pas à tout faire manuellement. Three.js a déjà implémenté une prise en charge expérimentale via THREE.HTMLTexturePour gérer la synchronisation complexe, PlayCanvas permet également d'associer des polices HTML à vos textures via sa propre API. Cependant, il est important de noter que, pour des raisons de sécurité, l'API… Cela ne fonctionne pas avec le contenu iframe provenant d'autres domaines (origine croisée).
Une autre limitation importante est que le défilement et les animations au sein du canevas dépendent de JavaScript. Cela signifie qu'ils ne peuvent pas être mis à jour indépendamment du thread principal ; il est donc impératif de surveiller les performances lors de l'ajout de contenu défilable à un canevas.
Confidentialité et sécurité
Le système est conçu pour éviter toute fuite d'informations sensibles. Le processus d'affichage exclut les données provenant de domaines externes, les couleurs système, les correcteurs orthographiques et les informations issues des liens visités. La mise en évidence des résultats de recherche internes et l'affichage des barres de défilement sont autorisés, car ils ne compromettent pas la confidentialité des utilisateurs .
Cette architecture novatrice permet de traiter le contenu HTML comme une image dynamique et intelligente. En intégrant le flux de rendu du navigateur à la puissance du GPU, elle résout les problèmes d'accessibilité dans les environnements graphiques et simplifie considérablement la création d'interfaces 3D complexes, rendant ainsi le web plus inclusif et visuellement percutant sans compromettre les fonctionnalités natives.