Unable to call object properties from functions in JavaScript : <p>I am new to JavaScript and wanted to create a simple game of pong for practice.
I can easily draw the gaming area on the canvas but now there is some problem when I try to draw the bat.</p>

<p>I created a playerBat object with some properties.</p>

<pre><code>var playerBat = {
    batWidth:20, 
    batHeight:100, 
    x:10, 
    y:(height/2)-(batHeight/2), 
    spdY:10
};
</code></pre>

<p>Then in the function "drawPlayerBat" I simply drew a rectangle with these properties as parameters.</p>

<pre><code>function drawPlayerBat() {
    ctx.fillStyle = "white";
    ctx.fillRect(playerBat.x, playerBat.y, playerBat.x+playerBat.batWidth, playerBat.y+playerBat.batHeight);
};
</code></pre>

<p>But its not working ! The console says "Unable to get property 'x' of undefined or null reference". Have I made any mistake in syntax or doing this is just not possible ?</p>

<p>Here is the entire code... <a href="http://codepen.io/anon/pen/YqgVog?editors=1010" rel="nofollow">http://codepen.io/anon/pen/YqgVog?editors=1010</a></p>

<p>Any help will be appreciated.
Thanks.</p>
