HTML im Canvas: So funktioniert die echte DOM-Integration

Das erste Mal, wenn HTML-Integration in Canvas tatsächlich funktioniert, fühlt es sich an wie ein Zaubertrick. Plötzlich rendert der Browser echte DOM-Elemente mit korrektem CSS-Layout direkt in einen Canvas-Bereich – ohne Umwege über Screenshots oder SVG-Fremdobjekte. Doch der Reiz verfliegt schnell, sobald man beginnt, eine echte Anwendung zu entwickeln.

Denn plötzlich stellen sich Fragen: Wie synchronisiert man mehrere Oberflächen? Wer kümmert sich um Größenanpassungen, Bereinigungen oder die Unterscheidung zwischen CSS- und Canvas-Pixeln? Die Antworten auf diese vermeintlich trivialen Fragen verwandeln die elegante API schnell in eine Sammlung von Randfällen und Lebenszyklus-Logik.

Genau hier setzt Prism an – ein Framework, das die Integration echter HTML-Elemente in Canvas strukturiert und handhabbar macht.

Echte DOM-Rendering in Canvas: Was steckt dahinter?

Die WICG-Initiative für HTML-in-Canvas ermöglicht es Browsern, echte DOM-Strukturen direkt in Canvas zu rendern. Dabei wird nicht einfach ein Screenshot erzeugt oder auf SVG basierende Fremdobjekte genutzt. Stattdessen wird das DOM-Element inklusive aller CSS-Stile, Schriftarten und Layouts in Echtzeit in den Canvas-Bereich gezeichnet.

Ein minimales Beispiel verdeutlicht die Funktionsweise:

<canvas id="canvas" layoutsubtree>
  <div id="panel" style="width: 400px; height: 200px">
    <h2>Echtes HTML</h2>
    <p>Echte CSS-Stile. Echte Schriftarten. Echte Layouts.</p>
  </div>
</canvas>

Der zugehörige JavaScript-Code verbindet die DOM-Elemente mit dem Canvas:

const canvas = document.getElementById("canvas");
const panel = document.getElementById("panel");
const ctx = canvas.getContext("2d");

if (!ctx) throw new Error("2D-Kontext nicht verfügbar");

canvas.onpaint = () => {
  ctx.drawElementImage(panel, 0, 0);
};

canvas.requestPaint();

Die Schlüsselfunktionen des Ansatzes sind:

• Das Attribut layoutsubtree aktiviert das Layout für Canvas-Kinder.
• Die Methode drawElementImage() zeichnet ein DOM-Element an eine bestimmte Position.
• Die onpaint-Funktion wird ausgelöst, sobald der Browser eine neue Zeichnung anfordert.

Für eine einzelne Oberfläche wirkt dies fast zu einfach – doch Anwendungen bestehen selten aus nur einem einzigen Element.

Der wahre Aufwand: Lebenszyklus und Koordinatensysteme

Die rohe API stellt Entwickler vor eine Reihe praktischer Herausforderungen, die weniger mit Grafik als mit Softwarearchitektur zu tun haben:

• Oberflächenverwaltung: Welche DOM-Elemente sollen als Canvas-Oberflächen fungieren?
• Größenanpassung: Wer aktualisiert die Abmessungen bei Resize-Events?
• Render-Steuerung: Wer fordert neue Zeichenoperationen an?
• Bereinigung: Was passiert bei der Deinitialisierung von Komponenten oder der Zerstörung der Laufzeitumgebung?
• Pixel-Konvertierung: Wie unterscheiden sich CSS-Pixel von Canvas-Pixeln?

Ein typischer React-Komponentenansatz sieht zwar machbar, aber nicht elegant aus:

useEffect(() => {
  const canvas = canvasRef.current;
  const scene = sceneRef.current;
  const ctx = canvas?.getContext("2d");

  if (!canvas || !ctx || !scene) return;

  canvas.onpaint = () => {
    ctx.reset();
    ctx.drawElementImage(scene, 0, 0);
  };

  const resizeObserver = new ResizeObserver(([entry]) => {
    canvas.width = Math.round(entry.contentRect.width);
    canvas.height = Math.round(entry.contentRect.height);
    canvas.requestPaint();
  });

  resizeObserver.observe(canvas);
  canvas.requestPaint();

  return () => {
    resizeObserver.disconnect();
    canvas.onpaint = null;
  };
}, []);

