Implement and manipulate document structures and objects - Programming in HTML5 with JavaScript and CSS3 - page 46

FIGURE 1-31 A quadratic curve output onto a canvas

As the control point moves farther away from the line formed by the start and end points,
you get a steeper curve. This example used a negative number to indicate that the control
point should be above the top of your canvas to stretch the curve to where you want it.
The final curve to look at is the Bezier curve. A Bezier curve is similar to the quadratic curve
except that it has two control points instead of just one. Having two points allows the Bezier
curve to create more complex curves. In both examples you have seen so far, the curve was
created around the context of a single point. The Bezier curve changes that. It's easiest to see
in an example, and then I'll explain the parameters. Create the following code:

ctxt.beginPath();
ctxt.moveTo(125, 20);
ctxt.bezierCurveTo(0, 200, 300, 300, 50, 400);
ctxt.lineWidth = 5;
ctxt.strokeStyle = '#f00';
ctxt.stroke();

The bezierCurveTo method follows a moveTo method call in the same way that
the quadraticCurveTo method did. You need to pass three sets of coordinates to the
bezierCurveTo method, as listed in Table 1-10.

TABLE 1-10 Parameters required for the bezierCurveTo method

Parameter Description

controlX , controlY The first two parameters specify the first control point that is used to stretch

out the curve.

Control2X , control2Y

The second two parameters specify the second control point that is used to
stretch out the curve.

endX , endY The final two parameters specify the end point for the curve.