Easy Tutorial
❮ Met Cssstyle Getpropertypriority Event Timestamp ❯

HTML canvas bezierCurveTo() Method

Canvas Object

Example

Draw a cubic Bezier curve:

JavaScript:


Browser Support

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

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


Definition and Usage

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

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

Tip: See the quadraticCurveTo() method. It has one control point instead of two.

| JavaScript Syntax: | context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); | | --- | --- |

Parameter Values

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

Canvas Object

❮ Met Cssstyle Getpropertypriority Event Timestamp ❯