HTML: Mit canvas Zeichenflächen für JavaScript erstellen

Mit dem HTML-Element <canvas> erstellen Sie eine Fläche, die über JavaScript mit Grafiken oder Animationen gefüllt werden kann. Dafür wird ein 2D-Kontext-Objekt angelegt. Mit verschiedenen Methoden für die API des <canvas>-Tags legen Sie dann den gewünschten Inhalt fest.

Was ist das HTML-<canvas>-Tag?

HTML <canvas> ist ein Element, das eine Zeichenfläche zur Verfügung stellt, in der Sie mit JavaScript Grafiken oder Animationen erzeugen können. Der verfügbare Bereich wird dabei durch Höhen- und Breitenangaben definiert. Die Fläche kann mithilfe des praktischen HTML-Tags in jedem Bereich eines HTML-Dokuments hinterlegt werden.

Der Inhalt dieser „Leinwand“ (die deutsche Übersetzung von canvas) ist kein eigentlicher Bestandteil einer Webseite, sodass eine Anwendung von CSS oder anderen HTML-Elementen nicht möglich ist. Wird HTML <canvas> von einem Browser nicht unterstützt, wird der Inhalt daher als Fallback angezeigt. Moderne Browser unterstützen das Element allerdings nativ.

Webhosting
Top-Hosting für Ihre Website
  • Flexibel: Hosting, das jedem Website-Traffic standhält
  • Verlässlich: Inklusive 24/7-Support und persönlicher Beratung
  • Sicher: Kostenloses SSL-Zertifikat, DDoS-Schutz und Backups

HTML-<canvas>-Tag: Die Syntax

Das HTML-<canvas>-Element selbst stellt keine Werkzeuge zur Gestaltung zur Verfügung, sondern erstellt lediglich den Rahmen, in dem Sie mit JavaScript Grafiken erzeugen können. Die grundsätzliche Syntax des Elements liest sich wie folgt:

<canvas id="BeispielCanvas" width="[Wert in Pixeln]" height="[Wert in Pixeln]"></canvas>
html

Sie benennen das Element über id und weisen ihm mit width und height die gewünschten Maße zu. Optional können Sie weitere Parameter verwenden, um die Gestaltung der Grafik zu präzisieren.

Die Funktionsweise von <canvas> an einem einfachen Beispiel erklärt

Mithilfe der obigen Syntax können Sie jederzeit eine einfache Fläche erstellen. In unserem folgenden Beispiel soll diese Fläche eine Länge von 500 Pixeln und eine Höhe von 250 Pixeln haben. Dies ist der passende Code:

<!DOCTYPE html>
<html>
<body>
<h1>Beispiel für HTML canvas</h1>
<canvas id="BeispielCanvas" width="500" height="250" style="border: 1px solid grey"></canvas>
</body>
</html>
html

Mehr als eine bloße freie Fläche erhalten Sie auf diese Weise allerdings nicht. Nur mit JavaScript können Sie das erzeugte HTML-<canvas>-Element mit Formen, Bildern, Texten oder Verläufen füllen und diese Objekte bei Bedarf animieren. Die Inhalte werden in Form von Pixeln in einer Bitmap hinterlegt. Diese kann später in eine PNG-Grafik umgewandelt werden.

Um das Element zu nutzen, verwenden Sie die Methode getElementById(). Dies funktioniert nur, wenn Sie der <canvas>-Fläche eine eindeutige ID zugeordnet haben. Möchten Sie in dem festgelegten Bereich malen, zeichnen oder anderweitig interagieren, müssen Sie ein 2D-Kontext-Objekt erstellen. Das funktioniert für unser Beispiel von oben mit dem folgenden Code:

const BeispielCanvas = document.getElementById("BeispielCanvas");
const ctx = BeispielCanvas.getContext("2d");
html

Nun sind alle Vorbereitungen getroffen, um das HTML-<canvas>-Element tatsächlich als Leinwand zu nutzen. Mit der Funktion fillRect() können wir nun ein einfaches Rechteck im definierten Bereich platzieren. Dieses soll in Petrol (engl. „teal“) gehalten werden und 200 Pixel breit und 150 Pixel hoch sein. Wir platzieren es 10 Pixel vom linken Rand und 50 Pixel vom oberen Rand entfernt. Der gesamte Code sieht folgendermaßen aus:

<!DOCTYPE html>
<html>
<body>
<h1>Beispiel für HTML canvas</h1>
<canvas id="BeispielCanvas" width="500" height="250" style="border:1px solid grey"></canvas>
<script>
const BeispielCanvas = document.getElementById("BeispielCanvas");
const ctx = BeispielCanvas.getContext("2d");
ctx.fillStyle = "teal";
ctx.fillRect(10, 50, 200, 150);
</script>
</body>
</html>
html

