CanvasRenderingContext2D.moveTo() — Methode · JavaScript-Referenz

Signatur

CanvasRenderingContext2D.prototype.moveTo(x, y)

Beschreibung

moveTo() setzt den „Stift“ des Canvas-Pfads an eine neue Position, ohne dabei eine Verbindungslinie zu zeichnen. Damit beginnt ein neuer Unterpfad. Nachfolgende Befehle wie lineTo(), arc(), quadraticCurveTo() oder bezierCurveTo() starten dann an diesem Punkt.

Typischerweise ruft man moveTo() direkt nach beginPath() auf, um den Startpunkt einer Form festzulegen. Innerhalb eines einzigen Pfads kann man moveTo() mehrfach aufrufen, um mehrere getrennte Linien oder Formen zu erzeugen, die anschließend mit einem stroke()- oder fill()-Aufruf gemeinsam gezeichnet werden – das ist deutlich performanter als viele einzelne Pfade.

Die Koordinaten werden durch die aktuelle Transformationsmatrix (translate(), rotate(), scale(), setTransform()) umgerechnet. Der Aufruf selbst zeichnet nichts sichtbar; erst stroke() oder fill() rendert den Pfad.

Parameter

Name	Typ	Default	Beschreibung
$x Pflicht	number		Horizontale Koordinate (x-Achse) des neuen Startpunkts in Canvas-Einheiten.
$y Pflicht	number		Vertikale Koordinate (y-Achse) des neuen Startpunkts in Canvas-Einheiten. Die y-Achse zeigt nach unten.

Beispiele

Einfache Linie zeichnen

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

ctx.beginPath();
ctx.moveTo(20, 20);   // Startpunkt setzen
ctx.lineTo(200, 100); // Linie zum Zielpunkt
ctx.strokeStyle = '#0066cc';
ctx.lineWidth = 3;
ctx.stroke();

Mehrere getrennte Linien in einem Pfad (Raster)

const ctx = document.querySelector('#leinwand').getContext('2d');
const { width, height } = ctx.canvas;
const abstand = 25;

ctx.beginPath();
for (let x = 0.5; x <= width; x += abstand) {
  ctx.moveTo(x, 0);       // neuer Unterpfad, keine Verbindungslinie
  ctx.lineTo(x, height);
}
for (let y = 0.5; y <= height; y += abstand) {
  ctx.moveTo(0, y);
  ctx.lineTo(width, y);
}
ctx.strokeStyle = '#ddd';
ctx.stroke(); // ein einziger Zeichenaufruf für das ganze Raster

Liniendiagramm aus Messwerten

const ctx = document.querySelector('#leinwand').getContext('2d');
const werte = [12, 40, 28, 65, 50, 80];
const schritt = 50;
const basis = 150;

ctx.beginPath();
werte.forEach((wert, i) => {
  const x = 20 + i * schritt;
  const y = basis - wert;
  i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
});
ctx.strokeStyle = 'crimson';
ctx.lineWidth = 2;
ctx.stroke();

Kreise ohne Verbindungslinie

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

ctx.beginPath();
ctx.arc(60, 60, 30, 0, Math.PI * 2);
// Ohne moveTo würde arc() eine Linie vom Ende des ersten Kreises ziehen
ctx.moveTo(190, 60); // = Mittelpunkt x + Radius
ctx.arc(160, 60, 30, 0, Math.PI * 2);
ctx.stroke();

// Wichtig · Fallstricke

Vergessenes beginPath(): Ohne beginPath() hängt moveTo() nur einen weiteren Unterpfad an den bestehenden Pfad an – beim nächsten stroke() werden auch alle alten Linien erneut gezeichnet (Leistungsverlust, ungewollt dicke oder überlagerte Linien).
Verbindungslinien bei arc(): arc() zieht automatisch eine gerade Linie vom aktuellen Punkt zum Bogenanfang. Mit moveTo(cx + r, cy) vorher vermeidet man diese Linie.
Scharfe 1-px-Linien: Ganzzahlige Koordinaten liegen auf Pixelgrenzen; eine 1 px breite Linie wird dann über zwei Pixel verschmiert. Mit + 0.5 (z. B. moveTo(10.5, 0)) werden Linien scharf.
Ungültige Werte: Sind x oder y NaN oder Infinity, wird der Aufruf stillschweigend ignoriert – keine Fehlermeldung.
lineTo() ohne vorheriges moveTo() verhält sich auf einem leeren Pfad wie moveTo().
Die Methode existiert gleichermaßen auf Path2D und OffscreenCanvasRenderingContext2D; sie wird von allen Browsern seit Jahren unterstützt.

Siehe auch

CanvasRenderingContext2D.lineTo() CanvasRenderingContext2D.beginPath() CanvasRenderingContext2D.closePath() CanvasRenderingContext2D.stroke() CanvasRenderingContext2D.arc() Path2D CanvasRenderingContext2D