HTML-in-Canvas no Chrome 157: DOM interativo em 2D, WebGL e WebGPU

Natalia Markoborodova

Publicado em: 26 de outubro de 2026

Após um teste de origem bem-sucedido, o Chrome 157 marca o lançamento estável oficial da API HTML-in-Canvas. A API HTML-in-Canvas preenche a lacuna entre o mundo interativo e acessível do DOM e o controle de alto desempenho em nível de pixel do <canvas>. Essa API oferece o melhor dos dois mundos: recursos avançados do navegador e gráficos de tela acelerados por GPU.

Visão geral em vídeo da API HTML-in-Canvas.

O dilema entre o canvas e o DOM

Antes, ao criar apps da Web com muitos recursos visuais, era preciso escolher entre elementos HTML padrão e contextos de tela brutos.

Tecnologia Pontos fortes Limitações
<canvas> Controle de pixel de baixo nível com acesso à GPU para impulsionar pipelines de gráficos 2D e 3D, sombreadores personalizados e workers fora da tela. Renderização de alto desempenho para interfaces pesadas e com muitos dados. Não há recursos integrados da plataforma da Web, como seleção de texto, copiar e colar, ações de clique com o botão direito do mouse e ajuste de texto. A grade de pixels opaca não é compatível com leitores de tela, Localizar na página, tradução automática ou preenchimento automático por padrão e requer uma implementação de substituição.
HTML Interface semântica pronta para uso com controles de formulário integrados, tipografia responsiva e estilo CSS. Integração profunda do navegador para leitores de tela, Localizar na página e DevTools. Capacidade limitada de controlar o desempenho de interfaces complexas. Os efeitos visuais são restritos a CSS e SVG padrão, sem manipulação direta de pixels ou sombreadores.

Antes do HTML-in-Canvas

Antes dessa API, se você criasse interfaces com muitos elementos de tela, precisaria escolher entre duas abordagens, cada uma com as próprias desvantagens:

  1. Renderização de texto diretamente como pixels de tela (fillText()): os apps desenhavam texto e controles de interface de forma imperativa como pixels brutos. Essa abordagem resultou nas seguintes desvantagens:
    • Falha de acessibilidade: os leitores de tela e as ferramentas de acessibilidade não conseguem ler os pixels do canvas, a menos que você crie e sincronize manualmente um DOM substituto invisível.
    • Perda de recursos do navegador: os usuários não podem pesquisar com o recurso "Localizar na página" (Ctrl/Cmd+F), copiar e colar texto naturalmente, acionar menus de contexto ou usar a tradução e a verificação ortográfica do navegador.
    • Mecanismos de tipografia complexos: para oferecer suporte à internacionalização, é necessário agrupar grandes mecanismos de layout JavaScript.
  2. Sobreposições HTML flutuantes na parte de cima da tela: por exemplo, usando bibliotecas que posicionam elementos HTML padrão sobre a tela calculando caixas delimitadoras e transformações de matriz em JavaScript. As desvantagens dessa abordagem incluem:
    • Atraso de sincronização e tearing visual: a rolagem, o zoom ou os movimentos da câmera em 3D podem fazer com que os elementos DOM de sobreposição se desloquem ou tremam em relação aos pixels da tela devido a diferenças no tempo para a renderização do frame.
    • Limitações de recorte e ordenação em Z: as sobreposições HTML sempre ficam na parte de cima de todo o buffer da tela. Não era possível incorporar HTML dentro de uma cena 3D (por exemplo, atrás de um objeto 3D, dentro de um material de vidro ou refletido em um espelho) sem soluções alternativas complexas de iframe para imagem.
    • Sobrecarga de desempenho: para manter as sobreposições alinhadas com a tela, é necessário recalcular a transformação de cada sobreposição em JavaScript e gravá-la em style.transform em cada frame. Em seguida, o navegador analisa cada string e recalcula o estilo do elemento antes de renderizar o frame. Assim, o trabalho da linha de execução principal aumenta com cada sobreposição adicionada. Em um contexto 2D, o drawElementImage() atualiza a posição do elemento para você. No WebGL e na WebGPU, você transmite a transformação calculada para updateElementGeometry() como uma matriz. De qualquer forma, o navegador não analisa o CSS nem recalcula os estilos.

Principais benefícios da HTML-in-Canvas

A HTML-in-Canvas elimina essas desvantagens. Ao colocar HTML no elemento <canvas>, o conteúdo permanece interativo, e todas as integrações do navegador funcionam automaticamente.

O conteúdo HTML renderizado em um <canvas> tem os mesmos recursos do HTML fora de <canvas>:

  • Layout e formatação de texto: suporte para layout e formatação de texto, incluindo texto multilinha ou bidirecional com estilos CSS aplicados.
  • Controles de formulário: controles de formulário expressivos com várias opções de personalização de CSS e sombreador.
  • Seleção de texto, copiar e colar e clique com o botão direito do mouse: os usuários podem destacar texto em cenas 3D ou acionar menus de contexto.
  • Acessibilidade: o conteúdo HTML renderizado dentro da tela é exposto à árvore de acessibilidade para leitores de tela.
  • Integração de recursos do navegador: recursos do navegador, como tradução, preenchimento automático e "Localizar na página", funcionam de forma integrada. Os usuários podem traduzir ou pesquisar texto em texturas WebGL e WebGPU.
  • Integração de extensões: as extensões do navegador funcionam no conteúdo. Por exemplo, uma extensão de substituição de texto atualiza automaticamente o texto renderizado nas malhas 3D.
  • Integração com o DevTools: inspecione e ajuste os estilos CSS para elementos da interface de tela diretamente no Chrome DevTools.
  • Indexabilidade e agentes de IA: rastreadores da Web e agentes de IA podem indexar conteúdo DOM renderizado em cenas 2D e 3D.
  • Edição e exportação de mídia: exporte composições de tela cheia com elementos DOM ativos diretamente para imagens (toDataURL(), toBlob()) ou streams de vídeo (captureStream()).
