title: Filling canvas shapes with multiple different images in a grid
body: <p>I am creating a hexagonal grid using canvas, and I'm trying to fill each tile with a specific pattern from an image.  The following code is what I'm working with. </p>
  
  <p>The end result is a hexagonal grid that has tiles patterned all with the same image... and it shouldn't be. I think what is happening is that it's creating an overlay for the pattern for every tile, but that image basically covers all tiles... and I only ever end up seeing that last image called.</p>
  
  <p>I was under the impression that my fill() was only filling that small hexagon shape... and not all of them.  How can I make this so each individual hex shape can have it's own image?</p>
  
  <p>This code is run in a for loop to create the grid. This is my drawHex() method. I can't imagine that I need a whole new canvas for each tile to make this happen.</p>
  
  <pre><code>var numberOfSides = 6,
  size = hex.properties.radius,
  Xcenter = hexObj.x + (hex.properties.width / 2),
  Ycenter = hexObj.y + (hex.properties.height / 2);
  
  var img = new Image();
  if (hexObj.t == "grassland"){
      img.src = "/static/grass.jpg";
  }else{
      img.src = "/static/mountain.jpg";
  }
  
  var pattern = context.createPattern(img, "repeat");
  context.fillStyle = pattern;
  context.beginPath();
  context.moveTo (Xcenter +  size * Math.cos(0), Ycenter +  size *  Math.sin(0)); 
  for (var i = 1; i &lt;= numberOfSides;i += 1) {
      context.lineTo (Xcenter + size * Math.cos(i * 2 * Math.PI / numberOfSides), Ycenter + size * Math.sin(i * 2 * Math.PI / numberOfSides));
  }
  context.fill();
  context.closePath();
  context.stroke();   
  </code></pre>