title: Javascript Image.onload callback to object function
body: <p>This is driving me nuts - I have been round and round in circles, and this no joy. I am loading multiple dynamic images, and have a simple Javascript object which I instantiate for each image, and which has a callback to render the image once it has loaded asynchronously. </p>
  
  <p>I have verified that the callback code works just fine on a stand-alone basis (ie. I can call the callback 'manually' after the image has loaded, and the image is rendered correctly), and I have verified that the image itself is successfully loaded (by switching the object's callback for a simple one line logging function), but when I try to tie it all together, the callback apparently never gets invoked.</p>
  
  <p>I'm relatively new to JS and I suspect that I am missing something fundamental about the way functions within objects are defined, but despite a lot of Googling, can't work out what. </p>
  
  <p>Please can someone show me the error of my ways?</p>
  
  <pre><code>function ImageHolder(aX,aY,aW,aH, anImageURL) {
      this.posx=aX;
      this.posy=aY;
      this.posw=aW;
      this.posh=aH;
      this.url=anImageURL;
  
      this.myImage = new Image();
      this.myImage.onload=this.onload;
      this.myImage.src=anImageURL;
      this.onload=function() {
  
          try {
              var d=document.getElementById("d");
              var mycanvas=d.getContext('2d');
              mycanvas.drawImage(this.myImage, this.posx, this.posy, this.posw, this.posh);
              } catch(err) {
                  console.log('Onload: could not draw image '+this.url);
                  console.log(err);
              }
      };
  }
  </code></pre>