Drawing on the Canvas - HTML5 Canvas - page 36

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.