<canvas>

Zuletzt aktualisiert am 4. Februar 2026

Das <canvas>-Element stellt eine Zeichenfläche bereit, auf der du mit JavaScript Grafiken, Animationen und interaktive Visualisierungen erstellen kannst. Anders als SVG, das mit XML-Elementen arbeitet, ist Canvas pixelbasiert — du zeichnest Pixel für Pixel auf eine Bitmap. Das macht Canvas ideal für Spiele, Diagramme, Bildbearbeitung und alles, was viele Elemente schnell rendern muss.

Grundlagen

Das <canvas>-Element selbst ist nur ein leerer Container. Alles, was du siehst, wird per JavaScript gezeichnet. Du holst dir den Rendering-Kontext (getContext('2d') für 2D-Grafiken) und nutzt dessen Methoden, um Formen, Text und Bilder zu zeichnen.

• <canvas> erstellt eine leere Bitmap-Zeichenfläche
• width und height legen die Auflösung der Zeichenfläche fest (Standard: 300x150 Pixel)
• CSS-Größe und Canvas-Auflösung sind unabhängig — CSS skaliert nur die Darstellung
• getContext('2d') gibt den 2D-Zeichenkontext zurück
• getContext('webgl') oder getContext('webgl2') für 3D-Grafiken mit WebGL
• Inhalt zwischen den Tags wird als Fallback angezeigt, wenn Canvas nicht unterstützt wird
• Canvas hat kein DOM für die gezeichneten Elemente — du zeichnest Pixel, keine Objekte
• Für jede Änderung muss der betroffene Bereich neu gezeichnet werden

Syntax

<canvas id="my-canvas" width="400" height="200">
  Dein Browser unterstützt kein Canvas.
</canvas>

<script>
  const canvas = document.getElementById("my-canvas");
  const ctx = canvas.getContext("2d");

  // Rechteck
  ctx.fillStyle = "#4338ca";
  ctx.fillRect(20, 20, 150, 80);

  // Kreis
  ctx.fillStyle = "#059669";
  ctx.beginPath();
  ctx.arc(300, 100, 60, 0, Math.PI * 2);
  ctx.fill();

  // Dreieck
  ctx.fillStyle = "#dc2626";
  ctx.beginPath();
  ctx.moveTo(180, 160);
  ctx.lineTo(220, 40);
  ctx.lineTo(260, 160);
  ctx.closePath();
  ctx.fill();
</script>

Attribute

Beispiele

Farbverlauf zeichnen

Die Canvas API unterstützt lineare und radiale Farbverläufe. Hier ein linearer Gradient von links nach rechts:

<canvas id="gradient" width="400" height="150">
</canvas>

<script>
  const canvas = document.getElementById("gradient");
  const ctx = canvas.getContext("2d");

  const gradient = ctx.createLinearGradient(0, 0, 400, 0);
  gradient.addColorStop(0, "#4338ca");
  gradient.addColorStop(0.5, "#059669");
  gradient.addColorStop(1, "#dc2626");

  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, 400, 150);
</script>

Text auf Canvas

Du kannst auch Text direkt auf die Zeichenfläche schreiben. Das ist nützlich für Wasserzeichen, Beschriftungen in Diagrammen oder dynamisch generierte Grafiken:

<canvas id="text-demo" width="400" height="150">
</canvas>

<script>
  const canvas = document.getElementById("text-demo");
  const ctx = canvas.getContext("2d");

  // Hintergrund
  ctx.fillStyle = "#f3f4f6";
  ctx.fillRect(0, 0, 400, 150);

  // Überschrift
  ctx.font = "bold 36px sans-serif";
  ctx.fillStyle = "#4338ca";
  ctx.textAlign = "center";
  ctx.fillText("Hallo Canvas!", 200, 60);

  // Unterzeile
  ctx.font = "16px sans-serif";
  ctx.fillStyle = "#666";
  ctx.fillText("Text direkt auf die Zeichenfläche", 200, 100);
</script>

Interaktive Zeichenfläche

Canvas wird richtig spannend mit Maus-Events. Hier ein einfaches Zeichenprogramm, bei dem du mit der Maus malen kannst:

<canvas id="draw" width="400" height="200">
</canvas>
<button id="clear">Löschen</button>

