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

        // instead of making the other methods public, you could also restrict them to this scope
        function update(sq) {
            var y, yIters, x, xIters
            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 = getStyle()
                    sq.con.fillRect( x, y, sq.sqD, sq.sqD )
                }
            }
        }

        function resize() {
            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( sq.$sq.width() / sq.sqD )
            sq.sqH = Math.floor( sq.$sq.height() / ( sq.$sq.width() / sq.sqW ) ) + 1
        }

        function getStyle() {
            return sq.styles[ Math.round( Math.random() * sq.styles.length ) ]
        }

        window.onresize = function () {
            clearTimeout(timer)
            timer = setTimeout(function () {
                update(sq)
            }, 10)
        }

        update(this)
    }
}

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