Hi

I'm trying to learn HTML5 and Javascript. While going threw a book, I also try to add some additional feature to their tutorials.

In the code bellow I would like to color each rectangle in a random color in still keep it moving aroung. Can you please help?

Oh, what do you use for debugging?

Code:
<!DOCTYPE html>
<html>
<head>
<title>Learning the basics of canvas</title>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	
var canvas = $("#myCanvas");
var context = canvas.get(0).getContext("2d");
var canvasWidth = canvas.width();
var canvasHeight = canvas.height();



//definicija tipk
var playAnimation = true;

var startButton = $("#startAnimation");
var stopButton = $("#stopAnimation");

stopButton.click(function() {
	$(this).hide();
	startButton.show();
	playAnimation = false;
});


startButton.hide();
startButton.click(function() {
	$(this).hide();
	stopButton.show();
	playAnimation = true;
	animate();
});

//definicija likov

var Shape = function(x, y, width, height, color) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.color = context.fill;
};


var shapes = new Array();
for (var i = 0; i < 250; i++) {
var x = Math.random()*250;
var y = Math.random()*250;
var width = height = Math.random()*5;
var color = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')'; 



//"rgb(Math.floor(Math.random()*255), Math.floor(Math.random()*255), Math.floor(Math.random()*255))"; 

//'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';

shapes.push(new Shape(x, y, width, height, color));
};


//animacija

function animate() {
context.clearRect(0, 0, canvasWidth, canvasHeight);
var shapesLength = shapes.length;
for (var i = 0; i < shapesLength; i++) {
var tmpShape = shapes[i];
tmpShape.x += Math.random()*4-2;
tmpShape.y += Math.random()*4-2;
context.fillRect(tmpShape.x, tmpShape.y, tmpShape.width, tmpShape.height, tmpShape.color);
};
if (playAnimation) {
setTimeout(animate, 33);
};
};
animate();


});

function rdece()
{ 
var d=document.getElementById("myCanvas");
var ctx=d.getContext("2d");
//shapes.push(new Shape(150, 150, 10, 10));
ctx.fillStyle= "red";
//context.fillRect(0,0,150,75);
};


function modro()
{ 
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle= "blue";
//ctx.fillRect(0,0,150,75);

}


</script>
</head>
<body>
<canvas id="myCanvas" width="500" height="281">
</canvas> 
<div>
<button id="startAnimation">Start</button>
<button id="stopAnimation">Stop</button>
<button onclick="rdece()">Rdeče</button>
<button onclick="modro()">Modro</button>
</div>

<p id="demo"> klikni za spremembo </p>
</body>
</html>