Javascript 为什么我的tileset不能在HTML画布上呈现？

我正在学习JavaScript，在下一个项目中，我想使用tileset游戏板和一些简单的机制创建一个简单的RPG，虽然我可以让大多数后端函数正常工作，但我似乎无法让我的tileset正确渲染

我目前正在尝试在tileset中的每个平铺上渲染相同图像的逻辑，但是当我尝试渲染tileset时，什么都没有发生。检查控制台不会显示任何错误或问题，在搜索了一些教程之后，我没有看到我的渲染在哪里会出现故障，也无法工作，因为我只尝试在每个平铺中渲染一个40px 40px的灰色正方形

下面是我的代码要点的链接：

以及它的原始糊状物：

//创建游戏平铺集地图
var c=document.getElementById（'canvas'）；
var canvas=c.getContext（'2d'）；
var tileImg=新图像（）；
tileImg.src='sampleTile.png'；
变量映射={
瓷砖：[
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
[11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
[21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
[31, 32, 33, 34, 35, 36, 37, 38, 39, 40],
[41, 42, 43, 44, 45, 46, 47, 48, 49, 50]
],
tSize:100，
行：5，
科尔斯：10，
getTile：函数（行、列）{
返回此.tiles[行][col]；
}
};
//用于验证map.getTile函数成功循环所有数组值的testGrid
var testGrid=function（）{
对于（r=0；r
HTML部分在这里：
标题
画画布

var c=document.getElementById（'canvas'）；
var canvas=c.getContext（'2d'）；
var tileImg=新图像（）；
tileImg.src=http://vignette3.wikia.nocookie.net/gtawiki/images/b/b6/Flag_of_Japan_（带边框）。png/修订版/最新版本？cb=20100321220053'；
变量映射={
瓷砖：[
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
[11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
[21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
[31, 32, 33, 34, 35, 36, 37, 38, 39, 40],
[41, 42, 43, 44, 45, 46, 47, 48, 49, 50]
],
行：5，
科尔斯：10，
getTile：函数（行、列）{
返回此.tiles[row[col]]；
}
};
var renderMap=函数（）{
变量大小=30；
var x=map.cols*大小；
var y=map.rows*大小；
对于（r=0；r
绘制画布
我很感激，但我真的很想得到一张图片来填充每个瓷砖。这不仅仅是为了得到一个网格，我还需要能够获得将图像绘制到画布的逻辑，以便以后可以展开并转换为完整/真实的瓷砖集。@Randy图像现在可以工作了。我更改了按钮位置，修改了尺寸，并从
canvas.drawImage
中删除了额外的参数。这满意吗？是的，这就是我想要的谢谢。除了drawImage上的额外参数外，画布上的尺寸和按钮放置是否导致了问题？这让我非常困惑，因为我在控制台或调试器中没有看到任何错误。再次感谢！我认为画布的尺寸和按钮的位置纯粹是审美的，额外的参数是主要问题。