Zeichnen mit Canvas

Mit der Einführung von HTML5 im Jahr 2014 hielt auch das HTML5-Element <CANVAS> Einzug. Die Verwendung von Canvas ist also eine noch relativ junge Technologie. Canvas ermöglichen es dem Web-Entwickler direkt innerhalb des Browsers mit nativen Befehlen zu zeichnen. Canvas benötigen keine zusätzlichen Plugins (wie z.B. Adobe Flash o.ä.), sondern können direkt on-the-fly im Browser des Users gezeichnet werden.

Um mit einem Canvas-Objekt arbeiten zu können, benötigen wir zunächst ein im HTML5-Kontext definiertes Canvas-Element. Das Canvas-Element verhält sich ähnlich wie ein <img>-Element, jedoch enthält es keine src-Eigenschaft. Und zusätzlich benötigt es zwingend einen geschlossenen End-Tag. Die Attribute width und height sind optional. Werden sie nicht definiert, hat das Canvas eine Default-Größe von 300x300 Pixel. Ein ID-Attribut ist nötig, damit wir das Canvas später ansprechen können.

Das Canvas-Element kann via CSS wie jedes <img>-Element über Margin, Border, etc. gestyled werden. Es empfiehlt sich für nicht kompatible Browser ein Fallback-Image zu hinterlegen. Dieses Image wird einfach zwischen den beiden Canvas-Tags abgelegt.

In einem Canvas wird über JavaScript-Funktionen gezeichnet. Dazu benötige wird den Canvas-Kontext. Diesen holen wir uns mit folgendem Code:

Eine gute Möglichkeit mit dem Canvas zeichnen zu beginnen ist es, Rechtecke zu zeichnen. Rechtecke werden mit den Parametern x,y Koordinaten angegeben und den Seitenlängen. Also insgesamt vier Parameter. Zudem muss eine Füllfarbe festgelegt werden. Diese ist standardmäßig schwarz. Das Rechteck ist die einzige primitive Form, die Canvas unterstützen. Alles andere muss aus "Paths" und den Rechtecken zusammengebaut werden.

Gezeichnet wird weiterhin auf dem 2d-Kontext, welchen wir vorher vom Canvas-Element erzeugt haben. Dies resultiert in folgendem Code, wobei color ein Hex-Code ist, alternativ aber auch per RGN-String("rgb(200,0,0)";) angegeben werden kann. Zusätzlich ist auch die Angabe eines Alpha-Kanals möglich. X,Y entsprechen den Koordinaten im Canvas, wo der Startpunkt des Rechtecks gesetzt wird.

Im folgenden Canvas ist eine Demo untergebracht. Ein Klick darauf zeichnet ein Rechteck mit zufälliger Farbe an die Position des Mauszeigers.

Bitte in das Canvas klicken

Ein Rechtsklick auf das Canvas verdeutlicht, dass das Canvas-Element ein Image ist. Es kann als Bilddatei abgespeichert werden.

Ein Path (Pfad) ist die zweite primitive Form, die ein Canvas anbietet. Mit den Pfaden können innerhalb eines Canvas Linien gezeichnet werden. Dieses Zeichnen besteht aus einer Kette von Befehlen. Diese Beginnt initial mit der Aufforderung die Pfadzeichnung zu beginnen. Danach wird der Zeichenpunkt auf einen Startpunkt mit X und Y Koordinaten innerhalb des Canvas verschoben. Darauf wird das Ziel mit lineTo festgelegt. Auch hierbei werden wieder Koordinaten in X und Y Form verwendet. Der Befehl lineTo kann beliebig oft hintereinander verwendet werden. Damit kann dann nicht nur eine Linie, sondern als Kombination ein kompletter Pfad beschrieben werden. Wenn die Beschreibung vollständig ist, wird der Pfad mit stroke geplottet.

Im folgenden Canvas ist eine Demo untergebracht. Ein Klick darauf zeichnet einen Pfad mit zufälliger Farbe an die Position des Mauszeigers von der Position des letzten Pfades.

Bitte in das Canvas klicken

Der Pfad kann weiter mit verschiedenen Attributen beschrieben werden. Diese können nach jeder lineTo erneut verändert werden und wirken sich dann auf die nachfolgende Beschreibung aus.
Der strokeStyle beschreibt die Farbe des Pfades. Dieses kann ein Hex-Code oder eine RGB-Code sein.
Die lineWidth nimmt einen Integer-Wert entgegen und beschreibt die Dicke der gezeichneten Linie.
Das lineCap beschreibt, wie das Ende eine Linie dargestellt wird. Es sind die Stringwerte "butt","round","square" gültig, wobei "round" zum Beispiel für abgerundet steht.