- HTML-in-Canvas es un proyecto de WICG que propone una nueva API estándar para dibujar elementos/contenido HTML directamente dentro de
<canvas> en la web
- Surgió para resolver problemas de diseño de texto complejo, accesibilidad, internacionalización y calidad/rendimiento, y permite aprovechar la maquetación HTML directamente en casos de uso variados de Canvas, como gráficos, UI y menús de videojuegos
- Mediante métodos nuevos como
drawElement, texElement2D y setHitTestRegions, es posible renderizar y convertir en textura elementos HTML de forma directa en contextos Canvas 2D o WebGL
- Refleja necesidades reales de desarrolladores de aplicaciones web, como áreas de interacción, mejoras de accesibilidad, UI 2D dentro de escenas 3D y layouts basados en CSS/HTML
- Actualmente está disponible como bandera experimental en Chrome Canary (a partir de 138.0.7175.0), y se aceptan comentarios y reportes de bugs
Resumen y relevancia
- Propuesta de una nueva API para dibujar elementos HTML directamente en
<canvas>
- Antes, al no existir una forma sencilla de renderizar contenido con maquetación compleja, texto y HTML en
<canvas>, había limitaciones en accesibilidad, internacionalización, rendimiento y calidad
- HTML-in-Canvas aborda estas carencias al habilitar renderizado HTML en Canvas 2D y WebGL, lo que mejora su aplicabilidad en herramientas de gráficos, cajas de texto enriquecido, UI de juegos y otros escenarios
Casos de uso
- Representación en canvas de texto con estilos y contenido de layout
- Ejemplos: leyendas y ejes de gráficos, cajas de editor enriquecido, menús dentro de juegos, entre otros
- Mejora de accesibilidad
- Soluciona la discrepancia entre el contenido alternativo del canvas y lo realmente renderizado
- Permite sincronizar mejor la información de accesibilidad con la nueva API
- Combinación de HTML con shaders de WebGL
- Responde a la necesidad de combinar HTML con shaders de WebGL estándar, más allá de los filtros CSS
- Renderizado de HTML en contexto 3D
- Permite insertar contenido 2D rico en áreas 3D de juegos o sitios web
API propuesta y funciones clave
- Activa el layout de elementos HTML hijos del canvas con el atributo
<canvas layoutsubtree> (por defecto, se renderiza solo de forma visual y no se expone a los algoritmos de navegación de la página ni de UA)
- CanvasRenderingContext2D.drawElement(element, x, y, options)
- Renderiza un elemento HTML hijo del canvas en la posición indicada
options.allowReadback controla la prevención de filtraciones de datos personales (se aplicará una política de tainting en el futuro)- Puede redimensionarse con los parámetros
dwidth/dheight al tamaño deseado
- WebGLRenderingContext.texElement2D(...)
- Dibuja un elemento HTML especificado directamente como textura de WebGL para usarlo en una escena 3D
- setHitTestRegions
- Asocia elementos dibujados en zonas específicas con eventos del canvas (hit test) para redirigir automáticamente eventos de mouse/táctil
- fireOnEveryPaint en ResizeObserver
- Detecta automáticamente el momento de rerender del canvas y dispara nuevo dibujo cuando hay cambios o reacomodos de HTML
Funcionamiento y limitaciones
- Al invocar drawElement, se refleja la matriz de transformación del canvas (CTM) y la imagen se recorta solo dentro del border box del elemento
- La imagen dibujada en el canvas es estática (si el elemento cambia después de renderizarlo, es necesario llamar a drawElement nuevamente)
- No se admite en canvas offscreen o canvas fuera del DOM (limitación técnica)
- Se pueden dibujar elementos interactivos (botones, formularios, etc.), pero no se vuelven interactivos automáticamente
- No se admite cross-origin iframe, SVG
foreignObject, entre otros
- Los temas de accesibilidad y seguridad/privacidad (PII) siguen en discusión
Ejemplos de demo
- Ejemplo de texto complejo: dibujar directamente con drawElement texto con estilos HTML, cajas y layouts complejos sobre canvas
- Ejemplo de webGL: crear una textura de WebGL con
texElement2D a partir de contenido HTML y mapearla en un cubo 3D
- Ejemplo de entrada de texto: mostrar regiones interactivas como formularios mediante
setHitTestRegions y fireOnEveryPaint
Prueba para desarrolladores y consideraciones
- Habilitar en Chrome Canary con la bandera
--enable-blink-features=CanvasDrawElement
- Como el contenido del canvas no se contamina (
tainted), es obligatorio tener cuidado para evitar fugas de información personal
- La API y su comportamiento aún cambian, y todavía faltan casos de prueba HTML a gran escala
- Se invita a dejar feedback: reportar en GitHub Issues casos de compatibilidad, fallas de renderizado, problemas de accesibilidad, etc.
Valor práctico y perspectivas
- En áreas como gráficos, visualización de datos, UI dentro de canvas y HUD/menús en videojuegos 3D, mejora la expresividad y productividad de la web
- Lo que antes era una conversión compleja de HTML a Canvas (estilos, layout, soporte multilingüe, accesibilidad) ahora puede tratarse de forma directa con una API estándar
- Los desarrolladores de gráficos, juegos y aplicaciones web lo ven como una tecnología potente con gran potencial
Aún no hay comentarios.