Durante años, los desarrolladores web se han enfrentado a una difícil elección al crear aplicaciones visuales altamente interactivas: depender del DOM por sus ricas funciones semánticas o renderizar en el elemento <canvas> para obtener un rendimiento gráfico de bajo nivel. La nueva API experimental HTML-in-Canvas, ahora disponible en prueba de origen, elimina esa disyuntiva. Permite dibujar contenido DOM directamente en un lienzo 2D o en una textura WebGL/WebGPU, manteniendo la interfaz interactiva, accesible y conectada a las funciones del navegador.
El DOM es la base de la interfaz web. Proporciona maquetación de texto integrada y contenido comprensible semánticamente, y admite operaciones cotidianas como resaltar texto para copiarlo o hacer clic derecho en una imagen para guardarla. También se integra con herramientas de accesibilidad, traducción, búsqueda en la página, modo lectura, extensiones, modo oscuro, zoom del navegador y autocompletado. El lienzo, incluidos WebGL y WebGPU, ofrece acceso a píxeles de bajo nivel para gráficos 2D y 3D avanzados, de los que dependen los juegos y aplicaciones complejas como Google Docs y Figma. Sin embargo, como el lienzo es una cuadrícula de píxeles, la interfaz que contiene pierde estas integraciones con el navegador y a menudo requiere una lógica personalizada extensa.
La API HTML-in-Canvas salva esta brecha. Al colocar HTML dentro del elemento <canvas> y sincronizar su transformación, los desarrolladores obtienen maquetación de texto simplificada, controles de formulario expresivos, selección de texto y menús contextuales nativos, exposición en el árbol de accesibilidad, soporte de búsqueda en la página, indexabilidad para rastreadores y agentes de IA, compatibilidad con extensiones e inspección con Chrome DevTools. Entre sus casos de uso se incluyen aplicaciones grandes basadas en lienzo, escenas 3D y juegos web, y experiencias inmersivas de WebXR que necesitan una interfaz DOM real e interactiva.
Fuente: Hacker News · Resumido por HeadlinesBriefing