HTML: Mit canvas Zeichenflächen für JavaScript erstellen
IONOS Redaktion6 mins
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.
- 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>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>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");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>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>- Inklusive Wildcard-SSL-Zertifikat
- Inklusive Domain Lock
- Inklusive 2 GB E-Mail-Postfach
