Por anos, desenvolvedores web enfrentaram uma escolha difícil ao criar aplicações visuais altamente interativas: depender do DOM por seus recursos semânticos ricos ou renderizar no elemento <canvas> para obter desempenho gráfico de baixo nível. A nova API experimental HTML-in-Canvas, agora disponível em teste de origem, elimina essa troca. Ela permite desenhar conteúdo DOM diretamente em uma tela 2D ou em uma textura WebGL/WebGPU, mantendo a interface interativa, acessível e conectada aos recursos do navegador.
O DOM é a base da interface web. Ele oferece layout de texto integrado e conteúdo semanticamente compreensível, e dá suporte a operações do dia a dia, como destacar texto para copiar ou clicar com o botão direito em uma imagem para salvá-la. Ele também se integra a ferramentas de acessibilidade, tradução, busca na página, modo de leitura, extensões, modo escuro, zoom do navegador e preenchimento automático. A tela, incluindo WebGL e WebGPU, oferece acesso de baixo nível aos pixels para gráficos 2D e 3D avançados, dos quais dependem jogos e aplicações complexas como Google Docs e Figma. No entanto, como a tela é uma grade de pixels, a interface dentro dela perde essas integrações com o navegador e frequentemente exige lógica personalizada pesada.
A API HTML-in-Canvas preenche essa lacuna. Ao colocar HTML dentro do elemento <canvas> e sincronizar sua transformação, os desenvolvedores obtêm layout de texto simplificado, controles de formulário expressivos, seleção de texto e menus de contexto nativos, exposição na árvore de acessibilidade, suporte à busca na página, indexabilidade para rastreadores e agentes de IA, compatibilidade com extensões e inspeção pelo Chrome DevTools. Os casos de uso incluem grandes aplicações baseadas em tela, cenas 3D e jogos web, além de experiências WebXR imersivas que precisam de uma interface DOM real e interativa.
Fonte: Hacker News · Resumido por HeadlinesBriefing