Overzicht van HTML-in-Canvas

Natalia Markoborodova

De HTML-in-Canvas API overbrugt de kloof tussen de interactieve en toegankelijke wereld van de DOM en de krachtige controle op pixelniveau van <canvas>. Met de API kun je live DOM-subtrees rechtstreeks tekenen in 2D-, WebGL- of WebGPU-canvascontexten, terwijl de browser interactiviteit, toegankelijkheidsbomen en integraties op browserniveau behoudt.

Video-overzicht van de HTML-in-Canvas API.

Lees HTML-in-Canvas in Chrome 157: Interactive DOM inside 2D, WebGL, and WebGPU voor meer informatie over de voordelen van HTML-in-Canvas, hoe het eerdere tijdelijke oplossingen verbetert en voor welke use cases het het meest geschikt is.

Je UI implementeren met HTML-in-Canvas

Zo integreer je HTML-in-Canvas in je app:

  • Maak een rechtstreekse implementatie met de browser-API's.
  • Gebruik een framework dat HTML-in-Canvas ondersteunt.

Je kunt ook een programmeeragent gebruiken om je te helpen. Meer informatie over hoe je de functionaliteit van je programmeeragent verbetert met Modern Web Guidance.

Rechtstreekse implementatie

De implementatie is afhankelijk van de context die je gebruikt. Neem voordat je begint de technische concepten door die in alle contexten voorkomen, zoals drawable-content en de paint-gebeurtenis.

Meer informatie over hoe je de elementafbeelding in een canvas tekent en de geometrie van het element updatet voor de volgende contexten:

Ondersteuning voor bibliotheken en frameworks

Verschillende populaire bibliotheken hebben experimentele ondersteuning voor HTML-in-Canvas toegevoegd, voor WebGL- en WebGPU-texturen en 2D-canvaseffecten. Check de documentatie van elke bibliotheek voor de huidige supportstatus en implementatiegegevens.

Three.js

Het handmatig updaten van matrices kan vervelend zijn, dus frameworks voegen ingebouwde ondersteuning toe. Three.js biedt bijvoorbeeld experimentele ondersteuning met 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 ondersteunt ook HTML-in-Canvas via de textuur-API:

// 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 ondersteunt HTML-in-Canvas via de klasse 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 biedt ondersteuning voor HTML-in-Canvas in 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 is een open source bibliotheek met UI-componenten die HTML-in-Canvas gebruiken.

HTML-in-Canvas implementeren met een programmeeragent

Als je een programmeeragent gebruikt, installeer je Modern Web Guidance. Deze bevat de nieuwste implementatie-instructies voor HTML-in-Canvas. Naast HTML-in-Canvas behandelt Modern Web Guidance ook andere moderne browser-API's en best practices.

Volgende stappen