HTML-in-Canvas in Chrome 157: Interactieve DOM in 2D, WebGL en WebGPU

Natalia Markoborodova

Gepubliceerd: 26 oktober 2026

Na een succesvolle origin trial is Chrome 157 de officiële stabiele release van de HTML-in-Canvas API. De HTML-in-Canvas API overbrugt de kloof tussen de interactieve, toegankelijke wereld van de DOM en de krachtige controle op pixelniveau van <canvas>. Deze API biedt je het beste van 2 werelden: uitgebreide browsermogelijkheden en GPU-versnelde canvasafbeeldingen.

Het dilemma van canvas versus DOM

Eerder moest je bij het maken van visueel veeleisende web-apps kiezen tussen standaard HTML-elementen en onbewerkte canvascontexten.

Vóór HTML-in-Canvas

Vóór deze API moest je bij het bouwen van canvas-intensieve UI's kiezen tussen 2 benaderingen, elk met eigen nadelen:

1. Tekst rechtstreeks renderen als canvaspixels (fillText()): Apps tekenden tekst en UI-bedieningselementen imperatief als onbewerkte pixels. Deze aanpak had de volgende nadelen:
   • Toegankelijkheidsproblemen: Schermlezers en hulptools kunnen canvaspixels niet lezen, tenzij je handmatig een onzichtbare fallback-DOM maakt en synchroniseert.
   • Verlies van browserfuncties: Gebruikers kunnen niet zoeken met Zoeken op pagina (Ctrl/Cmd+F), tekst op een natuurlijke manier kopiëren en plakken, contextmenu's activeren of browservertaling en spellingcontrole gebruiken.
   • Complexe typografische engines: Voor ondersteuning van internationalisering moeten grote JavaScript-layout-engines worden gebundeld.
2. Zwevende HTML-overlays boven op het canvas: bijvoorbeeld door bibliotheken te gebruiken die standaard HTML-elementen over het canvas plaatsen door begrenzingsvakken en matrixtransformaties in JavaScript te berekenen. Dit zijn de nadelen van deze aanpak:
   • Synchronisatievertraging en visuele tearing: Scrollen, zoomen of camerabewegingen in 3D kunnen ertoe leiden dat de DOM-elementen van de overlay afwijken of trillen ten opzichte van de canvaspixels vanwege verschillen in de framingduur.
   • Beperkingen voor bijsnijden en z-volgorde: HTML-overlays bevinden zich altijd bovenop de hele canvasbuffer. HTML insluiten in een 3D-scène (bijvoorbeeld achter een 3D-object, in een glazen materiaal of weerspiegeld in een spiegel) was niet mogelijk zonder complexe tijdelijke oplossingen van iframe naar afbeelding.
   • Prestatieoverhead: Als je overlays wilt uitlijnen met het canvas, moet je de transformatie van elke overlay opnieuw berekenen in JavaScript en deze in elk frame naar style.transform schrijven. De browser parseert dan elke tekenreeks en berekent de stijl van het element opnieuw voordat het frame kan worden gerenderd. Het werk van de hoofdthread neemt dus toe met elke overlay die je toevoegt. In een 2D-context updatet drawElementImage() de positie van het element voor je. In WebGL en WebGPU geef je de transformatie die je berekent door aan updateElementGeometry() als een matrix. In beide gevallen parseert de browser geen CSS en worden stijlen niet opnieuw berekend.

Belangrijkste voordelen van HTML-in-Canvas

HTML-in-Canvas elimineert deze nadelen. Door HTML in het element <canvas> te plaatsen, blijft de content interactief en werken alle browserintegraties automatisch.

HTML-content die wordt weergegeven in een <canvas>, heeft dezelfde mogelijkheden als HTML buiten een <canvas>:

