The Essential Guide to HTML5

(Greg DeLong) #1

CHAPTER 2


ctx.closePath(); Close the path


ctx.fill(); Draw the path, that is, fill 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


dotx = dicex + 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 = dicey + 3*dotrad; ... vertically


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


dotx = dicex+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 = dicey+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

Free download pdf