<canvas>

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.

Steckbrief <canvas>

Kategorie: Einbettung & Widgets
Art: Block
Attribute: 2
Beispiele: 3
Browser: 5 von 5
E-Mail: 0 von 5
Stand: 04.02.2026

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

index.html

Grundsyntax

<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

2 Attribute

Attribut und Beispiel	Beschreibung
`width` Number width="800"	Die Breite der Zeichenfläche in Pixeln. Standardwert ist 300. Nicht mit CSS-Breite verwechseln. Dieses Attribut bestimmt die Auflösung.
`height` Number height="600"	Die Höhe der Zeichenfläche in Pixeln. Standardwert ist 150. Nicht mit CSS-Höhe verwechseln. Dieses Attribut bestimmt die Auflösung.

Beispiele

3 Beispiele

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

index.html

Linearer Farbverlauf

<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>

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

index.html

Text zeichnen

<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>

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

index.html

Zeichenprogramm

<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

4 Fehler

01 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.

02 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.

03 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.

04 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

5 von 5

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.

Chrome

Komplett

2D und WebGL/WebGL2 vollständig unterstützt
Firefox

Komplett

2D und WebGL/WebGL2 vollständig unterstützt
Safari

Komplett

2D und WebGL vollständig, WebGL2 seit Safari 15
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

0 von 5

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.

Apple Mail

Keine

Canvas wird ignoriert, nur der Fallback-Text wird angezeigt.
Gmail

Keine

Entfernt das canvas-Element und JavaScript.
Outlook

Keine

Keine Unterstützung für Canvas oder JavaScript.
Thunderbird

Keine

Canvas wird nicht gerendert.
Yahoo Mail

Keine

Entfernt canvas-Elemente und Scripts.

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

<canvas>

Grundlagen

Syntax

Attribute

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter