HTML Reference Manual

HTML tag list

HTML canvas bezierCurveTo() method

bezierCurveTo() is a Canvas 2The bezierCurveTo() method is used to draw a cubic Bezier curve path in Canvas. This method requires three points. The first and second points are control points, and the third point is the endpoint. The starting point is the last point in the current path, and it can be modified before drawing the Bezier curve by calling moveTo().

HTML canvas reference manual

Online Example

Draw a cubic Bezier curve:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>HTML canvas bezierCurveTo() method usage-Basic Tutorial(w3(codebox.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();
</script>　
</body>
</html>

Test to see ‹/›

Browser Compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome, and Safari support bezierCurveTo() Method.

Note:Internet Explorer 8 Previous versions do not support the <canvas> element.

Definition and Usage

The bezierCurveTo() method adds a point to the current path by using specified control points that represent a cubic Bezier curve.

A cubic Bezier curve requires three points. The first two points are used as control points in the cubic Bezier calculation, and the third point is the endpoint of the curve. The starting point of the curve is the last point in the current path. If the path does not exist, please use beginPath() and moveTo() Method to define the starting point.

Starting point:

moveTo(20,20)

Control point 1:

bezierCurveTo(20,100,200,100,200,20)

Control point 2:

bezierCurveTo(20,100,200,100,200,20)

Endpoint:

bezierCurveTo(20,100,200,100,200,20)

Tip:Please see quadraticCurveTo() Method. It has one control point instead of two.

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

Parameter value

Parameter	Description
cp1x	The x-coordinate of the first control point.
cp1y	The y-coordinate of the first control point.
cp2x	The x-coordinate of the second control point.
cp2y	The y-coordinate of the second control point.
x	The x-coordinate of the endpoint.
y	The y-coordinate of the endpoint.

HTML canvas reference manual

HTML: <template> tag