Reference bezier()

bezier()

Draws a Bézier curve.

Bézier curves can form shapes and curves that slope gently. They're defined by two anchor points and two control points. Bézier curves provide more control than the spline curves created with the curve() function.

The first two parameters, x1 and y1, set the first anchor point. The first anchor point is where the curve starts.

The next four parameters, x2, y2, x3, and y3, set the two control points. The control points "pull" the curve towards them.

The seventh and eighth parameters, x4 and y4, set the last anchor point. The last anchor point is where the curve ends.

Bézier curves can also be drawn in 3D using WebGL mode. The 3D version of bezier() has twelve arguments because each point has x-, y-, and z-coordinates.

Examples

Syntax

bezier(x1, y1, x2, y2, x3, y3, x4, y4)
bezier(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4)

Parameters

x1
Number:

x-coordinate of the first anchor point.

y1
Number:

y-coordinate of the first anchor point.

x2
Number:

x-coordinate of the first control point.

y2
Number:

y-coordinate of the first control point.

x3
Number:

x-coordinate of the second control point.

y3
Number:

y-coordinate of the second control point.

x4
Number:

x-coordinate of the second anchor point.

y4
Number:

y-coordinate of the second anchor point.

z1
Number:

z-coordinate of the first anchor point.

z2
Number:

z-coordinate of the first control point.

z3
Number:

z-coordinate of the second control point.

z4
Number:

z-coordinate of the second anchor point.

Notice any errors or typos? Please let us know. Please feel free to edit src/core/shape/curves.js and open a pull request!

Related References