Javascript Canvas: path, arc, text

Canvas Pfade, Kurven und Kreisbögen mit Javascript

Ein Pfad im Canvas beginnt mit beginPath () gefolgt von moveTo (x,y), um den Ausgangspunkt des Pfads zu setzen. Verbindungen von Punkt zu Punkt mit lineTo (), arcTo (), quadraticCurveTo () und bezierCurveTo () führen den Pfad weiter, bis er mit stroke gezeichnet oder mit fill gefüllt wird.

Canvas Rect

Die einfachste aller Formen

HTML
<canvas id="rect" width="600" height="240"></canvas>
Javascript
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 Arc: Kreise und Bögen

Bögen oder Arcs sind Teile eines Kreises:

                            +-- true, wenn der Bogen 
                            |   gegen den Uhrzeiger gezeichnet wird
arc (x,  y,  r,  sA,  eA,  aC)
     |   |   |    |   | 
     |   |   |    |   +-- Endwinkel
     |   |   |    | 
     |   |   |    +-- Anfänglicher Winkel
     |   |   |
     +---+   +-- Radius
       |
       Ursprung des Bogens
arc (x, y, r, sA, eA, aC)
fügt dem aktuellen Pfad einen Bogen an Position (x,y) hinzu
arcTo (x1, y1, x2, y2, r)
fügt dem aktuellen Pfad an der Position der Feder einen Bogen mit mit Radius r hinzu
closePath()
schließt den aktuellen Zeichenpfad

Winkel für HTML5 Canvas werden als Radiant, nicht in Grad angegeben. Radiant ist der Standard für das Winkelmaß in weiten Bereichen der Mathematik. Ein Bogenmaß in Radiant entspricht der Länge des Radius abgetragen auf dem Kreisbogen.

Grad in Radiant umrechnen

let rad = (Math.PI / 180) * degrees;
360° = 2 π rad

1rad= 360° 2 π = 180° π 57,29577951°

= 2 π360 rad = π180rad 0,017453293 rad
Canvas Arc und Math PI
if (canvas && canvas.getContext) {
    let ctx = canvas.getContext("2d");
    if (ctx) {  
        ctx.fillStyle = "hsla(68,80%,60%,0.3)";
        ctx.strokeStyle = "hsla(30,80%,60%,0.9)";
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.arc (150, 150, 100, (2)*Math.PI, (1/3)*Math.PI, false);
        ctx.stroke();
        ctx.lineTo(150, 150); ctx.stroke(); ctx.fill();
        ctx.closePath();ctx.stroke();

        ctx.beginPath();
        ctx.arc (450, 150, 100, (2)*Math.PI, (1/3)*Math.PI, true);
        …
    }
}
Kleine Tabelle Radiant zu Grad
rad rad Grad (°)
0 rad 0 rad
π/6 0.5235987756 30°
π/4 0.7853981634 45°
π/3 1.0471975512 60°
π/2 1.5707963268 90°
2π/3 2.0943951024 120°
3π/4 2.3561944902 135°
5π/6 2.6179938780 150°
π 3.1415926536 180°
3π/2 4.7123889804 270°
6.2831853072 360°

Tortengrafik mit Canvas

array.reduce() extrahiert Werte aus einem Array ([0,1,2,3,4].reduce(function(previousValue, currentValue, index, array){ return previousValue + currentValue; });).

let results = [
  {name: "Sehr zufrieden", count: 110, color: "hsl(150,60%,80%)"},
  {name: "Zufrieden", count: 300, color: "hsl(200,60%,80%)"},
  {name: "Neutral", count: 200, color: "hsl(250,60%,80%)"},
  {name: "Unzufrieden", count: 150, color: "hsl(300,60%,80%)"}
];

  let cx = document.querySelector(".arc").getContext("2d");
  let total = results.reduce(function(sum, choice) {
    return sum + choice.count;
  }, 0);

  let currentAngle = -0.5 * Math.PI;
  results.forEach(function(result) {
    let sliceAngle = (result.count / total) * 2 * Math.PI;
    cx.beginPath();
    cx.arc(100, 100, 100,
           currentAngle, currentAngle + sliceAngle);
    currentAngle += sliceAngle;
    cx.lineTo(100, 100);
    cx.fillStyle = result.color;
    cx.fill();
  });

Canvas: Text zeichnen

Ein Text, der mit Javascript in ein HTML5 Canvas gezeichnet wird, kann nicht durch CSS aufbereitet werden und ist für Screenreader und Suchmaschinen nicht lesbar. Text wird zu Pixeln wie jede andere Form.

Text-Aktionen
Beschreibung
font
Schrift festlegen – und zwar genauso wie mit CSS. Default Schriftgröße ist 10px
textAlign
start (default), end, left, right, center
textBaseline
top, hanging, middle, alphabetic, ideographic, bottom
fillText(txt, x, y, [maxW])
Text als String rendern, wobei x, y nicht breiter als maxW werden dürfen
strokeText(txt, x, y, [maxW])
Text als String rendern, wobei x, y nicht breiter als maxW werden dürfen
measureText(text)
Gibt die Metrik der aktuellen Schrifteinstellung zurück
// Text mit Kontur
let myString = "Text in einem Canvas ist nicht barrierefrei";
ctx.fillText(myString, 20,20);
ctx.font = "20px Verdana"
ctx.fillStyle = "#FFDFE0";
ctx.strokeStyle = "#CF9C9E";
ctx.fillText(theString, 20,160);						
ctx.strokeText(theString, 20,160);

Canvas Path mit SVG Path

Chrome, Safari und Firefox erzeugen mit dem Path2D-API Pfade auf der Basis von SVG-Pfaden. Das würde das Zeichnen von komplexen Pfaden im Canvas erleichtern, denn für SVG können wir Grafik-Programme wie Inkscape und Adobe Illustrator einsetzen. Aber Microsoft Edge unterstützt SVG Path-Daten im Constructor nicht, trotz gegenteiliger Behauptungen im PLattform-Status.

In Edge bleibt der Kasten also genauso leer wie in IE11. 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';

let p0 = new Path2D ("m98.82 26.62l-65.6 90.88 42.94-9.6z");
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

Pfad aus SVG
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)

Bezier aus SVG
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!

CANVAS 1.0 Π 0 Π 1.5 Π 0.5 Π Anfangswinkel Endwinkel