HTML canvas bezierCurveTo() Method

❮ HTML canvas Reference

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();

Meaning

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


Standard Syntax

JavaScript syntax:

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



Browser Support




Status







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.
❮ HTML canvas Reference