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

The code sample produces the output shown in Figure 1-32. You can see that this curve is
skewed because of the two control points.
FIGURE 1-32 A Bezier curve drawn on a canvas
In the next section, you learn about using path methods to combine everything you've
looked at so far.
Using path methods
When using the context object to draw, you always need a starting point and an ending
point. The ending point for one stroke also can become the starting point for the next stroke.
You do this by calling the beginPath method on the context object and then drawing all
your lines before calling either the closePath method (which ends the line) or the beginPath
method (which starts a new line) again. Recall that the first arc example called the beginPath
method before drawing each arc. Had the code not done that, the line would have contin-
ued across the canvas from one arc to the next. But by calling the beginPath method again,
you reset the path's starting point. So essentially, you can string together all the calls to the
various drawing methods to create a complex stroke. The stroke—no matter how simple or
complex—is called a path . Run the following code and see what kind of image you end up
with:
ctxt.beginPath();
ctxt.arc(300, 200, 75, 1.75 * Math.PI, 1.25 * Math.PI, false);
ctxt.lineTo(150, 125);
ctxt.quadraticCurveTo(300, 0, 450, 125);
ctxt.lineTo(353, 144);
ctxt.strokeStyle = "blue";
ctxt.lineCap = "round";
ctxt.lineWidth = 10;
ctxt.stroke();
This code produces the output shown in Figure 1-33.