HTML <canvas> Tag

Das <canvas>-Tag ist eines der HTML5-Elemente. Es definiert einen Bereich auf der Webseite, in dem wir mithilfe von Skripten (üblicherweise JavaScript) verschiedene Objekte, Bilder, Animationen und Fotokompositionen erstellen können. Zum Zeichnen von Grafiken muss ein Skript verwendet werden, da das <canvas>-Tag lediglich ein Container für Grafiken ist.

Beim Arbeiten mit Canvas ist es wichtig, zwischen dem Canvas-Element und dem Kontext eines Elements zu unterscheiden, da diese Begriffe häufig verwechselt werden. Das Element ist das, was in HTML eingebaut ist (der DOM-Knoten). Ein Canvas-Kontext ist ein Objekt mit eigenen Eigenschaften und Methoden zum Rendern. Der Kontext kann 2D oder 3D sein. Ein Canvas-Element kann nur einen Kontext haben.

Innerhalb des <canvas>-Tags sollte alternativer Inhalt bereitgestellt werden, damit ältere Browser ohne Canvas-Unterstützung, Browser mit deaktiviertem JavaScript und Screenreader etwas Sinnvolles anzeigen können (siehe Barrierefreiheit weiter unten).

Mit CSS kann die angezeigte Größe des Canvas verändert werden, es ist jedoch besser, die Auflösung mit den Attributen width und height am <canvas>-Element festzulegen — entweder im HTML oder per JavaScript —, um ein verschwommenes oder verzerrtes Bitmap zu vermeiden.

Standardmäßig hat ein <canvas>-Element eine Größe von 300 × 150 Pixeln.

Canvas vs. SVG: Was sollte verwendet werden?

Sowohl <canvas> als auch <svg> zeichnen Grafiken im Browser, funktionieren jedoch grundlegend unterschiedlich:

• Canvas ist pixelbasiert (Immediate Mode). Sobald etwas gezeichnet wurde, wird es zu einem flachen Bitmap — der Browser speichert keine Informationen über die einzelnen Formen. Es gibt kein DOM für den gezeichneten Inhalt, daher können keine Event-Listener an eine Form angehängt werden. Um einen Kreis zu „verschieben", muss die gesamte Szene in jedem Frame geleert und neu gezeichnet werden.
• SVG ist formbasiert (Retained Mode). Jedes Element verbleibt im DOM, kann mit CSS gestaltet und per Skript manipuliert werden und ist auflösungsunabhängig (es bleibt bei jeder Zoomstufe scharf).

Canvas sollte verwendet werden, wenn häufig neu gezeichnet wird oder viele Objekte vorhanden sind: Spiele, Partikeleffekte, Echtzeit-Datenvisualisierung, Bildverarbeitung. SVG eignet sich, wenn eine überschaubare Anzahl von Formen interaktiv, barrierefrei oder verlustfrei skalierbar sein muss: Icons, Diagramme, Schaubilder. Als Faustregel gilt: Canvas glänzt bei vielen sich schnell ändernden Pixeln, SVG bei wenigen Formen, die interaktiv bleiben.

Größenangaben: Die width/height-Attribute vs. CSS

Dies ist die häufigste Fehlerquelle bei Canvas. Ein Canvas hat zwei Größen:

• Die width- und height-Attribute legen die Größe des Zeichenpuffers fest (seine Bitmap-Auflösung in Pixeln).
• CSS width/height legen die angezeigte Größe auf der Seite fest.

Wenn diese voneinander abweichen, dehnt der Browser das Bitmap auf die CSS-Box aus, was die Zeichnung unscharf oder verzerrt darstellt. Die Attribute sollten immer auf die Auflösung gesetzt werden, mit der gezeichnet wird; CSS sollte nur zur Layoutpositionierung verwendet werden, wenn dies übereinstimmt.

<!-- Good: drawing buffer matches what you draw -->
<canvas width="400" height="200"></canvas>

<!-- Risky: CSS stretches a default 300x150 bitmap to 600x300, blurring it -->
<canvas style="width: 600px; height: 300px;"></canvas>

Für eine scharfe Ausgabe auf hochauflösenden („Retina"-)Bildschirmen sollte der Puffer mit window.devicePixelRatio skaliert werden (z. B. die Attribute auf cssWidth * devicePixelRatio setzen) und anschließend ctx.scale(dpr, dpr) vor dem Zeichnen aufgerufen werden.

Syntax

Das <canvas>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<canvas>) und dem schließenden (</canvas>) Tag geschrieben.

Beispiel des HTML-<canvas>-Tags:

Das folgende Skript greift mit document.getElementById() auf das Element zu und ruft getContext('2d') auf, um den 2D-Zeichenkontext zu erhalten — das Objekt, das alle Zeichenmethoden und -eigenschaften enthält. Mit fillStyle wird die Füllfarbe festgelegt, und fillRect(x, y, width, height) malt ein gefülltes Rechteck, dessen obere linke Ecke sich bei (x, y) befindet. Canvas-Koordinaten beginnen bei (0, 0) in der oberen linken Ecke, wobei x nach rechts und y nach unten zunimmt.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head> 
  <body>
    <canvas id="canvasExample">Your browser doesn’t support the HTML5 canvas element.</canvas>
    <script>
      const c = document.getElementById('canvasExample');
      const ctx = c.getContext('2d');
      ctx.fillStyle = '#1c87c9';
      ctx.fillRect(10, 50, 80, 80);
    </script>
  </body>
