tile.html

<html>  
  <head>  
    <title>Tile Test</title>  
    <script type="text/javascript">
	    function draw2()
	    {
	      var ctx = document.getElementById('tutorial').getContext('2d');
	      var img = new Image();
	      
	      var zoomLevel = 16;
	      
	      var addr = "http://b.tile.stamen.com/watercolor/" + zoomLevel.toString() + "/";
	      var origX = 16810;
	      var origY = 24347;
	      
	      var x = origX;
	      var y = origY;
	      var imgArray = [];
	      
	      var xTiles = 10;
	      var yTiles = 10;
	      
	      
	      //Fill image array with tiles.
	      for(i = 0; i < xTiles; i++)
	      {
	        //fill each row (y).
	        for(y = origY; y < origY+yTiles; y++)
	        {
	          //base url/x/y.jpg
	          imgArray.push(addr + x.toString() + "/" + y.toString() + ".jpg");
	        }
	        x++;  //increment to next column (x).
	      }
	      
	      ctx.height = 256*yTiles;
        ctx.width  = 256*xTiles;
        
        
	      //Draw all tiles.
	      imgArrayIndex = 0;
        for (i = 0; i < xTiles; i++)
        {
          for (j = 0; j < yTiles; j++)
          {
            img = new Image();
            img.src = imgArray[imgArrayIndex++];
            
            img.onload = (function(img, i, j){  //temporary closure to store loop 
                  return function () {          //variables reference 
                    ctx.drawImage(img,i*256,j*256,256,256);  
                  }
              })(img, i, j);
            }
          }
	    }

    </script>  
    <style type="text/css">  
      canvas { border: 1px solid black; }  
    </style>
  </head>
  <form id="search">
    <p>
      (This shit don't work right now. Chill.)
      <input id="search-location" class="span3" type="text" placeholder="Type a location">
      <input id="search-submit" class="btn" type="submit" value="Find">
    </p>
  </form>
  
  <body onload="draw2();">  
    <canvas id="tutorial" width="2560" height="2560"></canvas>
      
      
  </body>  
</html>