CanvasRenderingContext2D.lineTo() — Methode · JavaScript-Referenz

Signatur

CanvasRenderingContext2D.prototype.lineTo(x, y)

Beschreibung

lineTo() ist eine der grundlegenden Pfadmethoden der Canvas 2D API. Die Methode verbindet den letzten Punkt des aktuellen Unterpfads mit dem Punkt (x, y) durch eine gerade Linie. Danach ist (x, y) der neue aktuelle Punkt, an dem der nächste Pfadbefehl weitermacht.

Wichtig: lineTo() zeichnet nichts sichtbar. Die Methode erweitert nur den Pfad. Zu sehen ist die Linie erst, wenn du stroke() für eine Kontur oder fill() für eine gefüllte Fläche aufrufst. Typischerweise beginnst du einen Pfad mit beginPath(), legst den Startpunkt mit moveTo() fest und reihst dann beliebig viele lineTo()-Aufrufe aneinander.

Einsatzgebiete sind Polygone, Liniendiagramme, Achsen, Pfeile, Gitter und Freihandzeichnungen. Mit closePath() schließt du eine Form, indem eine Linie zurück zum Startpunkt des Unterpfads gezogen wird. Wie die Linie aussieht, bestimmen Eigenschaften wie lineWidth, strokeStyle, lineCap und lineJoin. Maßgeblich sind die Werte zum Zeitpunkt von stroke(), nicht die beim Aufruf von lineTo().

Parameter

Name	Typ	Default	Beschreibung
$x Pflicht	number		x-Koordinate des Endpunkts der Linie. Sie wird in Canvas-Pixeln angegeben und durch die aktuelle Transformationsmatrix umgerechnet.
$y Pflicht	number		y-Koordinate des Endpunkts der Linie. Die y-Achse zeigt nach unten, `0` ist also der obere Rand.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined). Die Methode ändert nur den aktuellen Pfad des Kontexts.

Beispiele

Einfache Linie zeichnen

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(20, 20);    // Startpunkt
ctx.lineTo(200, 100);  // Linie zum Endpunkt
ctx.strokeStyle = '#1e88e5';
ctx.lineWidth = 3;
ctx.stroke();          // erst jetzt wird gezeichnet

Gefülltes Dreieck mit closePath()

const ctx = document.querySelector('canvas').getContext('2d');

ctx.beginPath();
ctx.moveTo(100, 20);
ctx.lineTo(180, 160);
ctx.lineTo(20, 160);
ctx.closePath();       // Linie zurück zu (100, 20)

ctx.fillStyle = 'gold';
ctx.fill();
ctx.lineJoin = 'round';
ctx.lineWidth = 4;
ctx.stroke();

Liniendiagramm aus Messwerten

const ctx = document.querySelector('canvas').getContext('2d');
const werte = [12, 45, 30, 70, 55, 90, 65];
const { width, height } = ctx.canvas;
const schritt = width / (werte.length - 1);
const max = Math.max(...werte);

const toY = (v) => height - (v / max) * (height - 10);

ctx.beginPath();
werte.forEach((wert, i) => {
  const x = i * schritt;
  const y = toY(wert);
  // Erster Punkt: moveTo, danach lineTo
  i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
});
ctx.strokeStyle = 'crimson';
ctx.lineWidth = 2;
ctx.stroke();

Scharfe 1-px-Linie per Halbpixel-Versatz

const ctx = document.querySelector('canvas').getContext('2d');

ctx.lineWidth = 1;
ctx.beginPath();
// Um 0,5 versetzt, damit die Linie genau auf einer Pixelreihe liegt
ctx.moveTo(10, 50.5);
ctx.lineTo(290, 50.5);
ctx.stroke();

// Wichtig · Fallstricke

Ohne stroke() oder fill() ist nichts zu sehen. lineTo() erweitert nur den Pfad.
beginPath() nicht vergessen: Fehlt der Aufruf, sammeln sich alle früheren Pfadsegmente an. Jedes stroke() zeichnet sie dann erneut, oft in der aktuellen Farbe, und wird mit der Zeit langsamer.
Gibt es noch keinen Unterpfad, etwa direkt nach beginPath() ohne moveTo(), verhält sich der erste lineTo()-Aufruf wie moveTo(). Es wird also keine Linie erzeugt.
Ist x oder y NaN oder Infinity, wird der Aufruf stillschweigend ignoriert. Es gibt keine Fehlermeldung.
1-px-Linien auf ganzzahligen Koordinaten wirken unscharf, weil sie auf zwei Pixel verteilt werden. Abhilfe schafft ein Versatz um 0.5. Auf hochauflösenden Displays solltest du außerdem devicePixelRatio berücksichtigen.
Die Koordinaten werden durch die aktuelle Transformation umgerechnet (translate(), scale(), rotate()).
Dieselbe Methode gibt es auch bei Path2D und OffscreenCanvasRenderingContext2D. Letzterer funktioniert auch in Web Workern. Alle modernen Browser unterstützen lineTo().

Siehe auch

CanvasRenderingContext2D.moveTo() CanvasRenderingContext2D.beginPath() CanvasRenderingContext2D.closePath() CanvasRenderingContext2D.stroke() CanvasRenderingContext2D.fill() CanvasRenderingContext2D.bezierCurveTo() CanvasRenderingContext2D.lineWidth Path2D