Jahrelang standen Webentwickler beim Erstellen hochgradig interaktiver visueller Anwendungen vor einer schwierigen Wahl: sich auf das DOM mit seinen umfangreichen semantischen Funktionen zu verlassen oder auf das <canvas>-Element für eine leistungsstarke Grafik auf niedriger Ebene zu rendern. Die neue experimentelle HTML-in-Canvas-API, die nun im Origin Trial verfügbar ist, hebt diesen Zielkonflikt auf. Sie ermöglicht es Entwicklern, DOM-Inhalte direkt in eine 2D-Canvas- oder WebGL/WebGPU-Textur zu zeichnen, während die Benutzeroberfläche interaktiv, barrierefrei und mit Browserfunktionen verbunden bleibt.
Das DOM ist die Grundlage der Web-Benutzeroberfläche. Es bietet integrierte Textlayouts und semantisch verständliche Inhalte und unterstützt alltägliche Vorgänge wie das Markieren von Text zum Kopieren oder das Rechtsklicken auf ein Bild zum Speichern. Außerdem ist es in Barrierefreiheitswerkzeuge, Übersetzung, Suche auf der Seite, Lesemodus, Erweiterungen, Dunkelmodus, Browserzoom und Autofill integriert. Canvas, einschließlich WebGL und WebGPU, bietet einen Zugriff auf Pixel auf niedriger Ebene für fortgeschrittene 2D- und 3D-Grafiken, auf die Spiele und komplexe Anwendungen wie Google Docs und Figma angewiesen sind. Da Canvas jedoch ein Raster aus Pixeln ist, verliert die darin enthaltene Benutzeroberfläche diese Browserintegrationen und erfordert häufig aufwendige individuelle Logik.
Die HTML-in-Canvas-API schließt diese Lücke. Indem HTML innerhalb des <canvas>-Elements platziert und dessen Transformation synchronisiert wird, erhalten Entwickler vereinfachtes Textlayout, ausdrucksstarke Formularsteuerelemente, native Textauswahl und Kontextmenüs, die Bereitstellung im Barrierefreiheitsbaum, Unterstützung für die Suche auf der Seite, Indexierbarkeit für Crawler und KI-Agenten, Kompatibilität mit Erweiterungen sowie die Inspektion mit Chrome DevTools. Anwendungsfälle sind große Canvas-basierte Anwendungen, 3D-Szenen und Webspiele sowie immersive WebXR-Erlebnisse, die eine echte, interaktive DOM-Benutzeroberfläche benötigen.
Quelle: Hacker News · Zusammengefasst von HeadlinesBriefing