# bezierCurveTo() Method - Javascript Canvas Reference

Javascript examples for Canvas Reference:bezierCurveTo

## Description

The bezierCurveTo() method sets control points for a cubic Bezier curve.

A cubic bezier curve requires three points.

The first two points are control points that are used in the cubic Bezier calculation and the last point is the ending point for the curve.?

## 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

## Example

Draw a cubic Bezier curve:

## Demo Code

```<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="250" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();/*from  ww  w  . j a va  2 s .c o m*/
ctx.moveTo(20, 20);
ctx.bezierCurveTo(20, 100, 200, 130, 210, 20);
ctx.stroke();

</script>

</body>
</html>
```