The Essential Guide to HTML5

CHAPTER 2

Code Explanation

var doty; Variable to be used for the vertical position for
drawing the two dots

ctx.beginPath(); Begin path

dotx = dx + 3*dotrad; Position the dots to be just inside horizontally

doty = dy + .5*diceheight; and midway vertically

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

PI*2,true);

Construc t circle

dotx = dx+dicewidth-3*dotrad; Position this dot to be just inside the right
border

doty = dy + .5*diceheight;

//no change

Position y midway

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

PI*2,true);

Construc t circle

ctx.closePath(); Close path

ctx.fill(); Draw dots

} Close draw2mid function

Set up canvas and provide notice if browser

doesn
t accept canvas element

Line break