- Het maakt het mogelijk om DOM-elementen direct weer te geven in Canvas 2D-, WebGL- en WebGPU-contexten.
- Het behoudt de oorspronkelijke interactiviteit, toegankelijkheid voor schermlezers en indexering door zoekmachines.
- Het maakt het gebruik van externe screenshotbibliotheken overbodig om webinterfaces te integreren in complexe grafische omgevingen.
Webontwikkelaars werden lange tijd gedwongen te kiezen tussen twee tamelijk rigide paden bij het bouwen van krachtige visuele applicaties. We vertrouwden ofwel op de DOM om te profiteren van de semantische structuur en toegankelijkheid ervan, ofwel stortten we ons vol overgave op het canvas-element om pure prestaties te behalen in grafische weergave op laag niveau. In feite was het een keuze tussen structureel gemak of visuele kracht , zonder middenweg.
Maar hier komt de experimentele HTML-in-Canvas API om de hoek kijken, die al beschikbaar is via broncodetesten. Deze tool is een ware parel, omdat we hiermee DOM-content direct op een 2D-canvas of zelfs WebGL- en WebGPU-texturen kunnen tekenen, met één cruciaal detail: de interface blijft interactief en toegankelijk . We hoeven niet langer te kiezen, want nu kunnen we het beste van beide werelden combineren om ervaringen te creëren die tot voor kort simpelweg onmogelijk te programmeren waren.
Het eeuwige dilemma: DOM versus Canvas
Om te begrijpen waarom dit een paradigmaverschuiving is, moeten we kijken naar wat elk element bijdraagt. De DOM vormt de basis van het web; het biedt kant-en-klare oplossingen voor tekstlay-out en stelt gebruikers in staat om natuurlijke acties uit te voeren, zoals tekst selecteren om te kopiëren of met de rechtermuisknop op een afbeelding klikken om deze op te slaan. Bovendien werkt het naadloos samen met toegankelijkheidstools, de leesmodus, browserextensies en zoomfuncties.
Aan de andere kant geeft Canvas (en zijn oudere broers WebGL en WebGPU) ons volledige controle over elke pixel, wat essentieel is voor games of zeer veeleisende applicaties zoals Figma of Google Docs. Het probleem is echter dat, omdat het in wezen een raster van pixels is, alles wat we erin plaatsen vastzit in een statische afbeelding . Als je responsieve tekst wilde, moest je alle logica helemaal opnieuw programmeren, wat de codeomvang enorm verhoogde en alle native browserfunctionaliteit volledig onbruikbaar maakte.
Wat levert het ons op om de DOM in het canvas te plaatsen?
De HTML-in-Canvas API fungeert als de noodzakelijke brug. Door HTML binnen het canvas te plaatsen en de transformatie ervan te synchroniseren, realiseren we volledig interactieve content. Een van de belangrijkste voordelen is de vereenvoudigde tekstlay-out , inclusief ondersteuning voor tweetalige weergave of meerdere regels via CSS, zonder complicaties.
Bovendien werken de formulierbesturingselementen uitstekend en zijn ze veel gemakkelijker aan te passen. Maar de krachtigste functie is dat de inhoud die op het canvas wordt weergegeven, beschikbaar is voor de toegankelijkheidsstructuur, waardoor schermlezers de interface kunnen interpreteren . Zelfs de ingebouwde zoekfunctie van de browser (Ctrl+F) kan tekst vinden en markeren die in een WebGL-textuur is getekend – iets wat als magie klinkt, maar nu werkelijkheid is.
We mogen ook niet vergeten dat webcrawlers en AI-agenten content kunnen indexeren en dat browserextensies native werken. Als je bijvoorbeeld een extensie hebt die woorden vertaalt, wordt de tekst in je 3D-meshes automatisch bijgewerkt . Zelfs vanuit de Chrome DevTools kunnen we CSS-stijlen in realtime inspecteren en wijzigen en zien hoe ze de 3D-textuur beïnvloeden.
Gebruiksscenario's en toepassingen in de praktijk
Deze technologie opent ongelooflijke mogelijkheden. Voor zeer grote, op canvas gebaseerde applicaties maakt het mogelijk om complexe interfacecomponenten native weer te geven, waardoor de bestandsgrootte wordt verkleind en de toegankelijkheid wordt verbeterd. In de wereld van videogames en WebXR is het goud waard: je zou een 3D-boek kunnen maken waarvan de pagina's daadwerkelijk HTML zijn, of een commandoterminal in een game waarmee je tekst native kunt kopiëren en plakken.
Technische implementatie: Stap voor stap
De API bevindt zich momenteel in een vroeg stadium (Chrome 148-150). Om deze te testen, moet u Chrome Canary gebruiken en de vlag inschakelen. chrome://flags/#canvas-draw-elementHet gebruiksproces is onderverdeeld in drie hoofdfasen.
1. Canvas instellen
Het eerste wat je moet doen, is het attribuut toevoegen. layoutsubtree (o content="drawable" In recentere versies (zoals Chrome 157+) wordt dit toegevoegd aan de canvas-tag. Dit vertelt de browser dat er geneste elementen zijn die in de lay-out moeten worden opgenomen. Om te voorkomen dat de inhoud wazig wordt weergegeven, is dit essentieel. Pas het canvasraster aan naar de schaalfactor van het apparaat met behulp van een ResizeObserver.
2. Het renderproces
In een 2D-context gebruiken we de methode drawElementImage binnen het evenement onpaintDeze gebeurtenis wordt geactiveerd wanneer het element opnieuw moet worden getekend, bijvoorbeeld wanneer de gebruiker tekst selecteert. Voor WebGL is de equivalente functie: texElementImage2Den voor WebGPU wordt het gebruikt copyElementImageToTextureIn alle drie gevallen is het doel Vertaal het DOM naar een textuur of grafisch oppervlak.
3. Synchronisatie van CSS-transformaties
Hier gaat het vaak mis. Zodra het element is weergegeven, moet je de browser laten weten waar het zich fysiek op het scherm bevindt, zodat klikken en hoveren werken. In 2D passen we de transformatie die door de tekenmethode wordt geretourneerd toe op de eigenschap. style.transform van het element. In 3D is het complexer, omdat het vereist converteer de WebGL MVP-matrix naar een DOM-array, normaliseer het element en koppel het aan de viewport van het canvas.
Ondersteuning en beperkingen van de bibliotheek
Gelukkig hoeven we niet alles handmatig te doen. Three.js heeft al experimentele ondersteuning geïmplementeerd via THREE.HTMLTexturePlayCanvas neemt de complexe synchronisatie voor zijn rekening en biedt je bovendien de mogelijkheid om via een eigen API HTML-lettertypen aan je texturen toe te wijzen. Het is echter belangrijk om te weten dat de API om veiligheidsredenen... Het werkt niet met iframe-inhoud. vanuit andere domeinen (cross-origin).
Een andere belangrijke beperking is dat scrollen en animaties binnen het canvas afhankelijk zijn van JavaScript. Dit betekent dat ze niet onafhankelijk van de hoofdthread kunnen worden bijgewerkt, waardoor de prestaties in de gaten moeten worden gehouden bij het toevoegen van scrollbare inhoud aan een canvas.
Privacy en beveiliging
Het systeem is ontworpen om het lekken van gevoelige informatie te voorkomen. Het weergaveproces sluit gegevens van externe domeinen, systeemkleuren, spellingcontrole en informatie van bezochte links uit. Het markeren van interne zoekresultaten en het weergeven van scrollbalken zijn wel toegestaan, aangezien deze de privacy van de gebruiker niet in gevaar brengen.
Deze innovatieve architectuur maakt het mogelijk om HTML-content te behandelen als een dynamische en intelligente afbeelding. Door de renderingflow van de browser te integreren met de kracht van de GPU, worden toegankelijkheidsproblemen in grafische omgevingen opgelost en wordt het creëren van complexe 3D-interfaces aanzienlijk vereenvoudigd. Hierdoor wordt het web inclusiever en visueel aantrekkelijker, zonder dat dit ten koste gaat van de native functionaliteit.