The Essential Guide to HTML5

DICE GAME

ctx.lineWidth=5;
ctx.stroke();
}

This code produces a half circle filled in with purple (a combination of red and blue), with a stroke, that is,
an outline of pure red as shown in Figure 2-10. The coding specifies a path, then draws the path as a fill,
and then draws the path as a stroke.

Figure 2-10. Using fill and stroke with different colors

A full circle is produced by many different commands, including:

ctx.arc(200,200,50,0, 2Math.PI, true);
ctx.arc(200,200,50, 0, 2Math.PI, false);
ctx.arc(200,200,50, .5Math.PI, 2.5Math.PI, false);

You may as well stick with the first one—it
s as good as any other. Note that I still use the closePath
command. A circle may be a closed figure in geometric terms, but that doesn
t matter in terms of
JavaScript.

If you think of the canvas element as a canvas on which you put some ink or paint, you realize you
ll need
to erase the canvas or the appropriate part of it to draw something new. To do this, HTML5 supplies the
command

ctx.clearRect(x,y,width,height);