</html>

Ergebnis

Beispiel des HTML-<canvas>-Tags zur Textdarstellung:

Um Text zu zeichnen, werden die font-Eigenschaft (mit der gleichen Syntax wie die CSS-font-Kurzschreibweise) und fillStyle für die Farbe gesetzt, anschließend wird fillText(text, x, y) aufgerufen. (x, y) gibt hier die Position der Grundlinie des Textes an, nicht die obere linke Ecke. Die Attribute width und height werden am Element gesetzt, damit der Zeichenpuffer mit dem Zeichenbereich übereinstimmt.

<!DOCTYPE HTML>
<html>
  <head>
    <title>Title of the document</title>
  </head> 
  <body>
    <canvas id="canvasExample" width="400" height="200"></canvas>
    <script>
      const canvas = document.getElementById('canvasExample');
      const context = canvas.getContext('2d');
      context.font = '30pt Calibri';
      context.fillStyle = '#1c87c9';
      context.fillText('Canvas Example !', 50, 100);
    </script>
  </body>
</html>

Beispiel des HTML-<canvas>-Tags zum Zeichnen einer Linie:

Linien und andere Pfade werden in drei Schritten gezeichnet. moveTo(x, y) hebt den „Stift" an und setzt ihn an einen Startpunkt, ohne zu zeichnen. lineTo(x, y) fügt ein gerades Segment vom aktuellen Punkt zum neuen Punkt hinzu — es wird jedoch noch nichts gezeichnet. Erst stroke() rendert den Pfad tatsächlich, unter Verwendung des aktuellen strokeStyle (der Konturfarbe). Wenn mehr als ein separater Pfad gezeichnet wird, sollte jeder mit beginPath() begonnen werden; andernfalls werden neue Segmente an den vorherigen Pfad angehängt. Statt stroke() kann fill() (mit fillStyle) verwendet werden, wenn ein Pfad gefüllt statt nur umrissen werden soll.

<!DOCTYPE html>
<html>
  <body>
    <canvas width="300" height="150" style="border:1px solid #cccccc;" id="canvasExample">
      Your browser does not support the HTML5 canvas tag.
    </canvas>
    <script>
      const c = document.getElementById("canvasExample");
      const ctx = c.getContext("2d");
      ctx.beginPath();
      ctx.moveTo(0, 0);
      ctx.lineTo(300, 150);
      ctx.strokeStyle = '#1c87c9';
      ctx.stroke();
    </script>
  </body>
</html>

Typische Anwendungsfälle

Über einfache Formen hinaus ermöglicht der 2D-Kontext die Erstellung umfangreicher Grafiken:

• Animation — das Canvas leeren und innerhalb einer requestAnimationFrame()-Schleife neu zeichnen, um gleichmäßige, framebasierte Bewegung zu erzeugen.
• Bilder — ctx.drawImage(img, x, y) zeichnet ein <img>-Element, ein anderes Canvas oder einen Video-Frame und bildet die Grundlage für Fotobearbeitung und Filter.
• Verläufe — createLinearGradient() und createRadialGradient() erzeugen Verlaufsfüllungen und -konturen.
• Spiele und Datenvisualisierung — Canvas ist die erste Wahl, wenn viele Objekte in jedem Frame neu gezeichnet werden müssen, weshalb Diagramm- und Spielebibliotheken darauf aufgebaut sind.

All dies setzt JavaScript voraus, daher hilft ein solides Verständnis des HTML DOM, das Beste aus Canvas herauszuholen.

Barrierefreiheit

Canvas-Ausgabe besteht nur aus Pixeln — Screenreader und andere assistive Technologien können das Gezeichnete nicht „sehen". Um Canvas-Inhalte barrierefrei zu gestalten:

• Sinnvollen Fallback-Inhalt zwischen den Tags bereitstellen. Alles innerhalb von <canvas>...</canvas> wird in Browsern ohne Canvas-Unterstützung angezeigt und von assistiver Technologie zugänglich gemacht. Daher sollte die Zeichnung beschrieben werden, anstatt eine generische „Nicht unterstützt"-Meldung zu schreiben.
• Für eine statische Zeichnung role="img" und ein aria-label (oder aria-labelledby) hinzufügen, das die Zeichnung beschreibt, z. B. <canvas role="img" aria-label="Balkendiagramm der Verkäufe 2024">.
• Bei interaktiven Canvases sollten die Steuerelemente und Zustände in echten DOM-Elementen (Schaltflächen, Live-Regionen) gespiegelt werden, da die gezeichneten Formen selbst weder fokussierbar noch lesbar sind.

Attribute

Das <canvas>-Tag unterstützt globale Attribute und Ereignisattribute.

Übungen