title: canvas drawImage loop issue
body: <p>I'm trying to modify <a href="https://github.com/dwmkerr/spaceinvaders" rel="nofollow noreferrer">this</a> canvas game by replacing fillRect with images. </p>
  
  <p>No problems when changing the ship code in <em>spaceinvaders.js</em> on line 529:</p>
  
  <pre><code>ship = new Image();
  ship.src = "images/ship.svg";
  
  ctx.drawImage(ship, this.ship.x - (this.ship.width / 2), this.ship.y - (this.ship.height / 2), this.ship.width, this.ship.height);
  </code></pre>
  
  <p>but having trouble with invaders loop:</p>
  
  <pre><code>for(var i=0; i&lt;this.invaders.length; i++) {
  
      var invader = this.invaders[i] = new Image();
      this.invaders[i].src = "images/space_invader.png";
  
      //ctx.fillRect(invader.x - invader.width/2, invader.y - invader.height/2, invader.width, invader.height);
  
      this.invaders[i].onload = function(){
  
          var thisX = invader.x * 18;
          var thisY = invader.y * 14;
  
          return function() {
              ctx.drawImage(invader,invader.x - invader.width/2, invader.y - invader.height/2, invader.width, invader.height);
              //ctx.drawImage(this, thisX, thisY, invader.width, invader.height);
          };
  
      };
  }
  </code></pre>
  
  <p>When I get the invader image to finally show, it stacks them all in top of each other. - Even with thisX and thisY variables. </p>
  
  <p>EDIT: </p>
  
  <pre><code>img = new Image();
  
  img.onload = function(){
  
      for(var i=0; i&lt;this.invaders.length; i++) {
          for(var j=0; j&lt;this.invaders.length; j++) {
              var invader = this.invaders[i];
              ctx.drawImage(img,j*18, i*14, invader.width, invader.height);
          }
      }
  }
  
  img.src = "images/space_invader.png";
  </code></pre>
  
  <p>Gives: cannot read property 'length' of undefined. </p>
  
  <p>EDIT 2:</p>
  
  <pre><code>img = new Image();
  
  img.onload = function(){
  
      for(var i=0; i&lt;5; i++) {
          for(var j=0; j&lt;10; j++) {
              ctx.drawImage(img,j*22, i*16, 18, 14);
          }
      }
  }
  
  img.src = "images/space_invader.png";
  </code></pre>
  
  <p>This way I'm atleast able to see invaders but they are static: <a href="https://i.stack.imgur.com/vPNFw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vPNFw.png" alt="enter image description here"></a></p>
  
  <p>EDIT 3: </p>
  
  <pre><code>var invaders=[{x:0,y:0},{x:20,y:0},{x:40,y:0},{x:60,y:0},{x:80,y:0},{x:100,y:0},{x:120,y:0},{x:140,y:0},{x:160,y:0},{x:180,y:0},{x:0,y:16},{x:20,y:16},{x:40,y:16},{x:60,y:16},{x:80,y:16},{x:100,y:16},{x:120,y:16},{x:140,y:16},{x:160,y:16},{x:180,y:16},{x:200,y:16},{x:0,y:32},{x:20,y:32},{x:40,y:32},{x:60,y:32},{x:80,y:32},{x:100,y:32},{x:120,y:32},{x:140,y:32},{x:160,y:32},{x:180,y:32},{x:200,y:32},{x:0,y:48},{x:20,y:48},{x:40,y:48},{x:60,y:48},{x:80,y:48},{x:100,y:48},{x:120,y:48},{x:140,y:48},{x:160,y:48},{x:180,y:48},{x:200,y:48},{x:0,y:64},{x:20,y:64},{x:40,y:64},{x:60,y:64},{x:80,y:64},{x:100,y:64},{x:120,y:64},{x:140,y:64},{x:160,y:64},{x:180,y:64},{x:200,y:64}];
  
  for (var i=0; i&lt;this.invaders.length; i++) {
  
      invaders[i] = new Image();
  
      invaders[i].onload = function() {
          ctx.drawImage(this, x, y);         
      };
  
      invaders[i].src = "images/space_invader.png";
  }
  </code></pre>
  
  <p>Gives x is not defined. </p>
  
  <p>EDIT 4:</p>
  
  <pre><code>function createImage(i){   
  
  var image = new Image();  
      image.src = "images/space_invader.png";
      image.onload = function(){  
          ctx.drawImage(image,imagePos[i][0],imagePos[i][1], 20, 16);
      } 
  }
  
  var imagePos=[[0,0],[20,0],[40,0],[60,0],[80,0],[100,0],[120,0],[140,0],[160,0],[180,0],[0,16],[20,16],[40,16],[60,16],[80,16],[100,16],[120,16],[140,16],[160,16],[180,16],[0,32],[20,32],[40,32],[60,32],[80,32],[100,32],[120,32],[140,32],[160,32],[180,32],[0,48],[20,48],[40,48],[60,48],[80,48],[100,48],[120,48],[140,48],[160,48],[180,48],[0,64],[20,64],[40,64],[60,64],[80,64],[100,64],[120,64],[140,64],[160,64],[180,64]];
  
  for(var i = 0; i &lt;this.invaders.length; i += 1){
      createImage(i); 
  }
  return
  </code></pre>
  
  <p>Shows invaders but they keep flickering. (main game loop?)</p>