title: Cannot return from async method
body: <p>I am trying to define a class for entities that are drawn into an html canvas. The class gets defined as:</p>
  
  <pre><code>//classes for smallworld
  
  var Smwo = function (num1,num2,num3,bool1,num4,imageL)
  {
    this.posX = num1,
    this.posY = num2,
    this.margin = num3,
    this.blocking = bool1,
    this.intercept = num4,
    this.imageLink = imageL,
    this.spawn = function(xer,yer)
    {
      var randX = Math.floor(Math.random() * xer);
      var randY = Math.floor(Math.random() * yer);
      this.posX = randX;
      this.posY = randY;
      this.loadedImage = new Image();
      this.loadedImage.onload = function()
      {
        //register as live actor
        console.log("Loaded");
        return this.loadedImage;
        console.log(this.loadedImage);
      }
      this.loadedImage.src = this.imageLink;
    },
    this.act = function()
    {
      //unit behaviours
    },
    this.tick = function()
    {
      //unit lifecycle
    }
  };
  </code></pre>
  
  <p>Back in my window.onload that fires everything off I then try:</p>
  
  <pre><code>//spawn test
  smallWorld.newTree = new Smwo(10,10,10,true,5,"tree.png");
  var drawImage  = smallWorld.newTree.spawn(cWi,cHi);
  console.log(smallWorld.newTree);
  console.log(drawImage);
  context.drawImage(drawImage,10,10);
  </code></pre>
  
  <p>smallWorld is my global namespace, Ive also tried removing this namespace and get the same result. My console output shows I'm building a new instance of Smwo but drawImage is supposedly undefined and therefore the context.drawImage fails because the first passed variable isn't an image type.</p>
  
  <p>What am I missing here? I have an explicit return of the smwo.loadedImage, is that somehow not enough?</p>