Komplexe Grafikobjekte mit Canvas zeichnen

In der Dokumentation des W3C zum Canvas-Objekt wird zwischen einfachen grafischen Objekten, Text und komplexen grafischen Objekten unterschieden. Zu den einfachen grafischen Objekten werden nur die Rechtecke gezählt. Die komplexen grafischen Objekte sind:

Diesen sogenannten Pfadobjekten ist gemeinsam, dass der Ablauf des JavaScript immer die gleiche Grundstruktur aufweist, nämlich:

 //Pfad öffnen
context.beginPath();
// dann die einzelnen Pfadanweisungen
...
...
// Pfad schließen, ist optional
context.closePath();
// noch Füllen, sonst ist nichts zu sehen
context.fill();
// und / oder Umriss zeichnen
context.stroke();

Man sieht hier, dass die Grundelemente für das Zeichnen von Pfaden in einem Canvas-Objekt die Befehle beginPath() und closePath() sind und dass ein Pfadobjekt mit fill() oder stroke() gefüllt oder als Umriss gezeichnet wird.

Weitere Einzelheiten wie das Setzen von Farben und Stilen für Linien und Füllungen sowie das kombinieren von Objekten werden auf den einzelnen Beispielseiten behandelt.