Dice Game - The Essential Guide to HTML5 - page 44

ctx.closePath(); Close the path

ctx.fill();

Draw the path, that is, fill the circle

} Close draw1

function draw2() { Start of draw2 function

var dotx;

Variable to be used for the horizontal position for
drawing the two dots

var doty;

Variable to be used for the vertical position for
drawing the two dots

ctx.beginPath(); Start a path

dotx = dicex + 3*dotrad;

Set the center of this dot to be 3 radius lengths
over from the upper corner of the die face,
horizontally and

doty = dicey + 3*dotrad;

… vertically

ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true); Construct the first dot

dotx = dicex+dicewidth-3*dotrad; Set the center of this dot to be 3 radius lengths in

from the lower corner of the die face, horizontally
and

doty = dicey+diceheight-3*dotrad;

… vertically

ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true); Construct the second dot

ctx.closePath();

Close the path

ctx.fill(); Draw both dots

} Close draw2

Start of draw4 function

function draw4() {

var dotx;

Variable to be used for the horizontal position for
drawing the dots.

var doty; Variable to be used for the vertical position for

drawing the dots