HTML canvas bezierCurveTo()
Method
Example
Draw a cubic Bezier curve:
JavaScript:
Browser Support
Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the bezierCurveTo()
method.
Note: Internet Explorer 8 and earlier versions do not support the <canvas>
element.
Definition and Usage
The bezierCurveTo()
method adds a point to the current path by using the specified control points that represent a cubic Bezier curve.
A cubic Bezier curve requires three points. The first two points are control points used in the cubic Bezier calculation, and the third point is the ending point. The starting point of the curve is the last point in the current path. If the path does not exist, use the beginPath() and moveTo() methods to define a starting point.
Tip: See the quadraticCurveTo() method. It has one control point instead of two.
| JavaScript Syntax: | context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); | | --- | --- |
Parameter Values
Parameter | Description |
---|---|
cp1x | The x coordinate of the first Bezier control point. |
cp1y | The y coordinate of the first Bezier control point. |
cp2x | The x coordinate of the second Bezier control point. |
cp2y | The y coordinate of the second Bezier control point. |
x | The x coordinate of the ending point. |
y | The y coordinate of the ending point. |