Verwendung des <canvas>-Elements

Mit dem HTML-Element <canvas> können Sie direkt im Browser mit JavaScript Grafiken rendern. Es eignet sich für Spiele, Animationen, Visualisierungen und andere dynamische Inhalte.

Grundlegende Einrichtung

Ein <canvas> ist einfach zu erstellen. Sie legen eine Breite und Höhe fest und optional ein Stilattribut wie z. B. einen Rahmen.

Den Zeichenkontext abrufen

Zum Zeichnen auf dem Canvas müssen Sie zunächst den Zeichenkontext abrufen – meist den '2d'-Kontext, über die Methode getContext('2d').

Ein Rechteck zeichnen

Verwenden Sie die Methode fillRect(x, y, Breite, Höhe), um ein Rechteck zu zeichnen. Die Eigenschaft fillStyle bestimmt die Farbe.

Eine Linie zeichnen

Zum Zeichnen von Linien verwenden Sie beginPath(), moveTo(), lineTo() und stroke(). Diese Methoden erzeugen gerade Linien zwischen Punkten.

Einen Kreis zeichnen

Verwenden Sie die Methode arc(), um Kreise zu zeichnen. Die Parameter beinhalten Mittelpunktkoordinaten, Radius sowie Start- und Endwinkel im Bogenmaß.

Text rendern

Mit fillText() können Sie Text auf dem Canvas darstellen. Die Schriftart und Farbe werden über font und fillStyle definiert.

Einfache Animation

Für Animationen verwenden Sie requestAnimationFrame(). Löschen Sie den vorherigen Frame mit clearRect() und zeichnen Sie neu. So entstehen bewegte Objekte.