Bouncing Ball - The Essential Guide to HTML5 - page 87

Code Explanation

img.src="pearl.jpg";

Set the src for this image to be the
"pearl.jpg" file.

var ctx;

var grad; Set grad as a variable. It will be assigned a

value in the init function.

var color; Used in setting up the gradient grad

var hue = [

Used in setting up the gradient grad . This is
an array of arrays, each inner array
supplying RGB values.

[255, 0, 0 ], Red

[255, 255, 0 ], Yellow

[ 0, 255, 0 ],

Green

[ 0, 255, 255 ],

Cyan

[ 0, 0, 255 ], Blue

[255, 0, 255 ]

Purple (magenta)

];

Close array

function init(){

Used to set up the gradient

var h;

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

grad = ctx.createLinearGradient(boxx,boxy,
boxx+boxwidth,boxy+boxheight);

Create and assign a gradient value.

for (h=0;h<hue.length;h++) {

Start of for loop