- HTML-in-Canvas ist ein WICG-Projekt, das eine neue Standard-API vorschlägt, mit der HTML-Elemente bzw. -Inhalte direkt innerhalb von
<canvas> gezeichnet werden können
- Es wurde eingeführt, um komplexes Textlayout, Accessibility, Internationalisierung sowie Qualitäts-/Performance-Probleme zu adressieren, und macht in Charts, UI und Spielmenüs sowie weiteren Canvas-Anwendungsfällen direktes HTML-Styling nutzbar
- Über neue Methoden wie
drawElement, texElement2D und setHitTestRegions lassen sich HTML-Elemente unverändert im Canvas 2D- oder WebGL-Kontext rendern und texturieren
- Interaktionsbereiche, Accessibility-Verbesserung, 2D-UI in 3D-Szenen, CSS-/HTML-basierte Layouts etc. spiegeln echte Anforderungen von Web-App-Entwicklern wider
- Derzeit kann es in Chrome Canary (ab 138.0.7175.0) über einen experimentellen Flag aktiviert werden; Feedback und Bugreports sind willkommen
Übersicht und Bedeutung
- Eine neue API, mit der HTML-Elemente direkt in
<canvas> gerendert werden können, wird vorgeschlagen
- Bisher gab es keinen einfachen Weg, komplexe Layouts sowie Text- und HTML-basierte Inhalte in
<canvas> zu rendern, was zu Einschränkungen bei Accessibility, Internationalisierung, Performance und Qualität führte
- HTML-in-Canvas adressiert diese Lücke, indem es HTML-Rendering in 2D-Canvas und WebGL unterstützt und so Einsatzmöglichkeiten bei Charting-Tools, Rich-Text-Feldern und Spiel-UIs erweitert
Anwendungsfälle
- Darstellung formatierter Text- und Layoutinhalte im Canvas
- Beispiele: Legenden und Achsen von Diagrammen, Rich-Text-Editor-Felder, Menüs im Spiel
- Bessere Accessibility
- Beseitigt Inkonsistenzen zwischen alternativer Canvas-Beschreibung und tatsächlich gerenderten Inhalten
- Mit der neuen API lassen sich Accessibility-Informationen besser synchron halten
- Kombination von HTML und WebGL-Shadern
- Reagiert auf den Bedarf, über reine CSS-Filter-Effekte hinaus HTML mit regulären WebGL-Shadern zu kombinieren
- HTML-Rendering in einem 3D-Kontext
- Ermöglicht den Einsatz von reichhaltigen 2D-Inhalten in 3D-Bereichen von Spielen oder Websites
Vorgeschlagene API und Hauptfunktionen
- Die Eigenschaft
<canvas layoutsubtree> aktiviert das Layout untergeordneter HTML-Elemente im Canvas (standardmäßig wird nur visuell gerendert; sie werden nicht in UA-Algorithmen für Seiten-Navigation etc. berücksichtigt)
- CanvasRenderingContext2D.drawElement(element, x, y, options)
- Rendert ein Canvas-Kind-HTML-Element an der angegebenen Position
- Mit
options.allowReadback lässt sich das Verhindern von Datenabfluss steuern (zukünftig mit einer Tainting-Policy)
- Mit den Parametern
dwidth/dheight kann auf Wunsch die Größe angepasst werden
- WebGLRenderingContext.texElement2D(...)
- Zeichnet ein angegebenes HTML-Element direkt als WebGL-Textur und nutzt es in 3D-Szenen
- setHitTestRegions
- Verknüpft die im Zeichnungsbereich liegenden Elemente mit Canvas-Ereignissen (Hit Testing), um Maus-/Touch-Events automatisch umzuleiten
- fireOnEveryPaint-Option (ResizeObserver)
- Erkennt bei Änderungen oder Repositionierungen von HTML automatisch neu, wann ein Re-Render erforderlich ist, und triggert das erneute Zeichnen
Verhalten und Einschränkungen
- Bei einem
drawElement-Aufruf wird die Canvas-Transform-Matrix (CTM) berücksichtigt; die Zeichnung wird auf die Border Box des Elements geclippt
- Das auf das Canvas gezeichnete Bild ist statisch (ändert sich das Element danach, ist ein erneuter
drawElement-Aufruf nötig)
- Für Offscreen-Canvas bzw. Canvas-Instanzen ohne DOM-Einbindung ist es nicht unterstützt
- Interaktive Elemente (Buttons, Formulare etc.) lassen sich zeichnen, werden aber nicht automatisch interaktiv
- Cross-Origin-Iframes und
SVG foreignObject werden nicht unterstützt
- Accessibility-, Sicherheits- und Datenschutz-Themen (insbesondere PII) werden weiterhin diskutiert
Demo-Beispiele
- Komplexer-Text-Beispiel: Zeichnet komplexes Layout direkt mit
drawElement, darunter HTML-gestylter Text und Boxen, auf das Canvas
- WebGL-Beispiel: Erstellt mit
texElement2D eine WebGL-Textur aus HTML-Inhalten und mappt sie auf einen 3D-Würfel
- Text-Eingabe-Beispiel: Zeigt, wie
setHitTestRegions und fireOnEveryPaint verwendet werden, um klickbare Zonen wie Eingabeformulare zu markieren
Entwickler-Tests und Hinweise
- Aktivierung in Chrome Canary über den Flag
--enable-blink-features=CanvasDrawElement
- Canvas-Inhalte sind nicht automatisch getainted, daher ist Sorgfalt bei der Vermeidung von Datenschutzverletzungen zwingend
- API und Verhalten ändern sich weiterhin; groß angelegte Testfälle für HTML sind noch begrenzt
- Feedback ist erwünscht: Bitte kompatibilitäts-, Render-Failure- und Accessibility-Fälle als GitHub-Issue melden
Nutzen und Ausblick
- In Bereichen wie Charts, Datenvisualisierung, In-Canvas-UI sowie HUDs und Menüs in 3D-Spielen steigert die API die Ausdruckskraft und Produktivität im Web deutlich
- Die bisher aufwendige HTML→Canvas-Umsetzung (Styling, Layout, Mehrsprachigkeit, Accessibility) lässt sich künftig direkt über eine Standard-API abbilden
- Für Entwickler in den Bereichen Web-Grafik, Spiele und Apps ist dies als starke neue Technologie zu erwarten
Noch keine Kommentare.