Canvas bezierCurveTo() method
Definition and usage
bezierCurveTo() method to add a point to the current path using the specified control points of the cubic Bezier curve.
Tip:A cubic Bezier curve requires three points. The first two points are used as control points in the cubic Bezier calculation, and the third point is the endpoint of the curve. The starting point of the curve is the last point in the current path. If the path does not exist, please use beginPath() and moveTo() method to define the starting point.
- Starting point: moveTo(
20,20) - Control point 1: bezierCurveTo(
20,100,200,100,200,20) - Control point 2: bezierCurveTo(20,100,
200,100,200,20) - Endpoint: bezierCurveTo(20,100,200,100,
200,20)
Tip:Please see quadraticCurveTo() method. It has one control point instead of two.
Example
Draw a cubic Bezier curve:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();
Syntax
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
Parameter value
| 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 endpoint. |
| y | The y-coordinate of the endpoint. |
Browser support
Table numbers indicate the first browser version that fully supports this property.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Σημείωση:Το Internet Explorer 8 και οι προηγούμενες εκδόσεις δεν υποστηρίζουν το στοιχείο <canvas>.