<script>
  const canvas = document.getElementById("draw");
  const ctx = canvas.getContext("2d");
  let drawing = false;

  ctx.strokeStyle = "#4338ca";
  ctx.lineWidth = 3;
  ctx.lineCap = "round";

  canvas.addEventListener("mousedown", (e) => {
    drawing = true;
    ctx.beginPath();
    const rect = canvas.getBoundingClientRect();
    ctx.moveTo(
      e.clientX - rect.left,
      e.clientY - rect.top
    );
  });

  canvas.addEventListener("mousemove", (e) => {
    if (!drawing) return;
    const rect = canvas.getBoundingClientRect();
    ctx.lineTo(
      e.clientX - rect.left,
      e.clientY - rect.top
    );
    ctx.stroke();
  });

  canvas.addEventListener("mouseup", () => {
    drawing = false;
  });

  document.getElementById("clear")
    .addEventListener("click", () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    });
</script>

Barrierefreiheit

Canvas ist aus Barrierefreiheits-Sicht problematisch: Der gezeichnete Inhalt ist für Screenreader unsichtbar. Es gibt kein DOM, keine Texte und keine Struktur, die assistive Technologien auswerten können. Alles, was der Screenreader sieht, ist der Fallback-Text zwischen den Canvas-Tags.

• Verwende den Fallback-Inhalt zwischen den Tags, um den Canvas-Inhalt als Text zu beschreiben
• Für interaktive Canvas-Anwendungen (Spiele, Editoren) verwende role="img" mit aria-label für statische Grafiken oder ergänze die Canvas-Fläche mit unsichtbaren, aber fokussierbaren HTML-Elementen
• Wenn der Canvas-Inhalt aus Text besteht, überlege ob ein normales HTML-Element (z.B. ein gestyltes <div>) nicht die bessere Wahl wäre
• Für Diagramme und Datenvisualisierungen biete die Daten zusätzlich als Tabelle oder Liste an

<canvas id="chart" width="400" height="200"
        role="img"
        aria-label="Balkendiagramm: Umsatz 2024 nach Quartal.
          Q1: 45.000€, Q2: 62.000€, Q3: 58.000€, Q4: 71.000€">
  <!-- Fallback für Browser ohne Canvas -->
  <table>
    <tr><td>Q1</td><td>45.000€</td></tr>
    <tr><td>Q2</td><td>62.000€</td></tr>
    <tr><td>Q3</td><td>58.000€</td></tr>
    <tr><td>Q4</td><td>71.000€</td></tr>
  </table>
</canvas>

Häufige Fehler

Canvas-Größe mit CSS statt Attributen setzen: Wenn du die Größe nur per CSS änderst, bleibt die interne Auflösung bei 300x150 Pixeln. Die Grafik wird dann gestreckt und sieht unscharf aus. Setze width und height immer als HTML-Attribute, um die tatsächliche Pixelauflösung zu bestimmen. CSS steuert nur die Darstellungsgröße.

Kontext nicht prüfen: getContext() kann null zurückgeben, wenn der Kontexttyp nicht unterstützt wird (z.B. WebGL auf älteren Geräten). Prüfe immer den Rückgabewert, bevor du Zeichenmethoden aufrufst.

Retina-Displays ignorieren: Auf High-DPI-Displays (Retina) sieht Canvas unscharf aus, weil die Zeichenfläche in physischen Pixeln kleiner ist als die Darstellungsfläche. Für scharfe Grafiken multipliziere width und height mit window.devicePixelRatio und skaliere per CSS zurück.

Canvas für einfache Grafiken verwenden: Für einfache Formen, Icons oder Diagramme ist SVG oft die bessere Wahl. SVG ist auflösungsunabhängig, barrierefrei und per CSS stylbar. Canvas lohnt sich erst bei vielen Elementen, Animationen oder Pixel-Manipulation.

Browser-Kompatibilität

Das canvas-Element wird von allen modernen Browsern vollständig unterstützt. Die 2D-API funktioniert überall, WebGL-Support kann auf älteren mobilen Geräten eingeschränkt sein.

Email-Kompatibilität

Das canvas-Element wird von keinem E-Mail-Client unterstützt. JavaScript ist in E-Mails blockiert, und ohne JavaScript kann Canvas nichts darstellen. Verwende stattdessen Bilder (img) für Grafiken in E-Mails.

Verwandte Elemente