YouTipMet Canvas Beziercurveto
# HTML canvas bezierCurveTo() Method
[ Canvas Object](#)
## Example
Draw a cubic Bezier curve:
YourbrowserdoesnotsupporttheHTML5canvastag.
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();
[Try it »](#)
* * *
## 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 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 end point of the curve. The starting point of the curve is the last point in the current path. If there is no path, use the [beginPath()](#) and [moveTo()](#) methods 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)
End point:
bezierCurveTo(20,100,200,100,**200,20**)
**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 end point. |
| _y_ | The y-coordinate of the end point. |
* * Canvas Object](#)