Das canvas-Element: Malen mit JavaScript
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.
Verwandt: img · video · Spielwiese