title: Html5 canvas issue, image getting wrong size
body: <p>I'm trying to create a grid of 10x10 images. These are loaded from javascript (object) and use the onload method to add it to canvas. The adding works, however the canvas images seem to be resized. The result of the currentSizes.cellSize is 80 by the way. However it seems the images added are larger than the 80 defined, even though the drawImage parameters width and height get values 80..</p>
  
  <p>My goals is to built a canvas game as a jQuery plugin. I want to display a javascript-dynamically created grid with islands (just like the web browser conquest type of games). So I want to create a 100% width (and height) canvas where the javascript dynamically measures how big each cell (10x10) has to be.. </p>
  
  <p>So I have the following:</p>
  
  <pre><code>                for( var i = 0 ; i &lt; totalTiles ; i++ ) {
  
                  // go to first column in next row
                  if( x &gt;= 10 ) {
                      x   = x - 10;
                      y   = y + 1;
                  }
  
  
                  // build the world
                  tiles[i]    = new Image();
                  tiles[i].x  = x;
                  tiles[i].y  = y;
                  tiles[i].towidth    = currentSizes.cellSize;
                  tiles[i].toheight   = currentSizes.cellSize;
                  tiles[i].coordx = ( x * currentSizes.cellSize );
                  tiles[i].coordy = ( y * currentSizes.cellSize );
                  //tiles[i].onload   = function() { canvas2d.drawImage( tiles[i] , 0 , 0 ); }
                  //tiles[i].onLoad   = dibaMethods.drawTile( tiles[i] , ( x * currentSizes.cellSize ) , ( y * currentSizes.cellSize ) , canvas2d );
                  tiles[i].src    = "/images/world/tiles/card5.png";
  
                  lastIndex   = i;
  
                  console.log( "looping at: " + i + " with x/y: " + x + "/" + y + " and coordinates: " + tiles[i].coordx + "/" + tiles[i].coordy );
  
                  x++;
              }
              console.log( "Canvas tiles entered, loaded on DOM load, tiles added: " + tiles.length );
              tiles[lastIndex].onload     = function() {
                  for( var i = 0; i &lt; totalTiles ; i++ ) {
                      canvas2d.drawImage( tiles[i] , tiles[i].coordx , tiles[i].coordy );
                      //canvas2d.drawImage( tiles[i] , tiles[i].coordx , tiles[i].coordy , tiles[i].towidth , tiles[i].toheight );
                  }
              }
  </code></pre>
  
  <p>The HTML of the canvas:</p>
  
  <pre><code>&lt;canvas id="world"&gt;
  &lt;/canvas&gt;
  </code></pre>
  
  <p>Stylesheet:</p>
  
  <pre><code>    body { margin: 0; }
      canvas#world { clear: both; background: url("/images/world/clouds.jpg") no-repeat; width: 800px; height: 800px; }
  </code></pre>
  
  <p>You can see how far i got on the url: <a href="https://battles.hyn.me/world" rel="nofollow">https://battles.hyn.me/world</a></p>
  
  <p>Any advice is much appreciated! If the question needs elaborating, please comment!</p>