Descripción general de HTML-in-Canvas

Natalia Markoborodova

La API de HTML-in-Canvas cierra la brecha entre el mundo interactivo y accesible del DOM y el control de alto rendimiento a nivel de píxeles de <canvas>. La API te permite dibujar subárboles del DOM en vivo directamente en contextos de lienzo de 2D, WebGL o WebGPU, mientras que el navegador conserva la interactividad, los árboles de accesibilidad y las integraciones a nivel del navegador.

Descripción general en video de la API de HTML-in-Canvas.

Para conocer los beneficios de HTML-in-Canvas, cómo mejora las soluciones alternativas anteriores y para qué casos de uso es más adecuado, consulta HTML-in-Canvas en Chrome 157: DOM interactivo dentro de 2D, WebGL y WebGPU.

Implementa tu IU con HTML-in-Canvas

Para integrar HTML-in-Canvas en tu app, puedes hacer lo siguiente:

  • Crea una implementación directa con las APIs del navegador.
  • Usa un framework que admita HTML-in-Canvas.

También puedes usar un agente de programación para que te ayude. Obtén información para mejorar tu experiencia con el agente de programación con Modern Web Guidance.

Implementación directa

La implementación depende del contexto que uses. Antes de comenzar, revisa los conceptos técnicos que son comunes en todos los contextos, como el contenido de drawable y el evento paint.

Obtén información para dibujar la imagen del elemento en un lienzo y actualizar su geometría en los siguientes contextos:

Compatibilidad con bibliotecas y frameworks

Varias bibliotecas populares agregaron compatibilidad experimental con HTML en Canvas, para texturas de WebGL y WebGPU, así como efectos de lienzo en 2D. Consulta la documentación de cada biblioteca para conocer su estado de compatibilidad actual y los detalles de implementación.

Three.js

Actualizar las matrices de forma manual puede ser tedioso, por lo que los frameworks están agregando compatibilidad integrada. Por ejemplo, Three.js proporciona asistencia experimental con 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

PlayCanvas también admite HTML-in-Canvas con su API de texturas:

// 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

Babylon.js admite HTML-in-Canvas a través de la clase 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

PixiJS lanzó compatibilidad con HTML-in-Canvas en 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

CanvasUI es una biblioteca de código abierto de componentes de IU que usan HTML-in-Canvas.

Implementa HTML-in-Canvas con un agente de programación

Si usas un agente de programación, instala Modern Web Guidance, que incluye las instrucciones de implementación más recientes para HTML-in-Canvas. Además de HTML-in-Canvas, Modern Web Guidance abarca otras APIs de navegadores modernos y prácticas recomendadas.

Próximos pasos