title: Javascript function not showing alert properly
body: <p>I have written the following code in my <code>index.html</code> file:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Canvas Test&lt;/title&gt;
      &lt;script src="js/main.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="css/style.css"&gt;
  &lt;/head&gt;
  &lt;body onload="initialise();loadCanvas();"&gt;
      &lt;canvas id="gameCanvas" width="800" height="600"&gt;   
      &lt;/canvas&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And this in my <code>main.js</code> file:</p>
  
  <pre><code>var clickCount;
  var gameCanvas;
  var myImage;
  
  function initialise()
  {
      clickCount = 0;
      gameCanvas = document.getElementById("gameCanvas");
      myImage = new image();
      myImage.src = "../img/test.png";
  }
  
  function loadCanvas()
  {
      alert(clickCount);
  }
  </code></pre>
  
  <p>The code is supposed to show a alert saying <code>0</code> on the page load, but the alert shows <code>undefined</code> instead. So I updated the code like this in <code>index.html</code></p>
  
  <pre><code>&lt;body onload="initialise();"&gt;
  </code></pre>
  
  <p>And modified the function <code>initialise()</code> like this in <code>main.js</code>:</p>
  
  <pre><code>function initialise()
  {
      clickCount = 0;
      gameCanvas = document.getElementById("gameCanvas");
      myImage = new image();
      myImage.src = "../img/test.png";
      loadCanvas();
  }
  </code></pre>
  
  <p>Now the alert doesn't come at all. Can anyone tell me what am I doing wrong here? I am really new to HTML5 and javascript, and am really stuck up with this. Couldn't find a solution anywhere.</p>