# CanvasRenderingContext2D.bezierCurveTo()

The `CanvasRenderingContext2D``.bezierCurveTo()` method of the Canvas 2D API adds a cubic Bézier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using `moveTo()` before creating the Bézier curve.

## Syntax

```void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
```

### Parameters

`cp1x`
The x axis of the coordinate for the first control point.
`cp1y`
The y axis of the coordinate for first control point.
`cp2x`
The x axis of the coordinate for the second control point.
`cp2y`
The y axis of the coordinate for the second control point.
`x`
The x axis of the coordinate for the end point.
`y`
The y axis of the coordinate for the end point.

## Examples

### Using the `bezierCurveTo` method

This is just a simple code snippet drawing a bezier curve. The control points are red and the start and end points are blue.

#### HTML

```<canvas id="canvas"></canvas>
```

#### JavaScript

```var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(50,20);
ctx.bezierCurveTo(230, 30, 150, 60, 50, 100);
ctx.stroke();

ctx.fillStyle = 'blue';
// start point
ctx.fillRect(50, 20, 10, 10);
// end point
ctx.fillRect(50, 100, 10, 10);

ctx.fillStyle = 'red';
// control point one
ctx.fillRect(230, 30, 10, 10);
// control point two
ctx.fillRect(150, 60, 10, 10);```

### Trying the `bezierCurveTo` parameters

Edit the code below and see your changes update live in the canvas:

```<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
<input id="edit" type="button" value="Edit" />
<input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.beginPath();
ctx.bezierCurveTo(50, 100, 180, 10, 20, 10);
ctx.stroke();</textarea>
```
```var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
eval(textarea.value);
}

textarea.value = code;
drawCanvas();
});

textarea.focus();
})

```

## Specifications

Specification Status Comment
WHATWG HTML Living Standard
The definition of 'CanvasRenderingContext2D.beziercurveto' in that specification.
Living Standard

## Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) (Yes) (Yes) (Yes) (Yes)
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)