Das canvas-Element: Malen mit JavaScript

vom 26.05.2023 von Oliver Misch

Ein <canvas> ist eine leere Zeichenfläche. Das HTML stellt nur das Blatt Papier bereit, gezeichnet wird ausschließlich mit JavaScript: Linien, Flächen, Pixel, Animationen. Darauf laufen Diagramme, Bildbearbeitung im Browser und komplette Spiele.

Syntax und Mini-Beispiel

HTML plus JavaScript

<canvas id="flaeche" width="200" height="100">
    Fallback-Text für Browser ohne Canvas-Unterstützung.
</canvas>

<script>
const ctx = document.getElementById("flaeche").getContext("2d");
ctx.fillStyle = "#008080";
ctx.fillRect(10, 10, 120, 60);      // Rechteck
ctx.fillStyle = "#FF0000";
ctx.fillRect(90, 35, 80, 50);       // noch eins
</script>

Der Ablauf ist immer gleich: Element holen, mit getContext("2d") den Zeichenkontext anfordern, dann Befehle absetzen. Der Kontext arbeitet wie ein Stift mit Gedächtnis: Du stellst Farbe und Strich ein und alles Folgende benutzt diese Einstellng.

width und height: hier bitte im HTML

Eine Eigenheit die jeder einmal schmerzhaft lernt: Die Größe der Zeichenfläche gehört in die HTML-Attribute width und height. Wer sie stattdessen per CSS setzt, skaliert nur die Anzeige der (standardmäßig 300 mal 150 Pixel großen) Fläche, und alles wird matschig verzerrt wie ein hochgezoomtes Bitmap.

canvas, SVG oder img?

• Fertiges Bild anzeigen: img, keine Frage.
• Logos, Icons, skalierbare Grafiken: SVG. Das bleibt in jeder Größe scharf und die Formen sind einzeln ansprechbar.
• Viele Objekte, schnelle Animationen, Pixelzugriff: canvas. Es rendert stur Pixel und ist dabei sehr schnell, vergisst aber alles über die gezeichneten Formen.

Barrierefreiheit nicht vergessen

Für Hilfstechnik ist ein canvas erstmal ein schwarzes Loch, sie sieht nur Pixel. Der Fallback-Text im Inneren hilft alten Browsern, ersetzt aber keine echte Alternative. Wer Daten als Canvas-Diagramm zeigt, stellt dieselben Daten zusätzlich als Tabelle oder Text bereit. Das ist kein Zusatzaufwand für Spezialfälle, sondern gehört zum Diagramm dazuu.

Ein zweites Beispiel: Zeichnen mit Daten

Die Paradedisziplin von canvas sind Darstellungen aus Daten, hier ein Mini-Balkendiagramm, das komplette Skript:

const c = document.querySelector("canvas").getContext("2d");
const werte = [12, 28, 19, 34];
c.fillStyle = "teal";
werte.forEach((w, i) => {
    c.fillRect(20 + i * 40, 100 - w * 2, 30, w * 2);
});

Vier Werte, eine Schleife, fertig ist die Grafik: Für jeden Wert malt fillRect ein Rechteck, dessen Höhe vom Wert abhängt. Genau nach diesem Prinzip arbeiten die großen Diagramm-Bibliotheken, nur mit sehr viel mehr Komfort drumherumm.

Wann canvas die falsche Wahl ist

So mächtig die Zeichenfläche ist, für vieles gibt es bessere Werkzeuge: Text gehört in HTML (canvas-Text ist nicht markierbar, nicht durchsuchbar, nicht vorlesbar), Formen und Icons oft besser in SVG (das skaliert verlustfrei und bleibt als Elemente ansprechbar), und schlichte Balken wie oben könnte man sogar aus gestylten divs bauen. Die Faustregel: canvas glänzt bei vielen, sich schnell ändernden Pixeln, also bei Spielen, Simulationen und Bildbearbeitung. Bei allem Statischen lohnt vorher der Blick auf die Alternativenn.

Verwandt: img · video · Spielwiese