HTML and CSS Reference
didn't use beginPath . This is because the previous arc line I drew
would be included in the fi nal face path, but also because I'm
starting a new arc for the mouth, as you'll see in the following
code listing. I could fi x the line joining the edge of the head to
the mouth by using moveTo , which is effectively lifting the pen
from the canvas to begin drawing someplace else, but I don't
want the coloured outline around the head.
// draw the smile
ctx.strokeStyle = '#c00';
ctx.lineWidth = 3;
ctx.arc(100, 50, 20, 0, Math.PI, false);
The previous code listing gives me a nice semi-circle for the
smile with a new stroke colour and width. For the head I used
fill , but for the face I need to use stroke , which will draw the
line rather than a solid shape. Next the eyes:
ctx.fillStyle = '#c00';
// start the left eye
ctx.arc(90, 45, 3, 0, Math.PI*2, true);
// draw the right eye
ctx.arc(110, 45, 3, 0, Math.PI*2, true);
ctx.stroke(); // thicker eyes
I started a new path again, which means I can start drawing the
arc for the eyes without using moveTo (as I did when making the
smile). However, once I filled the arc, creating a solid-looking eye,
I lift the pen with moveTo(113, 45) to draw the right eye. Notice
that I moved to the right by the arc's first X coordinate plus the
radius value to create a solid line, which ensures that the starting
point of the arc matches where I put the pen down. Finally I use
the stroke method to give the eyes a bit more thickness.
The code goes on to move the drawing point around and fi nally
end up with an image of our stick man.
There's also a number of other path methods, which are beyond
the scope of this chapter, that you can use for fi ner control over
the lines and shapes you draw, including quadraticCurveTo ,
bezierCurveTo , arcTo , rect , clip , and isPointInPath .
FIGURE 5.11 An example of
how a continued path causes
an error in the final drawing.