Diese Logik ist zwar funktionierend, aber nicht die Art von Code, die Entwickler gerne warten. Sobald Exportfunktionen, Mehrfach-Oberflächen, Interaktionen oder Routing hinzukommen, wird der Aufwand exponentiell.

Prism: Die Brücke zwischen Canvas und echtem DOM

Prism ist ein natives Runtime-Framework, das die Lebenszyklusverwaltung von DOM-Oberflächen in Canvas-Anwendungen übernimmt. Es ersetzt weder den Renderer noch die Anwendungslogik, sondern übernimmt spezifische Verantwortlichkeiten:

• Ihre Verantwortung: Szene, Rendering-Logik, Animationsschleife, Zustand, Daten und Interaktionen.
• Prisms Verantwortung: Registrierung von Oberflächen, Größenanpassungen, Invalidierung, Paint-Bereitschaft, Koordinatenhilfen und Bereinigung.

Die Installation erfolgt über:

pnpm add @synthesisengineering/prism

Die Integration in eine Anwendung gestaltet sich denkbar einfach:

import { CanvasRuntime } from "@synthesisengineering/prism";

const runtime = new CanvasRuntime(canvas, {
  backend: "auto"
});

const surface = runtime.registerSurface(element, {
  bounds: { x: 0, y: 0, width: 320, height: 180 }
});

runtime.onPaint(({ drawSurface }) => {
  drawSurface(surface);
});

runtime.start();

Das Framework übernimmt damit die mühsame Verwaltung der DOM-Oberflächen, während die Anwendung sich auf die eigentliche Visualisierung konzentrieren kann.

Der eigentliche Mehrwert: DOM als kreative Quelle

Prism ermöglicht es Entwicklern, die Stärken des Browsers gezielt zu nutzen. Statt jede grafische Komponente manuell in Canvas zu zeichnen, können echte HTML-Elemente mit korrekten CSS-Stilen und SVG-Inhalten als visuelle Bausteine verwendet werden.

Beispielhaft lässt sich dies in Datenvisualisierungen umsetzen. Die Anwendung Prism Atlantic nutzt reale Sturmdaten des NOAA/NHC HURDAT2-Archivs (2000–2025) und kombiniert Canvas-basierte Visualisierungen mit HTML/CSS-Oberflächen für Titel, Legenden, Tooltips und Exportfunktionen.

import { CanvasRuntime } from "@synthesisengineering/prism";

const runtime = new CanvasRuntime(canvas, {
  backend: "auto"
});

const tooltip = runtime.registerSurface(tooltipEl, {
  bounds: { x: 0, y: 0, width: 280, height: 120 }
});

const legend = runtime.registerSurface(legendEl, {
  bounds: { x: 20, y: 20, width: 200, height: 400 }
});

runtime.onPaint(({ ctx, drawSurface }) => {
  ctx.save();
  ctx.scale(runtime.pixelRatio, runtime.pixelRatio);
  drawStormTracks(ctx);
  ctx.restore();
  drawSurface(tooltip);
  drawSurface(legend);
});

runtime.start();

Besonders bei Exportfunktionen zeigt sich der Vorteil: Statt aufwendige Synchronisationen zu implementieren, wartet man einfach auf die vollständige Ladung der Schriftarten und einen Paint-Durchlauf von Prism, bevor man das Canvas über die Standard-API exportiert.

Mit Prism wird die Integration von echtem HTML in Canvas nicht nur machbar, sondern zu einer eleganten Lösung für komplexe Anwendungen. Das Framework ermöglicht es Entwicklern, die Stärken beider Welten zu verbinden: die Flexibilität des DOM für Layout und Design sowie die Leistungsfähigkeit von Canvas für benutzerdefinierte Visualisierungen.

Die Zukunft der Browser-Technologie liegt in der nahtlosen Integration verschiedener Rendering-Paradigmen – und Tools wie Prism sind ein wichtiger Schritt in diese Richtung.