# Canvas Draw Bezier

Last Updated:

## How to Draw a Bezier

Your browser does not support the canvas element.

To draw a bezier, follow these steps

1. canvas - Assigning the canvas element to a variable.
2. ctx - Assigning the 2d rendering context to another variable by calling the `getContext('2d')` method.
3. beginPath() - Use `beginPath()` canvas method to start a new path by emptying the list of sub-paths.
4. moveTo() - Use `moveTo()` canvas method to begin a new sub-path at the point specified by the given (x, y) coordinates.
5. bezierCurveTo() - Use `bezierCurveTo()` canvas method to add a cubic Bézier curve to the current sub-path.
6. stroke() - Use `stroke()` canvas method to stroke (outline) the current or given path with the current `strokeStyle`. The default `strokeStyle` is 'black'.

### Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <body> <canvas id="point" width="230" height="150"> Your browser does not support the canvas element. </canvas> <script> var canvas = document.getElementById('point'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(5, 5); ctx.bezierCurveTo(100,150, 200,10, 220,140); ctx.stroke(); </script> </body> </html>

## Syntax

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

## Attributes Value

ValueExplanation
cp1x Specifies the x-axis coordinate of the first control point.
cp1y Specifies the y-axis coordinate of the first control point.
cp2x Specifies the x-axis coordinate of the second control point.
cp2y Specifies the y-axis coordinate of the second control point.
x Specifies the x-axis coordinate of the end point.
y Specifies the y-axis coordinate of the end point.