HTML canvas bezierCurveTo() Method

Example

let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");

ctx.beginPath();
ctx.moveTo(25, 25);
ctx.bezierCurveTo(25, 100, 100, 100, 100, 25);
ctx.stroke();

Try this code ❯

Meaning

The bezierCurveTo() method creates a cubic Bézier curve.

Standard Syntax

JavaScript syntax:

context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

Parameter Values

Parameter	Description
cp1x	Specifies the x-coordinate of the first Bézier control point.
cp1y	Specifies the y-coordinate of the first Bézier control point.
cp2x	Specifies the x-coordinate of the second Bézier control point.
cp2y	Specifies the y-coordinate of the second Bézier control point.
x	Specifies the x-coordinate of the ending point.
y	Specifies the y-coordinate of the ending point.