<html>
<head>
<style>
body {padding:0px;margin:0px;}
</style>
</head>
<body>
<canvas id="demo"></canvas>
<script>
var c=document.getElementById('demo');
var cc=c.getContext("2d");

//array of gray colors - these are very similar colors, let's hope this works out well.
var items = ["#A9A9A9","#A7A7A7","#A5A5A5","#A3A3A3","#A1A1A1","#999"];

window.addEventListener("load",setDimensions);
window.addEventListener("resize",setDimensions);

setInterval(draw,100);

function setDimensions() {
	c.width=window.innerWidth;
	c.height=window.innerHeight;	
};

function draw() {	

	var counter=0;

	for (x=0;x<c.width;x+=10) { //loop through X
		for (y=0;y<c.height;y+=10) { //loop through Y
			cc.fillStyle=items[Math.floor(Math.random() * items.length)]; // random color from array
			cc.fillRect(x, y, 10, 10);	
			counter++;	//keep track of the actual number of blocks	
		};	
	};
	
	//add the counter right in the middle of the screen
	cc.fillStyle="#555";
	cc.fillRect (c.width/2-75,c.height/2-28,150,50);	
	cc.font="16px Arial"
	cc.fillStyle="white";
	cc.textAlign="center"; 
	cc.fillText (counter + " squares",c.width/2,c.height/2);	
	
};

</script>
</body>
</html>