Zeichenkontext

April 2023

Unser Zeichenwerkzeug

Unsere Grafik wird zwar auf der Fläche der Canvas erscheinen, aber wir sollten nicht vergessen, dass unser Zeichenkontext, mit dem wir arbeiten, ein CanvasRenderingContext2D-Objekt ist. Die Methoden dieses Objekts sind unser eigentliches Zeichenwerkzeug.
Empfehlung: eine Referenz zu CanvasRenderingContext2D im zweiten Browserfenster offen haben, um Dateils nachzulesen. Hier die Seite im MDN.

Koordinatensystem

Wie in den meisten vergleichbaren Systemen entspricht das Koordinatensystem dem 4.Quadranten eines kartesischen Koordinatensystems. Das heißt, der Nullpunkt ist exakt die linke, obere Ecke der Canvas.
Die waagerechte X-Achse zeigt nach rechts und die senkrechte Y-Achse nach unten.
Alle Koordinaten werden als Pixel interpretiert.
Beispiel: Ein Punkt auf der Postion x=10 und y=30 ist ein Punkt auf der Canvas, der sich 10 Pixel rechts von linken Rand befindet und 30 Pixel tiefer als die obere Kante.
Im folgenden werden die verwendeten Grafikanweisungen und die im Browser angezeigte Grafik nebeneinander dargestellt. Die Bilder sind Screenshots, aber anhand der beigefügten Beispieldateien sind alle Vorgänge im Browser nachvollziehbar.
Selbst mitprogrammieren dauert länger, hätte aber einen deutlich höheren Lerneffekt.
Hier ist ein HTML-Dokument, das den Grundaufbau aller Beispiele beinhaltet.

Erster Versuch

In unserem Beispiel haben wir den Zeichenkontext der Variablen Ctx2d zugewiesen. Als erste Grafik zeichnen wir einen Kreis mit der Methode arc(). 
arc ( Startpunkt_X-Position,
      Startpunkt_Y-Position,
      Radius,
      Start-Winkel,
      Ende-Winkel,
      Entgegen_dem_Uhrzeigersinn_zeichnen );

Ctx2d.arc(60, 60, 35, 0, 2 * Math.PI, false);
Wie Sie sehen, sehen Sie nichts.

Figur darstellen (rendern)

Das liegt daran, dass die gezeichnete Figur nicht sofort dargestellt (gerendert) wird. Es gibt zwei Methoden zum Rendern: stroke() und fill(). Wir ergänzen mit der Methode stroke(). 
Ctx2d.arc(60, 60, 35, 0, 2 * Math.PI, false);
Ctx2d.stroke();
Und schon ist der Kreis zu sehen.
Verwenden wir stattdessen fill(), wird ein gefüllter Kreis dargestellt. 
Ctx2d.arc(60, 60, 35, 0, 2 * Math.PI, false);
Ctx2d.fill();

Styling und Farben

Bevor gerendert wird, kann man Stil und Farben ändern, und zwar getrennt für stroke() und fill(). Alle Methoden und Eigenschaften für Stil und Farbe gehören zum Zeichenkontext. Wir ändern die Farben zum Füllen mit der Eigenschaft fillStyle. Dieser Eigenschaft kann man eine Farbe zuweisen, und zwar in allen Schreibweisen, die in CSS gelten. Aber als Zeichenkette, also in Quotes setzen! 
Ctx2d.arc(60, 60, 35, 0, 2 * Math.PI, false);
Ctx2d.fillStyle = '#cccc00'; // dunkles Gelb
Ctx2d.fill();
Bei Linien kann man mit der Eigenschaft lineWidth die Linienstärke in Pixeln einstellen, die Linienfarbe mit strokeStyle. 
Ctx2d.arc(60, 60, 35, 0, 2 * Math.PI, false);
Ctx2d.lineWidth = 3;
Ctx2d.strokeStyle = 'blue';
Ctx2d.stroke();
Die Rendermethoden stroke() und style() und deren Einstellungen schließen sich nicht aus, man beide Verfahren nacheinander anwenden. Dann erhalten wir einen gefüllten Kreis mit einem andersfarbigen Rand. 
Ctx2d.arc(60, 60, 35, 0, 2 * Math.PI, false);
Ctx2d.fillStyle = '#cccc00';
Ctx2d.fill();
Ctx2d.lineWidth = 3;
Ctx2d.strokeStyle = 'blue';
Ctx2d.stroke();
Das ganze Dokument mit allen Anweisungen können Sie hier ansehen oder downloaden, um die Beispiele nachzuvollziehen oder eigene Experimente anzustellen.

Stylen spätestens vorm Rendern

Vielleicht ist aufgefallen, dass die Style-Anweisungen im Listing nach arc() zum Erstellen des Kreises stehen und nicht davor, wie man es intuitiv machen würde.
Selbstverständlich kann man die Einstellungen vor dem Erstellen der Figur notieren, aber wirklich gezeichnet wird ja erst bei stroke() oder fill(). Die gewünschten Einstellungen müssen also spätestens vor den Rendermethoden notiert werden.