The Essential Guide to HTML5

(Greg DeLong) #1

CHAPTER 2


function draw2mid() { Start draw2mid 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(); Begin path


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


doty = dicey + .5*diceheight; And midway vertically


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


Construct circle

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


doty = dicey + .5*diceheight; //no change Position y midway


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


Construct circle

ctx.closePath(); Close path


ctx.fill(); Draw dots


} Close draw2mid function


Close script element
Close head element
Starting body tag, with onLoad attribute set to
invoke the init() function

<canvas id="canvas" width="400"
height="300">


Your browser doesn't support the HTML5
element canvas.



Set up canvas and provide notice if browser
doesnt accept canvas element



Close body and close html elements.
Free download pdf