<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>