Dice Game - The Essential Guide to HTML5 - page 51

Code Explanation

draw2mid();

Call the draw2mid function

break; Break out of the switch (not strictly necessary)

} Close switch statement

Close drawface function

}

function draw1() { Start of definition of draw1

var dotx;

Variable to be used for the horizontal position
for drawing the single dot

var doty;

Variable to be used for the vertical position for
drawing the single dot

ctx.beginPath(); Start a path

dotx = dx + .5*dicewidth;

Set the center of this dot to be at the center of
the die face (using dx ) horizontally and

… (using dy ) vertically

doty = dy + .5*diceheight;

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

Construct a circle (it is drawn with the fill
command)

ctx.closePath();

Close the path

ctx.fill();

Draw the path, that is, 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