title: Drawing Tile Maps in canvas
body: <p>I am attempting to draw a tile map using 64x64 tileable images onto the HTML5 Canvas. They are named 1.png, 2.png, and 3.png. They are just 64x64 images that I intend to use to tile on a canvas background. 1.png is a pure green image, 2.png is pure grey image, 3.png is a pure brown image.
  <br>
  Here is my HTML:</p>
  
  <pre><code>&lt;canvas id='gameCanvas'&gt;&lt;/canvas&gt;
  &lt;script src='Index.js'&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Here is my JavaScript: </p>
  
  <pre><code>var canvas = document.getElementById('gameCanvas'),
  ctx = canvas.getContext('2d');
  canvas.width = 512;
  canvas.height = 512;
  var map = ['2','2','2','2','2','2','2','2','2','2',
          '2','1','1','1','1','3','1','1','1','2',
          '2','1','1','1','1','3','1','1','1','2',
          '2','2','2','2','2','2','2','2','2','2'],
  x = 0,
  y = 0,
  image = new Image();
  
  for (var j = 0; j &lt; map.length; j++){
      image.onload = function(){
          if(x == 512){
              x = 0;
           y += 64;
      }
      x += 64;
      ctx.drawImage(image, x, y);
  }
  image.src = 'Images/' + map[j] + '.png';
  }
  </code></pre>
  
  <p>For Some reason, it seems to be drawing all the images in one place. I think it has something to do with the <code>image.onload = functtion(){}</code>. Can anyone help me make this code draw each image 64 pixels (The width and Height of the images) apart.</p>