Dice Game - The Essential Guide to HTML5 - page 45

ctx.beginPath(); Begin path

dotx = dicex + 3*dotrad;

Position the first dot inside the upper left corner,
horizontally and

doty = dicey + 3*dotrad;

…vertically

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

dotx = dicex+dicewidth-3*dotrad; Position the second dot to be inside the lower

right corner, horizontally and

doty = dicey+diceheight-3*dotrad;

… vertically

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

Construct dots

ctx.closePath();

Close path

ctx.fill(); Draw 2 dots

ctx.beginPath(); Begin path

dotx = dicex + 3*dotrad;

Position this dot inside the lower left corner,
horizontally and

doty = dicey + diceheight-3*dotrad; … vertically. (note that this is the same y value
just used)

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

Construct circle

dotx = dicex+dicewidth-3*dotrad;

Position this dot just inside the upper left corner,
horizontally and

doty = dicey+ 3*dotrad;

… vertically

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

Construct circle

ctx.closePath(); Close path

ctx.fill();

Draw 2 dots

} Close draw4 function