- HTML-in-Canvas é um projeto do WICG que propõe uma nova API padrão para renderizar diretamente elementos/conteúdo HTML dentro do
<canvas> na web
- Surgiu para resolver problemas de layout de texto complexo, acessibilidade, internacionalização e questões de qualidade/desempenho, e permite usar estilização HTML diretamente em diversos casos de uso de Canvas, como gráficos, UI e menus de jogo
- Por meio de métodos novos como
drawElement, texElement2D e setHitTestRegions, é possível renderizar e texturizar elementos HTML diretamente no contexto 2D do Canvas ou WebGL
- Áreas de interação, melhoria de acessibilidade, UI 2D em cenas 3D, layout baseado em CSS/HTML etc. refletem necessidades reais de desenvolvimento de web apps
- Atualmente pode ser habilitada no Chrome Canary (138.0.7175.0 ou superior) com flag experimental, e feedbacks e relatórios de bug são bem-vindos
Visão geral e importância
- Proposta de uma nova API para desenhar elementos HTML diretamente no
<canvas>
- Antes não havia uma forma simples de renderizar facilmente texto complexo, layout e conteúdo baseado em HTML em
<canvas>, então havia limitações de acessibilidade, internacionalização, desempenho e qualidade
- A HTML-in-Canvas surge como uma solução complementar, suportando renderização de HTML em Canvas 2D e WebGL, ampliando a aplicabilidade em diversas áreas, como ferramentas de gráfico, caixas de texto com recursos e UI de jogos.
Casos de uso
- Representação no canvas de texto e conteúdo de layout com estilos
- Ex.: legendas, eixos, caixas de editor rich-text e menus em jogos
- Melhoria de acessibilidade
- Resolve a inconsistência entre conteúdo alternativo de canvas e o conteúdo realmente renderizado
- Permite sincronizar informações de acessibilidade com a nova API
- Integração entre HTML e shaders WebGL
- Vai além dos efeitos de
filter do CSS, atendendo à demanda por combinar HTML com shaders WebGL convencionais
- Renderização de HTML em contexto 3D
- Permite inserir conteúdo 2D rico em áreas 3D de jogos e sites
API proposta e principais recursos
- O atributo
<canvas layoutsubtree> ativa o layout de elementos HTML filhos do canvas (por padrão, apenas renderização visual; não é exposto para algoritmos de navegação da UA)
- CanvasRenderingContext2D.drawElement(element, x, y, options)
- Renderiza os elementos HTML filhos do canvas na posição especificada
options.allowReadback controla a proteção contra vazamento de dados pessoais (uma política de tainting será aplicada futuramente)- Os parâmetros
dwidth/dheight permitem redimensionar para o tamanho desejado
- WebGLRenderingContext.texElement2D(...)
- Desenha o elemento HTML especificado diretamente como textura em WebGL para uso em cena 3D
- setHitTestRegions
- Conecta os elementos desenhados em uma região ao
hit test do canvas, redirecionando automaticamente eventos de mouse/toque
- Opção fireOnEveryPaint (ResizeObserver)
- Detecta automaticamente o momento de rerender de mudanças/reposicionamentos HTML e aciona o redesenho do canvas
Funcionamento e limitações
- Na chamada de
drawElement, há consideração da matriz de transformação do canvas (CTM) e a imagem é recortada apenas dentro da border box do elemento
- A imagem desenhada no canvas é estática (se o elemento mudar após o render, é necessário chamar
drawElement novamente)
- Não há suporte para canvas offscreen ou fora do DOM (limitação técnica)
- Elementos interativos (botão, formulário etc.) podem ser desenhados, mas não se tornam automaticamente interativos
iframe cross-origin e SVG foreignObject não são suportados- Questões de acessibilidade, segurança e privacidade (PII) ainda estão em discussão
Exemplo de demonstração
- Exemplo complex-text: desenhar diretamente no canvas, com
drawElement, textos com estilo HTML, caixas e layouts complexos
- Exemplo webGL: gerar textura WebGL a partir de conteúdo HTML com
texElement2D e mapear em um cubo 3D
- Exemplo text-input: marcar regiões interativas usando
setHitTestRegions e fireOnEveryPaint para formulários e outras áreas de entrada
Teste para desenvolvedores e observações
- Ative no Chrome Canary com a flag
--enable-blink-features=CanvasDrawElement
- Como o conteúdo do canvas não fica
tainted, é obrigatório tomar cuidado com possível vazamento de dados pessoais
- A API e seu funcionamento ainda estão em evolução, e ainda faltam casos de teste HTML em grande escala
- Feedback é bem-vindo: recomenda-se reportar em Issues do GitHub problemas de compatibilidade, falhas de renderização e questões de acessibilidade
Valor e perspectivas
- Em gráficos, visualização de dados, UI dentro de canvas, HUD e menus em jogos 3D, entre outros, traz ganho de expressividade e produtividade da web
- O que antes era uma conversão HTML→Canvas complexa (estilo, layout, suporte multilíngue, acessibilidade) passa a ser tratado diretamente via API padrão
- Para desenvolvedores de gráficos, jogos e apps web, representa uma tecnologia promissora
Ainda não há comentários.