Depuis des années, les développeurs web doivent faire un choix difficile lorsqu'ils conçoivent des applications visuelles très interactives : s'appuyer sur le DOM pour ses riches fonctionnalités sémantiques, ou effectuer le rendu sur l'élément <canvas> pour des performances graphiques de bas niveau. La nouvelle API expérimentale HTML-in-Canvas, désormais disponible en essai d'origine, supprime ce compromis. Elle permet aux développeurs de dessiner du contenu DOM directement dans un canevas 2D ou une texture WebGL/WebGPU, tout en gardant l'interface interactive, accessible et connectée aux fonctions du navigateur.
Le DOM est le fondement de l'interface web. Il fournit une mise en page de texte intégrée et un contenu compris sémantiquement, et prend en charge des opérations courantes comme sélectionner du texte pour le copier ou faire un clic droit sur une image pour l'enregistrer. Il s'intègre également aux outils d'accessibilité, à la traduction, à la recherche dans la page, au mode lecture, aux extensions, au mode sombre, au zoom du navigateur et à la saisie automatique. Le canevas, y compris WebGL et WebGPU, offre un accès bas niveau aux pixels pour des graphismes 2D et 3D avancés, dont dépendent les jeux et les applications complexes comme Google Docs et Figma. Cependant, le canevas étant une grille de pixels, l'interface qu'il contient perd ces intégrations avec le navigateur et nécessite souvent une logique personnalisée lourde.
L'API HTML-in-Canvas comble cet écart. En plaçant du HTML à l'intérieur de l'élément <canvas> et en synchronisant sa transformation, les développeurs bénéficient d'une mise en page de texte simplifiée, de contrôles de formulaire expressifs, d'une sélection de texte native et de menus contextuels, d'une exposition dans l'arbre d'accessibilité, de la recherche dans la page, d'une indexabilité pour les robots d'exploration et les agents d'IA, d'une compatibilité avec les extensions et d'une inspection via Chrome DevTools. Parmi les cas d'usage figurent les grandes applications basées sur le canevas, les scènes 3D et les jeux web, ainsi que les expériences WebXR immersives qui nécessitent une véritable interface DOM interactive.
Source: Hacker News · Résumé par HeadlinesBriefing