Canvas quadraticCurveTo(): Draw Quadratic Bezier Curves

quadraticCurveTo(cpx, cpy, x, y) adds a quadratic Bézier curve to the current Canvas path. The curve starts at the current point, bends toward one control point at (cpx, cpy), and ends at (x, y).

Basic quadraticCurveTo() example Top ↑

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

ctx.beginPath();
ctx.moveTo(20, 30);
ctx.quadraticCurveTo(120, 150, 260, 40);
ctx.stroke();

Syntax and parameters Top ↑

ctx.quadraticCurveTo(cpx, cpy, x, y);

Parameter	Meaning
`cpx`	X coordinate of the single control point.
`cpy`	Y coordinate of the single control point.
`x`	X coordinate of the curve's end point.
`y`	Y coordinate of the curve's end point.

The start point is not passed to quadraticCurveTo(). It comes from the current path position, normally set explicitly with moveTo(). The method adds the curve to the path; use stroke() or fill() to paint it.

Start point, control point and end point Top ↑

A quadratic Bézier curve uses three important points:

Start point: the current point in the path, commonly established with moveTo().
Control point: pulls the curve toward itself and controls the bend, but the curve does not normally pass through it.
End point: the final (x, y) coordinates passed to quadraticCurveTo().

The dashed guide lines in the interactive example below connect the start and end points to the control point so you can see how changing the control point changes the curve.

Interactive control-point demo Top ↑

Control point X: 100 Control point Y: 80

Drag the sliders to move the control point.

JavaScript used by the curve demo Top ↑

const startX = 20;
const startY = 20;
const controlX = 100;
const controlY = 80;
const endX = 420;
const endY = 20;

ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.quadraticCurveTo(controlX, controlY, endX, endY);
ctx.stroke();

How the control point changes the curve Top ↑

The control point determines the direction in which the curve initially leaves the start point and approaches the end point. Moving it farther from the straight line between the start and end points produces a stronger bend.

// Control point above the start/end line
ctx.beginPath();
ctx.moveTo(20, 120);
ctx.quadraticCurveTo(140, 20, 280, 120);
ctx.stroke();

Connecting multiple quadratic curves Top ↑

After the first curve is added, its end point becomes the current point for the next segment. This lets you build continuous curved paths.

ctx.beginPath();
ctx.moveTo(20, 100);
ctx.quadraticCurveTo(80, 20, 140, 100);
ctx.quadraticCurveTo(200, 180, 260, 100);
ctx.stroke();

Quadratic vs cubic Bezier curves Top ↑

quadraticCurveTo() uses one control point. bezierCurveTo() uses two control points, giving you more control over the curve entering and leaving its endpoints.

Method	Control points	Typical use
`quadraticCurveTo()`	1	Simple smooth bends and curved segments.
`bezierCurveTo()`	2	More complex shapes where both sides of the curve need independent control.

Styling the curve Top ↑

A quadratic curve is part of the current path, so normal Canvas path styles apply. Use strokeStyle, lineWidth, lineCap, or setLineDash() before calling stroke().

ctx.strokeStyle = 'teal';
ctx.lineWidth = 5;
ctx.setLineDash([8, 4]);
ctx.beginPath();
ctx.moveTo(20, 100);
ctx.quadraticCurveTo(140, 20, 280, 100);
ctx.stroke();

Common quadraticCurveTo() mistakes Top ↑

Expecting the control point to be a point the curve must pass through. It normally controls the bend rather than lying on the curve.
Forgetting to establish a predictable start point with moveTo().
Forgetting stroke() or fill(), so the path exists but is not painted.
Confusing the control-point coordinates with the end-point coordinates.
Using quadraticCurveTo() when two independently adjustable control points are needed; use bezierCurveTo() for that case.

Accessibility note Top ↑

Canvas curves are pixel-based graphics. If the curve communicates important information, such as a chart trend, route, or diagram, provide an equivalent text or semantic HTML description rather than relying on the drawing alone.

Frequently asked questions Top ↑

How many control points does quadraticCurveTo() use? Top ↑

One. The start point comes from the current path, one control point shapes the curve, and the final two arguments specify the end point.

Does the quadratic curve pass through its control point? Top ↑

Usually no. The control point influences the direction and curvature but is not normally a point on the curve itself.

How do I set the starting point? Top ↑

Call moveTo(x, y) before quadraticCurveTo(). This makes the start point explicit and keeps the example predictable.

Does quadraticCurveTo() draw immediately? Top ↑

No. It adds a curve to the current path. Use stroke() to draw the outline or fill() when the path forms a shape you want to fill.

What is the difference between quadraticCurveTo() and bezierCurveTo()? Top ↑

quadraticCurveTo() uses one control point, while bezierCurveTo() uses two.

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect:

Canvas quadraticCurveTo(): Quadratic Bezier Curves