Wofüt kann HTML <canvas> genutzt werden?

Während wir in unserem Beispiel von oben lediglich ein einfaches Rechteck aufgezogen haben, können Sie mit dem <canvas>-Element auch deutlich komplexere Darstellungsformen realisieren. Möglich sind unter anderem Kreisbögen, Texte, Transparenzen, Farbverläufe und Grafiken in den Formaten GIF, JPEG und PNG. Diese können Sie beschneiden, skalieren und beliebig positionieren. Über die Zeitfunktion von JavaScript lassen sich außerdem Animationen innerhalb eines HTML-<canvas>-Tags umsetzen.

Welche Abmessungen darf ein <canvas>-Element haben?

Die maximal möglichen Abmessungen für HTML <canvas> variieren je nach Browser und Umgebung. Für iOS beträgt die Grenze zum Beispiel 4096 x 4096 Pixel, während andere Systeme auch Maße von mehr als 10.000 x 10.000 Pixeln erlauben. Da sich die Fläche allerdings immer am Seitenverhältnis orientiert, sind die Elemente responsiv und so für verschiedene Devices geeignet.

Methoden für die API von HTML <canvas> im Überblick

Wir haben bereits über die Erstellung eines 2D-Kontext-Objekts geschrieben. Mit einem solchen via getContext("2d") eingebundenen Objekt können Sie die <canvas>-Fläche jederzeit füllen. Nachfolgend haben wir die wichtigsten Methoden innerhalb der API zusammengefasst.

Text

Methode Beschreibung
font Legt die Schriftart für Textinhalte fest
fillText() Fügt Text (vollständig ausgefüllt) im HTML <canvas> ein
strokeText() Fügt Text (nur Konturen) ein

Bild

Methode Beschreibung
drawImage() Hinterlegt ein Bild oder Video innerhalb eines HTML-<canvas>-Elements

Zeichnung

Methode Beschreibung
fillRect() Zeichnet ein ausgefülltes Rechteck
strokeRect() Zeichnet ein leeres Rechteck
clearRect() Bereinigt bestimmte Pixel innerhalb eines Rechtecks

Pfade

Methode Beschreibung
beginPath() Beginnt einen neuen Pfad
lineTo() Zieht eine Linie zu dem Pfad
moveTo() Bewegt den Pfad zu einem Punkt innerhalb der Leinwand

Gestaltung

Methode Beschreibung
addColorStop() Legt die Farben und Positionen für einen Verlauf fest
createLinearGradient() Erstellt einen geraden Verlauf
createPattern() Wiederholt ein Element
shadowBlur Legt die Unschärfe für einen Schatten fest
shadowColor Bestimmt die Farbe eines Schattens

Weitere Funktionen

Methode Beschreibung
restore() Stellt einen vorherigen Stand wieder her
save() Speichert den aktuellen Stand und all seine Attribute

HTML-<canvas>-Beispiel mit Text und Farbverlauf

Ein paar dieser Methoden nutzen wir nun für unser abschließendes Beispiel. Hierfür erschaffen wir via HTML-<canvas>-Tag zunächst einen Rahmen mit den Maßen 500 x 250 Pixel. Dann erstellen wir ein 2D-Kontext-Objekt. Abschließend fügen wir dort eine Headline ein und einen weiteren Satz, der einen Farbverlauf erhält. Der passende Code dafür sieht aus wie folgt:

<!DOCTYPE html>
<html>
<body>
<h1>Beispiel für HTML Canvas mit Text und einem Farbverlauf</h1>
<h2>Wir nutzen die Methoden strokeText() und gradient</h2>
<canvas id="BeispielCanvas" width="500" height="250" style="border:1px solid grey"></canvas>
<script>
const c = document.getElementById("BeispielCanvas");
const ctx = c.getContext("2d");
ctx.font = "40px Calibri";
ctx.strokeText("Hier steht eine Headline", 20, 50);
ctx.font = "30px Calibri";
var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0", "teal");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "green");
ctx.strokeStyle = gradient;
ctx.strokeText("Hier steht ein weiterer Satz", 20, 90);
</script>
</body>
</html>
html
Domain kaufen
Registrieren Sie Ihre perfekte Domain
  • Inklusive Wildcard-SSL-Zertifikat
  • Inklusive Domain Lock
  • Inklusive 2 GB E-Mail-Postfach
War dieser Artikel hilfreich?