Bouncing Ball - The Essential Guide to HTML5 - page 88

Code Explanation

color = 'rgb('+hue[h][0]+','
+hue[h][1]+','+hue[h][2]+')';

Set up color as a character string that
indicates an RGB value.

grad.addColorStop(h*1/6,color);

Set up the color stop to define the gradient.

} Close for loop

ctx.fillStyle = grad; Set the fill to be grad

ctx.lineWidth = ballrad;

moveball();

setInterval(moveball,100);

}

function moveball(){

ctx.clearRect(boxx,boxy,boxwidth,boxheight);

moveandcheck();

ctx.drawImage(img,ballx-ballrad,
bally-ballrad,2*ballrad,2*ballrad);

Draw an image

ctx.fillRect(boxx,boxy,ballrad,boxheight);

Draw the left wall

ctx.fillRect(boxx+boxwidth-
ballrad,boxy,ballrad,boxheight);

Draw the right wall

ctx.fillRect(boxx,boxy,boxwidth,ballrad); Draw the top wall

ctx.fillRect(boxx,boxy+boxheight-
ballrad,boxwidth,ballrad);

Draw the bottom wall

}

function moveandcheck() {