Mit dem HTML-Element <canvas> erstellen Sie eine Fläche, die über Ja­va­Script mit Grafiken oder Ani­ma­tio­nen gefüllt werden kann. Dafür wird ein 2D-Kontext-Objekt angelegt. Mit ver­schie­de­nen Methoden für die API des <canvas>-Tags legen Sie dann den ge­wünsch­ten Inhalt fest.

Was ist das HTML-<canvas>-Tag?

HTML <canvas> ist ein Element, das eine Zei­chen­flä­che zur Verfügung stellt, in der Sie mit Ja­va­Script Grafiken oder Ani­ma­tio­nen erzeugen können. Der ver­füg­ba­re Bereich wird dabei durch Höhen- und Brei­ten­an­ga­ben definiert. Die Fläche kann mithilfe des prak­ti­schen HTML-Tags in jedem Bereich eines HTML-Dokuments hin­ter­legt werden.

Der Inhalt dieser „Leinwand“ (die deutsche Über­set­zung von canvas) ist kein ei­gent­li­cher Be­stand­teil einer Webseite, sodass eine Anwendung von CSS oder anderen HTML-Elementen nicht möglich ist. Wird HTML <canvas> von einem Browser nicht un­ter­stützt, wird der Inhalt daher als Fallback angezeigt. Moderne Browser un­ter­stüt­zen das Element al­ler­dings nativ.

Web­hos­ting
Das beste Web­hos­ting zum Spit­zen­preis
  • 3x schneller und 60 % günstiger
  • Maximale Ver­füg­bar­keit mit > 99.99 %
  • Nur bei IONOS: Bis zu 500 GB Spei­cher­platz inklusive

HTML-<canvas>-Tag: Die Syntax

Das HTML-<canvas>-Element selbst stellt keine Werkzeuge zur Ge­stal­tung zur Verfügung, sondern erstellt lediglich den Rahmen, in dem Sie mit Ja­va­Script Grafiken erzeugen können. Die grund­sätz­li­che 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 ge­wünsch­ten Maße zu. Optional können Sie weitere Parameter verwenden, um die Ge­stal­tung der Grafik zu prä­zi­sie­ren.

Die Funk­ti­ons­wei­se 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 al­ler­dings nicht. Nur mit Ja­va­Script 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 hin­ter­legt. Diese kann später in eine PNG-Grafik um­ge­wan­delt werden.

Um das Element zu nutzen, verwenden Sie die Methode getElementById(). Dies funk­tio­niert nur, wenn Sie der <canvas>-Fläche eine ein­deu­ti­ge ID zu­ge­ord­net haben. Möchten Sie in dem fest­ge­leg­ten Bereich malen, zeichnen oder an­der­wei­tig in­ter­agie­ren, müssen Sie ein 2D-Kontext-Objekt erstellen. Das funk­tio­niert für unser Beispiel von oben mit dem folgenden Code:

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

Nun sind alle Vor­be­rei­tun­gen getroffen, um das HTML-<canvas>-Element tat­säch­lich als Leinwand zu nutzen. Mit der Funktion fillRect() können wir nun ein einfaches Rechteck im de­fi­nier­ten Bereich plat­zie­ren. Dieses soll in Petrol (engl. „teal“) gehalten werden und 200 Pixel breit und 150 Pixel hoch sein. Wir plat­zie­ren es 10 Pixel vom linken Rand und 50 Pixel vom oberen Rand entfernt. Der gesamte Code sieht fol­gen­der­ma­ß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 auf­ge­zo­gen haben, können Sie mit dem <canvas>-Element auch deutlich kom­ple­xe­re Dar­stel­lungs­for­men rea­li­sie­ren. Möglich sind unter anderem Kreis­bö­gen, Texte, Trans­pa­ren­zen, Farb­ver­läu­fe und Grafiken in den Formaten GIF, JPEG und PNG. Diese können Sie be­schnei­den, skalieren und beliebig po­si­tio­nie­ren. Über die Zeit­funk­ti­on von Ja­va­Script lassen sich außerdem Ani­ma­tio­nen innerhalb eines HTML-<canvas>-Tags umsetzen.

Welche Ab­mes­sun­gen darf ein <canvas>-Element haben?

Die maximal möglichen Ab­mes­sun­gen 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 al­ler­dings immer am Sei­ten­ver­hält­nis ori­en­tiert, sind die Elemente responsiv und so für ver­schie­de­ne Devices geeignet.

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

Wir haben bereits über die Er­stel­lung eines 2D-Kontext-Objekts ge­schrie­ben. Mit einem solchen via getContext("2d") ein­ge­bun­de­nen Objekt können Sie die <canvas>-Fläche jederzeit füllen. Nach­fol­gend haben wir die wich­tigs­ten Methoden innerhalb der API zu­sam­men­ge­fasst.

Text

Methode Be­schrei­bung
font Legt die Schrift­art für Text­in­hal­te fest
fillText() Fügt Text (voll­stän­dig aus­ge­füllt) im HTML <canvas> ein
strokeText() Fügt Text (nur Konturen) ein

Bild

Methode Be­schrei­bung
drawImage() Hin­ter­legt ein Bild oder Video innerhalb eines HTML-<canvas>-Elements

Zeichnung

Methode Be­schrei­bung
fillRect() Zeichnet ein aus­ge­füll­tes Rechteck
strokeRect() Zeichnet ein leeres Rechteck
clearRect() Bereinigt bestimmte Pixel innerhalb eines Rechtecks

Pfade

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

Ge­stal­tung

Methode Be­schrei­bung
addColorStop() Legt die Farben und Po­si­tio­nen für einen Verlauf fest
createLinearGradient() Erstellt einen geraden Verlauf
createPattern() Wie­der­holt ein Element
shadowBlur Legt die Unschärfe für einen Schatten fest
shadowColor Bestimmt die Farbe eines Schattens

Weitere Funk­tio­nen

Methode Be­schrei­bung
restore() Stellt einen vor­he­ri­gen Stand wieder her
save() Speichert den aktuellen Stand und all seine Attribute

HTML-<canvas>-Beispiel mit Text und Farb­ver­lauf

Ein paar dieser Methoden nutzen wir nun für unser ab­schlie­ßen­des Beispiel. Hierfür er­schaf­fen wir via HTML-<canvas>-Tag zunächst einen Rahmen mit den Maßen 500 x 250 Pixel. Dann erstellen wir ein 2D-Kontext-Objekt. Ab­schlie­ßend fügen wir dort eine Headline ein und einen weiteren Satz, der einen Farb­ver­lauf 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
Re­gis­trie­ren Sie Ihre perfekte Domain
  • Inklusive 1 SSL-Wildcard-Zer­ti­fi­kat pro Vertrag
  • Inklusive Domain Lock
  • Inklusive Domain Connect für einfache DNS-Ein­rich­tung
Zum Hauptmenü