Présentation du HTML dans Canvas

Natalia Markoborodova

L'API HTML-in-Canvas comble l'écart entre le monde interactif et accessible du DOM et le contrôle hautes performances au niveau des pixels de <canvas>. L'API vous permet de dessiner des sous-arborescences DOM en direct directement dans des contextes de canevas 2D, WebGL ou WebGPU, tandis que le navigateur conserve l'interactivité, les arborescences d'accessibilité et les intégrations au niveau du navigateur.

Présentation vidéo de l'API HTML-in-Canvas.

Pour en savoir plus sur les avantages du HTML dans Canvas, sur la façon dont il améliore les solutions de contournement précédentes et sur les cas d'utilisation auxquels il est le mieux adapté, consultez HTML dans Canvas dans Chrome 157 : DOM interactif dans 2D, WebGL et WebGPU.

Implémenter votre UI avec HTML-in-Canvas

Pour intégrer HTML-in-Canvas à votre application, vous pouvez :

  • Créez une implémentation directe à l'aide des API du navigateur.
  • Utilisez un framework compatible avec HTML-in-Canvas.

Vous pouvez également utiliser un agent de codage pour vous aider. Découvrez comment améliorer votre expérience avec l'agent de codage grâce à Modern Web Guidance.

Implémentation directe

L'implémentation dépend du contexte que vous utilisez. Avant de commencer, passez en revue les concepts techniques communs à tous les contextes, tels que le contenu drawable et l'événement paint.

Découvrez comment dessiner l'image de l'élément dans un canevas et mettre à jour la géométrie de l'élément pour les contextes suivants :

Compatibilité avec les bibliothèques et les frameworks

Plusieurs bibliothèques populaires ont ajouté une compatibilité expérimentale avec le HTML dans Canvas, pour les textures WebGL et WebGPU, ainsi que pour les effets Canvas 2D. Consultez la documentation de chaque bibliothèque pour connaître son état de compatibilité actuel et les détails de son implémentation.

Three.js

La mise à jour manuelle des matrices peut être fastidieuse. C'est pourquoi les frameworks ajoutent une compatibilité intégrée. Par exemple, Three.js fournit une compatibilité expérimentale à l'aide de 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 est également compatible avec HTML-in-Canvas à l'aide de son API de texture :

// 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 est compatible avec HTML-in-Canvas via la 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

PixiJS a ajouté la compatibilité avec HTML-in-Canvas dans 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 est une bibliothèque Open Source de composants d'interface utilisateur qui utilisent HTML-in-Canvas.

Implémenter HTML-in-Canvas avec un agent de codage

Si vous utilisez un agent de codage, installez Modern Web Guidance, qui inclut les dernières instructions d'implémentation pour HTML-in-Canvas. En plus de HTML-in-Canvas, Modern Web Guidance couvre d'autres API de navigateur récentes et bonnes pratiques.

Étapes suivantes