Drawing on the Canvas - HTML5 Canvas - page 77

Bezier Curves
Bezier curves, which are far more flexible than arcs, come in both the cubic and quadratic
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 quadratic version uses a single point.
The quadratic version, shown in Figure 2-8 , is the simplest, needing only 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 .Thispointisroughlythecenterofthearcvertically.The 100 valueforthesinglecon-
trol point pulls the arc out to make an elongated curve.
The cubic Bezier curve offers more options because we have two control points to work with.
The result is that curves—such as the classic “S” curve shown in Figure 2-9 —are easier to
make:
context . moveTo ( 150 , 0 );
context . bezierCurveTo ( 0 , 125 , 300 , 175 , 150 , 300 );