Canvas bezierCurveTo(): Cubic Bezier Curves
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) adds a cubic Bézier curve to the current Canvas path. The curve starts at the current point, is shaped by two control points, and ends at (x, y).
Basic bezierCurveTo() example Top ↑
const canvas = document.getElementById('my_canvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(20, 30);
ctx.bezierCurveTo(100, 180, 220, 20, 320, 140);
ctx.stroke();Syntax and parameters Top ↑
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);| Parameter | Meaning |
|---|---|
cp1x | X coordinate of the first control point. |
cp1y | Y coordinate of the first control point. |
cp2x | X coordinate of the second control point. |
cp2y | Y coordinate of the second 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 one of the six arguments. It comes from the current path position. For predictable code, set it explicitly with moveTo() before calling bezierCurveTo(). The method adds the curve to the path; use stroke() or fill() to paint it.
Start, control and end points Top ↑
A cubic Bézier curve is controlled by four points:
- Start point: the current point in the path, commonly set with
moveTo(). - Control point 1: strongly influences the direction in which the curve leaves the start point.
- Control point 2: strongly influences the direction from which the curve approaches the end point.
- End point: the final
(x, y)coordinates passed tobezierCurveTo().
The curve usually does not pass through either control point. They act as handles that shape the curve.
Interactive two-control-point demo Top ↑
Move either control point and watch how each side of the curve changes.
JavaScript used by the curve demo Top ↑
const startX = 20;
const startY = 20;
const cp1x = 100;
const cp1y = 80;
const cp2x = 200;
const cp2y = 100;
const endX = 420;
const endY = 20;
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, endX, endY);
ctx.stroke();The interactive controls use JavaScript input events. See the JavaScript events tutorial for the event-handling basics.
How the two control points shape the curve Top ↑
The first control point mainly shapes the curve near its start, while the second mainly shapes it near the end. This makes a cubic Bézier curve more flexible than a quadratic curve.
ctx.beginPath();
ctx.moveTo(20, 120);
ctx.bezierCurveTo(80, 20, 220, 220, 300, 120);
ctx.stroke();Connecting multiple cubic curves Top ↑
After one curve is added, its end point becomes the current point for the next path segment. You can therefore connect several cubic curves without calling moveTo() between them.
ctx.beginPath();
ctx.moveTo(20, 100);
ctx.bezierCurveTo(70, 20, 120, 180, 170, 100);
ctx.bezierCurveTo(220, 20, 270, 180, 320, 100);
ctx.stroke();Cubic vs quadratic Bezier curves Top ↑
quadraticCurveTo() uses one control point. bezierCurveTo() uses two, giving independent control over how the curve leaves the start and approaches the end.
| Method | Control points | Best suited to |
|---|---|---|
quadraticCurveTo() | 1 | Simple smooth bends. |
bezierCurveTo() | 2 | More complex curves and organic shapes. |
Styling a cubic Bezier curve Top ↑
The curve is part of the current path, so the usual Canvas stroke styles apply. Combine it with strokeStyle, lineWidth, lineCap, or setLineDash().
ctx.strokeStyle = 'teal';
ctx.lineWidth = 5;
ctx.setLineDash([10, 5]);
ctx.beginPath();
ctx.moveTo(20, 100);
ctx.bezierCurveTo(80, 20, 220, 180, 300, 100);
ctx.stroke();Common bezierCurveTo() mistakes Top ↑
- Using
quadraticCurveTo()syntax when two control points are required. - Expecting the curve to pass through either control point. The control points normally shape the curve without lying on it.
- Forgetting to set a predictable start point with
moveTo(). - Forgetting
stroke()orfill(), so the curve is added to the path but not painted. - Swapping the second control point with the end-point coordinates.
Accessibility note Top ↑
Canvas drawings are pixel-based. If a curve carries information, such as a route, trend, or diagram relationship, provide equivalent text or semantic HTML so the information is not available only through the Canvas image.
Frequently asked questions Top ↑
How many control points does bezierCurveTo() use? Top ↑
Two. The first shapes the curve near the start and the second shapes it near the end.
Where does a cubic Bezier curve start? Top ↑
It starts from the current point in the active path. In most examples, call moveTo(x, y) first so the start is explicit.
Does bezierCurveTo() draw immediately? Top ↑
No. It adds a cubic curve to the current path. Call stroke() to paint its outline or fill() when it forms part of a filled shape.
Does the curve pass through its control points? Top ↑
Normally no. The control points influence the curve's direction and shape.
When should I use bezierCurveTo() instead of quadraticCurveTo()? Top ↑
Use bezierCurveTo() when you need two independently adjustable control points for a more flexible curve.
Related Canvas tutorials Top ↑
Canvas tutorial | moveTo() | lineTo() | quadraticCurveTo() | strokeStyle | lineWidth | setLineDash()
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.
