Visão geral da HTML-in-Canvas

Natalia Markoborodova

A API HTML-in-Canvas preenche a lacuna entre o mundo interativo e acessível do DOM e o controle de alta performance no nível de pixel do <canvas>. A API permite desenhar subárvores DOM em tempo real diretamente em contextos de tela 2D, WebGL ou WebGPU, enquanto o navegador mantém a interatividade, as árvores de acessibilidade e as integrações no nível do navegador.

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

Para aprender mais sobre os benefícios do HTML-in-Canvas, como ele melhora as soluções alternativas anteriores e para quais casos de uso ele é mais adequado, leia HTML-in-Canvas no Chrome 157: DOM interativo em 2D, WebGL e WebGPU.

Implementar sua interface com HTML-in-Canvas

Para integrar o HTML-in-Canvas ao seu app, você pode:

  • Crie uma implementação direta usando as APIs do navegador.
  • Use um framework compatível com HTML-in-Canvas.

Você também pode usar um agente de programação para ajudar. Saiba como melhorar sua experiência com o agente de programação usando as Orientações para Web Moderna.

Implementação direta

A implementação depende do contexto que você está usando. Antes de começar, revise os conceitos técnicos comuns a todos os contextos, como o conteúdo de drawable e o evento paint.

Saiba como desenhar a imagem do elemento em uma tela e atualizar a geometria dele para os seguintes contextos:

Suporte a bibliotecas e frameworks

Várias bibliotecas conhecidas adicionaram suporte experimental a HTML-in-Canvas para texturas WebGL e WebGPU, além de efeitos de tela 2D. Consulte a documentação de cada biblioteca para saber o status de suporte atual e os detalhes de implementação.

Three.js

Atualizar matrizes manualmente pode ser entediante, por isso os frameworks estão adicionando suporte integrado. Por exemplo, a biblioteca Three.js oferece suporte experimental usando THREE.HTMLTexture:

const material = new THREE.MeshBasicMaterial();
material.map = new THREE.HTMLTexture(uiElement); // Pass the DOM element

const geometry = new THREE.BoxGeometry(1, 1, 1);
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

PlayCanvas

O PlayCanvas também oferece suporte a HTML-in-Canvas usando a API de textura:

// Wait for the 'paint' event to set the source
canvas.addEventListener('paint', () => {
  htmlTexture.setSource(htmlElement);
}, { once: true });
canvas.requestPaint();

// Keep up to date
canvas.addEventListener('paint', onPaintUpload);

const material = new pc.StandardMaterial();
material.diffuseMap = htmlTexture;
material.update();

Babylon.js

O Babylon.js é compatível com HTML-in-Canvas usando a classe BABYLON.HtmlTexture:

// 2. Wrap the DOM element in an HtmlTexture
const htmlTexture = new BABYLON.HtmlTexture("htmlTexture", uiElement, scene);

// 3. Assign the texture to a material
const material = new BABYLON.StandardMaterial("hudMaterial", scene);
material.diffuseTexture = htmlTexture;

// 4. Apply material to 3D mesh
const plane = BABYLON.MeshBuilder.CreatePlane("hudPlane", { width: 1.6, height: 0.9 }, scene);
plane.material = material;

// 5. Start Render Loop
engine.runRenderLoop(() => {
  scene.render();
});

PixiJS

O PixiJS lançou suporte para HTML-in-Canvas no v8.19.0:

import { HTMLSource } from 'pixi.js/html-source';

// ... Initialize the app

// Append the HTML element as a direct child of the Pixi canvas
app.canvas.appendChild(htmlElement);

// Create the HTML-in-Canvas source and wrap it in a Sprite
const sprite = Sprite.from(new HTMLSource({ resource: form, autoUpdate: true }));
app.stage.addChild(sprite);

app.ticker.add(() => {
  // Make sure to align the HTML element by updating its transform
  const syncT = app.canvas.getElementTransform(htmlElement, finalTransform);
  if (syncT) {
    htmlElement.style.transform = syncT.toString();
  }
});

CanvasUI

A CanvasUI é uma biblioteca de código aberto de componentes de interface que usam HTML-in-Canvas.

Implementar HTML-in-Canvas com um agente de programação

Se você usa um agente de programação, instale o Modern Web Guidance, que inclui as instruções de implementação mais recentes para HTML-in-Canvas. Além do HTML-in-Canvas, o Modern Web Guidance aborda outras APIs de navegadores mais recentes e práticas recomendadas.

Próximas etapas