title: JavaScript Image onload not called
body: <p>I'm trying to draw an image on the Canvas in Javascript, but ofcourse I want to wait until the image is loaded. However, my onload function seems to be never called.</p>
  
  <p>Here is what I've tried:</p>
  
  <pre><code>function GameObject(x, y)
  {
      this.x = x;
      this.y = y;
      this.image = {};
      this.loaded = false;
  
      this.load = function(filename)
      {
          this.image = new Image();
          this.image.onload = function()
          {
              alert("image loaded");
              this.loaded = true;
          };
          this.image.src = filename;
      };
  };
  </code></pre>
  
  <p>I'm calling the load function like this:</p>
  
  <pre><code>$( document ).ready(function()
  {
      main();
  });
  
  var player = new Player(0, 0);
  
  function main()
  {
      player.load("images/player.png");
  };
  </code></pre>
  
  <p>and Player inherits from GameObject.</p>
  
  <p>When using FireBug, it looks like the image is loaded, however the alert "image loaded" is never shown and this.loaded remains false.</p>
  
  <p>What could be wrong?</p>
  
  <p><em>EDIT</em>: The image is now loaded (there was an error in the path name), but this.loaded is never set to true, while the alert is called.</p>