Demonstração comparando a integração de recursos de texto renderizado diretamente em uma tela e HTML-in-Canvas. No painel HTML-in-Canvas, o conteúdo pode ser selecionado e traduzido, e os recursos do navegador, como o preenchimento automático, funcionam sem problemas. No painel de tela padrão, o conteúdo é renderizado diretamente em uma tela usando o método fillText e não é interativo.

Principais casos de uso

A HTML-in-Canvas oferece recursos em várias áreas:

  • Apps grandes baseados em canvas: apps da Web pesados podem renderizar componentes de interface diretamente em espaços de trabalho de canvas, melhorando a acessibilidade e reduzindo o tamanho do pacote.
  • Cenas e jogos em 3D: experiências e jogos imersivos do WebXR podem posicionar elementos DOM interativos, como terminais no jogo ou livros 3D legíveis, diretamente dentro das cenas.
  • Edição e exportação de mídia: ferramentas de criação que combinam tipografia HTML avançada com efeitos de sombreador podem exportar cenas compostas diretamente para imagens ou streams de vídeo.
  • Interfaces expressivas: é possível manipular o conteúdo HTML como pixels brutos para criar efeitos visuais baseados em sombreador.

Guia de início rápido do HTML-in-Canvas

Para renderizar HTML em uma tela, siga estas etapas:

  1. Prepare sua tela. Defina os atributos certos de forma declarativa para que o navegador saiba que deve renderizar o HTML em uma tela. Essa configuração é idêntica nos contextos 2D, WebGL e WebGPU. Saiba como configurar sua tela e como declarar elementos HTML para serem desenhados de forma independente.

    <!-- Prepare your canvas by setting the `content` attribute -->
<canvas id="canvas" width="600" height="400" content="drawable">
  <!-- Mark child as `drawable` to render to canvas -->
  <div id="myElement" drawable>
    <!-- Your HTML here -->
  </div>
</canvas>

  2. Desenhe a imagem do elemento na tela. A implementação exata depende de você renderizar o HTML em um contexto 2D, WebGL ou WebGPU.

    const ctx = canvas.getContext("2d");
// Draw HTML element into canvas in 2D
ctx.drawElementImage(myElement, myElementX, myElementY);

  3. Opcional: sincronize o DOM e os pixels. A sincronização de geometria também depende do contexto em que é usada. Em 2D, o navegador lida com isso automaticamente por padrão, enquanto em contextos 3D é necessário criar uma transformação e transmiti-la ao método updateElementGeometry.

    // In 3D, construct a transform as needed, for example:
const transform = new DOMMatrix().translate(x, y);
// Synchronize the element's DOM and pixels
canvas.updateElementGeometry(myElement, { canvasTransform: transform });

Suporte a frameworks e ecossistemas

As principais bibliotecas de gráficos WebGL e 3D são compatíveis com HTML-in-Canvas:

  • Three.js: oferece suporte experimental usando THREE.HTMLTexture.

    const material = new THREE.MeshBasicMaterial();
material.map = new THREE.HTMLTexture(uiElement);
const mesh = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), material);
scene.add(mesh);

  • PlayCanvas: oferece suporte ao streaming de textura HTML usando setSource().

    canvas.addEventListener('paint', () => {
  htmlTexture.setSource(htmlElement);
}, { once: true });

  • Babylon.js: oferece vinculação integrada com BABYLON.HtmlTexture.

    const htmlTexture = new BABYLON.HtmlTexture("htmlTexture", uiElement, scene);
material.diffuseTexture = htmlTexture;

  • PixiJS: suporte integrado na versão v8.19.0 com HTMLSource.

    import { HTMLSource } from 'pixi.js/html-source';
const sprite = Sprite.from(new HTMLSource({ resource: form, autoUpdate: true }));
app.stage.addChild(sprite);

  • CanvasUI: uma biblioteca de componentes de código aberto criada especificamente para HTML-in-Canvas.

Para mais detalhes sobre a implementação, consulte a documentação de cada framework.

Detecção de recursos e estratégias de substituição

Para garantir a compatibilidade entre navegadores, verifique se a API é compatível antes de executar o código:

export function supportsHtmlInCanvas() {
  if (typeof document === "undefined") return false;
  const canvas = document.createElement("canvas");
  canvas.setAttribute("content", "drawable");
  return canvas.content === "drawable";
}

Se a API não estiver disponível, use interfaces alternativas, sobreposições HTML flutuantes ou uma das bibliotecas disponíveis (por exemplo, three-html-render, html2canvas ou dom-to-image).

Próximas etapas