Javascript Canvas: moveTo, lineTo, path

Canvas Rect

Die einfachste aller Formen

<canvas id="rect" width="600" height="240"></canvas>

let canvas = document.querySelector("#rect");
let ctx = canvas.getContext("2d");
ctx.strokeStyle = "#749CB2";
ctx.lineWidth = 8;
ctx.beginPath();
          +-- dx
          |   +-- dy
          |   |   +-- Breite
          |   |   |    +-- Höhe 
          |   |   |    |
ctx.rect(40, 20, 300, 150);
ctx.stroke();

Ein Canvas hat seinen Nullpunkt oben links.

Canvas Linien: Path

lineTo (x,y) gibt die Koordinaten der folgenden Punkte und erzeugt jeweils eine Linie vom Ausgangspunkt zum neuen Endpunkt.
Am Ende zeichnet stroke () die Kontur des Pfades.

Jeder Canvas kann immer nur einen aktiven Pfad haben.

ctx.beginPath();
ctx.moveTo(20, 180); // Feder zum Startpunkt
ctx.lineTo(40, 20); ctx.lineTo(140, 60); ctx.lineTo(180, 180);
ctx.stroke();

closePath () schließt den Pfad (2. Pfad, closePath wird vor stroke () aufgerufen) und erzeugt dabei eine Linie vom Ausgangspunkt zum initialen Startpunkt des Pfades.

ctx.beginPath();
ctx.moveTo(220, 180); // Feder zum Startpunkt
ctx.lineTo(240, 20); ctx.lineTo(340, 60); ctx.lineTo(380, 180);
ctx.closePath();
ctx.stroke();

Der Pfad im Canvas muss nicht geschlossen werden, um den Pfad zu füllen. Aber fill () wird vor stroke () aufgerufen.

ctx.beginPath();
ctx.moveTo(420, 180); // Feder zum Startpunkt
ctx.lineTo(440, 20); ctx.lineTo(540, 60); ctx.lineTo(580, 180);
ctx.fill();
ctx.stroke();

Der Stroke – die Umrandung von Flächen oder Linien – auf den Canvas ist immer eine solide Linie. Gepunktete oder gestrichtelte Linien (dashed oder dotted) sind für den Javascript Canvas nicht vorgesehen.

Bézierkurven und quadratische Kurven

Wer mit Illustrator, Photoshop, SVG oder Inkscape Freisteller oder Grafiken erstellt, kennt Bezierkurven (die Feder in Photoshop). Pfade bestehen aus Linien, die an Knotenpunkte eine Biegung definieren und dabei von Knoten zu Knoten miteinander verbunden sind.

Mit stroke () zeichnet Javascript die Kontur des Pfades; fill () füllt den Pfad im Canvas.

• Bézierkurven haben zwei Kontrollpunkte, um die Kurve festzulegen.
• Quadratische Kurven haben einen Startpunkt und einen Kontrollpunkt am Endpunkt.

bezierCurveTo (cx1, cy1, cx2, cy2, end1, end2)

Zeichent eine Bézierlinie vom Ausgangspunkt der Feder mit zwei Kontrollpunkten an (cx1,cy1) und (cx2,cy2) am Endpunkt (end1,end2)

quadraticCurveTo (cx, cy, x, y)

Zeichnet eine quadratische Kurve am Ausgangpunkt mit einem Kontrollpunkt (cx,cy) am Endpunkt (x,y)

ctx.beginPath();
ctx.moveTo(50,120);
ctx.bezierCurveTo(50,20,200,20,200,70);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(220,120);
ctx.quadraticCurveTo(220,20,380,70);

Die hellgrauen Linien zeigen die Kontrollpunkte an.

Canvas Path mit SVG Path

Chrome, Safari und Firefox erzeugen mit dem Path2D-API Pfade auf der Basis von SVG-Pfaden. Das erleichtert das Zeichnen von komplexen Pfaden im Canvas, denn für SVG können wir Grafik-Programme wie Inkscape und Adobe Illustrator einsetzen.

IE11 gibt des SVG-Pfad keine Chance. Vielleicht hilft parseSVGPathData auf Github.

let canvas = document.getElementById('svg-canvas');
let ctx = canvas.getContext('2d');
ctx.strokeStyle = '#ccc';
ctx.lineWidth = 1;
ctx.fillStyle = '#524357';

// <path d="M 99,27 L 130.8,38.5 l 20,-3.84 l 10,-14 l 10.8,14.69 l -23.4,66 z" />
let p0 = new Path2D ("M 99,27 L 130.8,38.5 l 20,-3.8 l 10,-14 l 10.8,14.7 l -23.4,66 z");
ctx.stroke(p0);
ctx.fill(p0);
ctx.fillStyle = '#342637';

Dabei sind Pfade aus SVG eigentlich ganz einfach in Canvas-Pfade zu übersetzen.

Grafik Pfade mit großem M und großen C (Bezier) oder großen L (Line) ausgeben lassen. In Inkscape dazu Pfad-Ausgabe auf Absolut, ausgeben als Normales Inkscape

M 964.8,262.5 L 1158,315 L 1206,396 L 1126,547 L 915,560 L 1013,723 L 1073,686 L 1072,635 L 1175,630

Wertepaar nach M übersetzen in moveTo(964.8,262.5), alle L-Paare übersetzen in lineTo(1158,315.5)

M 940,350 C 936,342 934,319 956,308 C 974,299 989,308 996,326

Wertepaar nach M übersetzen in moveTo(964.8,262.5), alle drei C-Paare übersetzen in ctx.bezierCurveTo( 936,342, 934,319, 956,308) – zusätzliches Komma nach jedem Wertepaar!