Unable to draw paddles for pong game
<p>Okay, I've been converting my "function spaghetti" into revealing prototypes for my Pong game, and haven't had any luck drawing the paddles.</p>

<p>This will draw a black canvas, but the paddles refuse to draw.</p>

<p>I commented out the clearCanvas() to see if it was an issue there, but to no avail.</p>

<p>Seems like you'll definitely want to <a href="http://jsbeautifier.org" rel="nofollow">http://jsbeautifier.org</a> the code below, as it didn't transfer very well =c</p>

<pre><code>/*jslint browser: true, devel: true, indent: 4, undef: true, todo: true*/

canvas = document.createElement('canvas');
canvas.width = 600;
canvas.height = 400;
document.body.appendChild(canvas);
context = canvas.getContext('2d');

/////////////////////////////////////////////////////////////

var Paddle = function (playerSide) {
'use strict';
//constructor, variables go here
var x, y = 20,
    width = 10, height = 50,
    colour = '#FFF';
//Determine which paddle belongs to which player
if (playerSide === 'left') {
    this.x = 20;
} else {
    this.x = 580;
}
};

Paddle.prototype = function () {
"use strict";
//Private members
var draw = function (x, y) {
    context.fillStyle = this.colour;
    context.fillRect(x, y, this.width, this.height);
};
//Public members
return {
    draw: draw
};
}();

/////////////////////////////////////////////////////////////

var Pong = function () {
"use strict";
//constructor, variables go here
//Events
canvas.onmousemove = function (mouse) {
    this.y = mouse.pageY;
};
this.animate();
};

Pong.prototype = (function () {
"use strict";
//Private members
// requestAnim shim layer by Paul Irish
window.requestAnimFrame = (function () {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function (/* function */callback, /* DOMElement */element) {
            window.setTimeout(callback, 1000 / 60);
        };
}());

var animate = function () {
        requestAnimFrame(animate);
        clearCanvas();
        drawPaddles();
    },

    drawPaddles = function () {
        leftPaddle.draw(leftPaddle.x, leftPaddle.y);
        rightPaddle.draw(rightPaddle.x, rightPaddle.y);
    },

    clearCanvas = function () {
        context.clearRect(0, 0, 600, 400);
    };

//Public members
return {
    animate: animate
};
}());

var leftPaddle = new Paddle('left');
var rightPaddle = new Paddle('right');

var pong = new Pong();
</code></pre>

<p>​</p>

<p>Any ideas what's going on, or what concept I'm not understanding?
Also, any comments about my code otherwise would be much appreciated.</p>

<p>Thank you!</p>

<p>EDIT: I initially initialized the paddles from the Pong class, I'm assuming that's correct, but this code has undergone so many changes as I was trying to fix the paddle issue... arrrg!</p>
