# HTML: Mit canvas Zeichenflächen für JavaScript erstellen Mit dem HTML-Element `` 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 ``-Tags legen Sie dann den gewünschten Inhalt fest. ## Was ist das HTML-``-Tag? HTML `` ist ein Element, das eine Zeichenfläche zur Verfügung stellt, in der Sie mit [JavaScript](https://www.ionos.de/digitalguide/websites/web-entwicklung/javascript-in-html-einbinden/) **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](https://www.ionos.de/digitalguide/websites/web-entwicklung/html-tags/) in jedem Bereich eines [HTML](https://www.ionos.de/digitalguide/websites/web-entwicklung/was-ist-html/)-Dokuments hinterlegt werden. Der Inhalt dieser „Leinwand“ (die deutsche Übersetzung von *canvas*) ist kein eigentlicher Bestandteil einer Webseite, sodass eine Anwendung von [CSS](https://www.ionos.de/digitalguide/websites/webdesign/css-lernen-leicht-gemacht/) oder anderen HTML-Elementen nicht möglich ist. Wird HTML `` von einem Browser nicht unterstützt, wird der Inhalt daher als Fallback angezeigt. Moderne Browser unterstützen das Element allerdings nativ. ## HTML-``-Tag: Die Syntax Das HTML-``-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: ```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 `` 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: ```html

Beispiel für HTML canvas

``` Mehr als eine bloße freie Fläche erhalten Sie auf diese Weise allerdings nicht. Nur mit JavaScript können Sie das erzeugte HTML-``-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 ``-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: ```html const BeispielCanvas = document.getElementById("BeispielCanvas"); const ctx = BeispielCanvas.getContext("2d"); ``` Nun sind alle Vorbereitungen getroffen, um das HTML-``-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: ```html

Beispiel für HTML canvas

``` ## Wofüt kann HTML `` genutzt werden? Während wir in unserem Beispiel von oben lediglich ein einfaches Rechteck aufgezogen haben, können Sie mit dem ``-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-``-Tags umsetzen. ## Welche Abmessungen darf ein ``-Element haben? Die maximal möglichen Abmessungen für HTML `` 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 `` 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 ``-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 `` ein
`strokeText()` Fügt Text (nur Konturen) ein
### Bild
Methode Beschreibung
`drawImage()` Hinterlegt ein Bild oder Video innerhalb eines HTML-``-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-``-Beispiel mit Text und Farbverlauf Ein paar dieser Methoden nutzen wir nun für unser abschließendes Beispiel. Hierfür erschaffen wir via HTML-``-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: ```html

Beispiel für HTML Canvas mit Text und einem Farbverlauf

Wir nutzen die Methoden strokeText() und gradient

``` This is a markdown version of: [https://www.ionos.de/digitalguide/websites/web-entwicklung/html-canvas/](https://www.ionos.de/digitalguide/websites/web-entwicklung/html-canvas/) for AI/LLM consumption.