The Essential Guide to HTML5

DICE GAME

Code Explanation

dotx = dx+dicewidth-3*dotrad; Position the second dot to be inside the lower
right corner, horizontally and

doty = dy+diceheight-3*dotrad; ... vertically

ctx.arc(dotx,doty,dotrad,0,Math.

PI*2,true);

Construc t dots

ctx.closePath(); Close path

ctx.fill(); Draw 2 dots

ctx.beginPath(); Begin path

dotx = dx + 3*dotrad; Position this dot inside the lower left corner,
horizontally and

doty = dy + diceheight-3*dotrad;

//no change

... vertically (note that this is the same y value

just used)

ctx.arc(dotx,doty,dotrad,0,Math.

PI*2,true);

Construc t circle

dotx = dx+dicewidth-3*dotrad; Position this dot just inside the upper left
corner, horizontally and

doty = dy+ 3*dotrad; ... vertically

ctx.arc(dotx,doty,dotrad,0,Math.

PI*2,true);

Construc t circle

ctx.closePath(); Close path

ctx.fill(); Draw 2 dots

} Close draw4 function

function draw2mid() { Start draw2mid function

var dotx; Variable to be used for the horizontal position
for drawing the two dots