HTML and CSS Reference

In-Depth Information

Figure 2-7. An arcTo() example

Bezier Curves

Bezier curves, which are far more flexible than arcs, come in both the cubic and quad-

ratic types:

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

•
context.
quadraticCurveTo
(
cpx, cpy, x, y
)

The Bezier curve is defined in 2D space by a “start point,” an “end point,” and one or

two “control” points, which determine how the curve will be constructed on the canvas.

A normal cubic Bezier curve uses two points, while a quadric version uses a single point.

The quadratic version, shown in
Figure 2-8
, is the simplest, only needing the end point

(last) and a single point in space to use as a control point (first):

context.moveTo(0,0);

context.quadraticCurveTo(100,25,0,50);

Figure 2-8. A simple quadratic Bezier curve

This curve starts at
0,0
and ends at
0,50
. The point in space we use to create our arc is

100,25
. This point is roughly the center of the arc vertically. The
100
value for the single

control point pulls the arc out to make an elongated curve.