squaredesign squares draw

Squares.js

window.Squares = function(self)
{
/* TODOS:
	- animate? collect squares or just overdraw on the same grid
*/

	Sq = function()
	{
		this.timer;
		this.sqD = 64;
		this.styles = [
			'#E2E5E3',
			'#F4F4F4',
			'#808AB8',
			'#40455c',
			'#6C83C6',
			'#96a6d6'
		];
		return this;
	}

	self.init = function()
	{
		self.ctx = self.canvas.getContext("2d");
		self.ctx.strokeStyle = 'black';
		self.ctx.lineWidth = 1;
		sq = new Sq();
		self.update();
	}

	
	self.color = function()
	{
		return sq.styles[Math.round(Math.random()*sq.styles.length)];
	}

	self.update = function()
	{

		self.canvas.width=1;
		self.canvas.height=1; //clears the canvas. ugly.
		self.canvas.width = document.width;
		self.canvas.height = document.height;

		sq.sqW = Math.ceil(self.canvas.width/sq.sqD);
		sq.sqH = Math.floor(self.canvas.height/(self.canvas.width/sq.sqW))+1;
		for (var y=0, yMax = (sq.sqH*sq.sqD); y < yMax; y+=sq.sqD)
		{
			for (var x=0, xMax = (sq.sqW*sq.sqD); x < xMax; x+=sq.sqD)
			{
				self.ctx.fillStyle = self.color();
				self.ctx.strokeRect(x,y,sq.sqD,sq.sqD);
				self.ctx.fillRect(x,y,sq.sqD,sq.sqD);
			}
		}
	}

	window.onload = function()
	{
		self.wrap = document.createElement('div');
		self.canvas = document.createElement('canvas');
		self.wrap.appendChild(self.canvas);
		document.body.appendChild(self.wrap);
		self.init();
	}

	window.onresize = function()
	{
		clearTimeout(sq.timer)
		sq.timer = setTimeout( function()
		{
			// external - need to be bound at the same time
			self.update()
		}, 10);
	}
	return self;
}({});