squaredesign squares draw

Squares.js

function Squares(id) {
    this.sq      = document.getElementById(id)
    this.$sq     = $(this.sq)
    this.con     = sq.getContext('2d')
    this.sqD     = 60
    this.styles  = [
        '#e2e5e3',
        '#f4f4f4',
        '#808ab8',
        '#40455c',
        '#6c83c6',
        '#96a6d6'
    ]
}

Squares.prototype = {
    init : function () {
        var sq, timer
        sq = this
        window.onresize = function () {
            clearTimeout(timer)
            timer = setTimeout(function () {
                sq.update(sq)
            }, 10)
        }
        sq.update(sq)
    },
    update : function (sq) {
        var y, yIters, x, xIters
        sq.resize()
        for ( y = 0, yIters = sq.sqH * sq.sqD; y < yIters; y += sq.sqD ) {
            for ( x = 0, xIters = sq.sqW * sq.sqD; x < xIters; x += sq.sqD ) {
                sq.con.fillStyle = sq.getStyle()
                sq.con.fillRect( x, y, sq.sqD, sq.sqD )
            }
        }
    },
    resize : function () {
        sq.width  = 1 //clears the canvas. ugly.
        sq.width  = document.width
        sq.height = document.height
        // this doesn't really belong here, but it needs to be
        // redefined every time the window is resized
        sq.sqW = Math.ceil( this.$sq.width() / sq.sqD )
        sq.sqH = Math.floor( this.$sq.height() / ( this.$sq.width() / sq.sqW ) ) + 1
    },
    getStyle : function () {
        return sq.styles[ Math.round( Math.random() * sq.styles.length ) ]
    }
}

var sq = new Squares('sq')
sq.init()