• Tekstindeling en -opmaak: ondersteuning voor tekstindeling en -opmaak, waaronder tekst met meerdere regels of bidirectionele tekst met toegepaste CSS-stijlen.
• Formulierbesturingselementen: expressieve formulierbesturingselementen met uitgebreide aanpassingsopties voor CSS en shaders.
• Tekst selecteren, kopiëren en plakken en klikken met de rechtermuisknop: Gebruikers kunnen tekst in 3D-scènes markeren of contextmenu's activeren.
• Toegankelijkheid: HTML-content die in het canvas wordt weergegeven, wordt blootgesteld aan de toegankelijkheidsstructuur voor schermlezers.
• Integratie van browserfuncties: Browserfuncties zoals vertalen, automatisch invullen en Zoeken op pagina werken meteen. Gebruikers kunnen tekst in WebGL- en WebGPU-texturen vertalen of zoeken.
• Extensie-integratie: Browserextensies werken aan de content. Een extensie voor tekstvervanging updatet bijvoorbeeld automatisch de tekst die op uw 3D-meshes wordt weergegeven.
• DevTools-integratie: Inspecteer en pas CSS-stijlen voor canvas-UI-elementen rechtstreeks aan in Chrome DevTools.
• Indexeerbaarheid en AI-agents: Webcrawlers en AI-agents kunnen DOM-content indexeren die is gerenderd in 2D- en 3D-scènes.
• Media bewerken en exporteren: Exporteer volledige canvascomposities met live DOM-elementen rechtstreeks naar afbeeldingen (toDataURL(), toBlob()) of videostreams (captureStream()).

Primaire use cases

HTML-in-Canvas biedt mogelijkheden op verschillende gebieden:

• Grote canvas-gebaseerde apps: Zware web-apps kunnen UI-componenten rechtstreeks in canvas-werkruimtes renderen, waardoor de toegankelijkheid wordt verbeterd en de bundelgrootte wordt verkleind.
• 3D-scènes en -games: Meeslepende WebXR-belevingen en -games kunnen interactieve DOM-elementen, zoals in-game terminals of leesbare 3D-boeken, rechtstreeks in scènes plaatsen.
• Media bewerken en exporteren: Creatieve tools die uitgebreide HTML-typografie combineren met shadereffecten, kunnen samengestelde scènes rechtstreeks exporteren naar afbeeldingen of videostreams.
• Expressieve UI's: Je kunt HTML-content manipuleren als onbewerkte pixels om visuele effecten op basis van shaders te maken.

Snel aan de slag met HTML-in-Canvas

Voor de weergave van HTML in een canvas zijn de volgende stappen vereist:

1. Bereid je canvas voor. Stel de juiste kenmerken declaratief in om de browser te laten weten dat deze HTML moet renderen in een canvas. Deze instelling is identiek voor 2D-, WebGL- en WebGPU-contexten. Meer informatie over hoe je je canvas instelt en hoe je HTML-elementen declareert die onafhankelijk moeten worden getekend.

   <!-- 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. Teken de elementafbeelding op het canvas. De exacte implementatie is afhankelijk van of je HTML rendert in een 2D-, WebGL- of WebGPU-context.

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

3. Optioneel: Synchroniseer de DOM en de pixels. Geometrische synchronisatie is ook afhankelijk van de context die je gebruikt. In 2D verwerkt de browser dit standaard automatisch, terwijl je in 3D-contexten een transformatie moet maken en deze moet doorgeven aan de methode 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 });
   

Ondersteuning voor frameworks en ecosystemen

Belangrijke WebGL- en 3D-afbeeldingsbibliotheken ondersteunen HTML-in-Canvas:

• Three.js: biedt experimentele ondersteuning met 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: ondersteunt HTML-textuurstreaming met setSource().

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

• Babylon.js: biedt ingebouwde binding via BABYLON.HtmlTexture.

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

• PixiJS: ingebouwde ondersteuning geleverd in versie v8.19.0 met HTMLSource.

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

• CanvasUI: een opensource-componentenbibliotheek die speciaal is ontworpen voor HTML-in-Canvas.

Neem de documentatie van elk framework door voor meer informatie over de implementatie.

Functiedetectie en fallback-strategieën

Controleer de API-ondersteuning voordat je de code uitvoert om compatibiliteit tussen browsers te garanderen:

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

Als de API niet beschikbaar is, kun je terugvallen op alternatieve UI's, zwevende HTML-overlays of een van de beschikbare bibliotheken (bijvoorbeeld three-html-render, html2canvas of dom-to-image).

Volgende stappen

• Neem de volledige documentatie over HTML-in-Canvas van Chrome voor ontwikkelaars door.
• Upgrade programmeerhulp met Modern Web Guidance.
• Deel feedback in de WICG GitHub-repository.
• Ga naar de communitydemo's van HTML in Canvas.