Jquery plugins Html5画布问题，图像大小错误

我正在尝试创建一个由10x10个图像组成的网格。这些是从javascript（对象）加载的，并使用onload方法将其添加到画布。添加工作正常，但画布图像似乎已调整大小。顺便说一下，currentSizes.cellSize的结果是80。但是，添加的图像似乎大于定义的80，即使drawImage参数width和height的值为80

我的目标是构建一个画布游戏作为jQuery插件。我想显示一个javascript动态创建的带有孤岛的网格（就像web浏览器征服类型的游戏一样）。所以我想创建一个100%宽度（和高度）的画布，javascript动态测量每个单元格（10x10）的大小

因此，我有以下几点：

                for( var i = 0 ; i < totalTiles ; i++ ) {

                // go to first column in next row
                if( x >= 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 < 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 );
                }
            }

你可以看到我在url上走了多远：

---

任何建议都将不胜感激！如果问题需要详细说明，请评论

问题源于没有宽度或高度属性的canvas元素

在编辑html以包含这些属性并删除样式表条目之后，它终于工作了

所以底线是，始终为canvas元素添加宽度和高度属性。

<canvas id="world">
</canvas>

    body { margin: 0; }
    canvas#world { clear: both; background: url("/images/world/clouds.jpg") no-repeat; width: 800px; height: 800px; }