Alle Methoden sind Methoden, des Zeichenkontextes, aber die elementaren Zeichenmethoden bearbeiten den aktuellen Pfad. Für dessen Beendigung müssen wir auch selbst sorgen müssen, indem wir mit beginPath() einen neuen aktiven Pfad eröffnen.

Mit dem neueren Path2D-Interface brauchen wir darum nicht mehr kümmern, denn ein Path2D-Objekt kapselt einen Pfad. So erstellt man ein Path2D-Objekt:

let myPath = new Path2D();

Das Objekt besitzt die gleichen elementaren Zeichenmethoden, wie wir sie vom Zeichenkontext zur Bearbeitung des aktiven Pfads kennen. Und so muss man, um z.B. einen Kreis zu zeichnen, nichts Neues lernen:

mypath.arc(150, 70, 36, 0, 2 * Math.PI, false);

Der Pfad ist jetzt nur in diesem Objekt vollständig definiert, auf der Canvas wird (noch) nichts abgebildet. Man nun Farben und Styling im Zeichenkontext wir gewohnt einstellen.

Was ist nun noch zu tun? Eigentlich nur den Pfad in der Canvas abbilden, mit stroke() oder fill(). Diesen Methoden übergibt man das Path2D-Objekt als Argument, und damit wird der Pfad in der Canvas sichtbar. So kann man beliebige viele Pfade als Path2D-Objekte vorbereiten und an gewünschter Stelle im Programmablauf rendern. Hier ein Beispiel:

// Pfadobjekt erstellen und Figur zeichnen let pathOne = new Path2D(); pathOne.arc(50, 50, 36, 0, 2 * Math.PI, false); let pathTwo = new Path2D(); // zweites Pfadobjekt pathTwo.arc(150, 70, 36, 0, 2 * Math.PI, false); // ersten Pfad rendern, Stil und Farbe voreingestellt Ctx2d.fill(pathOne); Ctx2d.strokeStyle = '#00c'; // Farbe für zweiten Pfad Ctx2d.lineWidth = 3; // Liniendicke für zweiten Pfad Ctx2d.stroke(pathTwo); // zweiten Pfad rendern

Das Beispiel zu Path2D hier zum Anschauen.