CanvasRenderingContext2D.quadraticCurveTo() — Methode · JavaScript-Referenz

Signatur

CanvasRenderingContext2D.prototype.quadraticCurveTo(cpx, cpy, x, y)

Beschreibung

quadraticCurveTo() zeichnet eine quadratische Bézier-Kurve. Sie beginnt am aktuellen Punkt des Pfades (dem letzten Punkt, der durch moveTo(), lineTo() oder einen anderen Pfadbefehl gesetzt wurde), endet in (x, y) und wird von einem einzigen Kontrollpunkt (cpx, cpy) in Richtung dieses Punktes „gezogen“. Die Kurve läuft in der Regel nicht durch den Kontrollpunkt selbst.

Die Methode verändert nur den Pfad. Sichtbar wird die Kurve erst durch stroke() oder fill(). Nach dem Aufruf ist (x, y) der neue aktuelle Punkt, sodass sich weitere Segmente direkt anschließen lassen.

Quadratische Kurven eignen sich für einfache, weiche Bögen: Sprechblasen, abgerundete Ecken, Wellenlinien oder das Glätten von Freihand-Linien, bei denen die Mittelpunkte zwischen Messpunkten als Endpunkte dienen. Für S-Kurven oder genauere Formen mit zwei Kontrollpunkten nimmt man bezierCurveTo().

Parameter

Name	Typ	Beschreibung
$cpx Pflicht	number	x-Koordinate des Kontrollpunkts.
$cpy Pflicht	number	y-Koordinate des Kontrollpunkts.
$x Pflicht	number	x-Koordinate des Endpunkts.
$y Pflicht	number	y-Koordinate des Endpunkts.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined). Der Pfad wird direkt verändert.

Beispiele

Einfache Kurve mit sichtbarem Kontrollpunkt

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

// Kurve von (50, 200) nach (250, 200), Kontrollpunkt (150, 20)
ctx.beginPath();
ctx.moveTo(50, 200);
ctx.quadraticCurveTo(150, 20, 250, 200);
ctx.lineWidth = 3;
ctx.strokeStyle = 'steelblue';
ctx.stroke();

// Start-, End- und Kontrollpunkt markieren
const dot = (x, y, color) => {
  ctx.fillStyle = color;
  ctx.beginPath();
  ctx.arc(x, y, 5, 0, Math.PI * 2);
  ctx.fill();
};
dot(50, 200, 'green');
dot(250, 200, 'green');
dot(150, 20, 'red');

Sprechblase zeichnen

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

ctx.beginPath();
ctx.moveTo(75, 25);
ctx.quadraticCurveTo(25, 25, 25, 62.5);
ctx.quadraticCurveTo(25, 100, 50, 100);
ctx.quadraticCurveTo(50, 120, 30, 125); // Spitze der Blase
ctx.quadraticCurveTo(60, 120, 65, 100);
ctx.quadraticCurveTo(125, 100, 125, 62.5);
ctx.quadraticCurveTo(125, 25, 75, 25);
ctx.fillStyle = '#fff';
ctx.fill();
ctx.strokeStyle = '#333';
ctx.stroke();

Freihand-Linie glätten (Mittelpunkt-Technik)

const ctx = document.querySelector('canvas').getContext('2d');
const points = [
  { x: 20, y: 150 }, { x: 60, y: 60 }, { x: 110, y: 140 },
  { x: 160, y: 50 }, { x: 210, y: 130 }, { x: 260, y: 70 }
];

const drawSmooth = (pts) => {
  if (pts.length < 2) return;
  ctx.beginPath();
  ctx.moveTo(pts[0].x, pts[0].y);
  for (let i = 1; i < pts.length - 1; i++) {
    // Messpunkt als Kontrollpunkt, Mittelpunkt als Endpunkt
    const midX = (pts[i].x + pts[i + 1].x) / 2;
    const midY = (pts[i].y + pts[i + 1].y) / 2;
    ctx.quadraticCurveTo(pts[i].x, pts[i].y, midX, midY);
  }
  const last = pts[pts.length - 1];
  ctx.lineTo(last.x, last.y);
  ctx.lineWidth = 4;
  ctx.lineCap = 'round';
  ctx.stroke();
};

drawSmooth(points);

// Wichtig · Fallstricke

Fehlender Startpunkt: Wenn der Pfad noch keinen aktuellen Punkt hat (z. B. direkt nach beginPath() ohne moveTo()), setzt der Browser zuerst intern moveTo(cpx, cpy). Die Kurve beginnt dann am Kontrollpunkt statt dort, wo man sie erwartet. Deshalb vorher immer moveTo() aufrufen.
Ungültige Werte: Ist ein Argument NaN oder Infinity, wird der Aufruf ohne Fehlermeldung ignoriert. Werden weniger als vier Argumente übergeben, wirft der Browser einen TypeError.
Der Kontrollpunkt liegt nicht auf der Kurve. Der Scheitelpunkt liegt nur auf halbem Weg zwischen der Sehne (der Verbindung von Start- und Endpunkt) und dem Kontrollpunkt.
Die Koordinaten werden durch die aktuelle Transformation (translate(), scale(), setTransform()) verändert.
Die Methode gibt es genauso auf Path2D und OffscreenCanvasRenderingContext2D. Sie wird von allen modernen Browsern seit Jahren unterstützt.

Siehe auch

CanvasRenderingContext2D.bezierCurveTo() CanvasRenderingContext2D.moveTo() CanvasRenderingContext2D.lineTo() CanvasRenderingContext2D.arcTo() CanvasRenderingContext2D.stroke() Path2D