Dice Game - The Essential Guide to HTML5 - page 52

Code Explanation

dotx = dx + 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 = dy + 3*dotrad; … vertically

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

Construct the first dot

dotx = dx+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 = dy+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

function draw4() { Start of draw4 function

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

ctx.beginPath(); Begin path

dotx = dx + 3*dotrad; Position the first dot inside the upper left

corner, horizontally and

doty = dy + 3*dotrad;

…vertically

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

Construct the circle