Dice Game - The Essential Guide to HTML5 - page 42

var ch = 1+Math.floor(Math.
random()*6);

Declare and set the value of the ch variable to
randomly be the number 1, 2, 3, 4, 5, or 6

drawface(ch); Invoke the drawface function with the parameter

ch

} End function definition

function drawface(n) {

Start of the function definition for the drawface
function, whose argument is the number of dots

ctx = document.getElementById('canvas').
getContext('2d');

Obtain the object that is used to draw on the
canvas

ctx.lineWidth = 5;

Set the line width to 5

ctx.clearRect(dicex,dicey,dicewidth,
diceheight);

Clear the space where the die face may have
been drawn. This has no effect the very first time.

ctx.strokeRect(dicex,dicey,dicewidth,
diceheight)

Draw the outline of the die face

ctx.fillStyle = "#009966"; Set the color for the circles. I used a graphics

program to determine this value. You can do this,
or experiment.

switch(n) {

Start switch using the number of dots

case 1: If it is 1

Draw1(); Call the draw1 function

break;

Break out of the switch

case 2: If it is 2

Draw2(); Call the draw2 function

break;

Break out of the switch

case 3: If it is 3

draw2();

First call draw2 and then

draw1(); Call draw1