()


<script>

// DEFINE YOUR GLOBAL VARIABLES HERE

var canvas;
var context;

var counter;
counter = 0;

var inc;
inc = 10;

// INITIALIZE THE STARTING FUNCTION

function init() {

canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");

// CALL SUBSEQUENT FUNCTIONS, as many as you need

setup();

return setInterval(create, 10 ); // THIS IS WHERE AL HAPPENS

}

function clearCanvas() {

context.clearRect(0,0,canvas.width,canvas.height);

}

function drawBkgd() { // USE THIS AREA TO MODIFY BKGD
context.fillStyle = "pink";
context.fillRect(0,0,canvas.width,canvas.height);
}

function setup() {
clearCanvas();
drawBkgd();
}

function create() {
// >>>>>>>>>>>>>>>>>>>>>>>>>> START HERE
counter += inc;

//setup();



if (counter > 255) {
inc = -10;
}

if (counter < 0 ) {
inc = 10;
}




square(counter);
document.getElementById("display").innerHTML = counter + " / " + inc;

// >>>>>>>>>>>>>>>>>>>>>>>>>> END HERE
}

function square(counter) {

/*context.strokeStyle = "rgb("+(255-counter)+",0,0)";
context.strokeRect(0,0,counter,counter);*/

context.save();
context.translate(canvas.width/2,canvas.height/2);
context.rotate( Math.PI* 2 * Math.random() * (counter/255) );
context.fillStyle = "rgb("+counter+",0," + (255-counter)+")";
//context.fillRect(canvas.width/2-counter/2,canvas.height/2-counter/2,counter,counter);
context.fillRect(counter/2,counter/2,counter/10,counter/10);
context.restore();
}

</script>

</head>

<body onload="init()">

<canvas id="myCanvas" width="800" height="600"></canvas>

<div id="display">()</div>