Javascript 扫雷板的单元格不显示Html&；CSS&；JS

我试图用Javascript创建一个扫雷板，但首先我尝试只创建一个单元格。这是我的密码。它假设从我创建的30px宽度和30px高度的图片（cell.png）中绘制一个单元格，但是当我运行代码时，我只看到画布。我做错了什么

变量s={
行：10，
上校：10，
宽度：30，
身高：30，
};
var c；
window.onload=函数（）{
var canvas=document.getElementById（“myCanvas”）；
c=canvas.getContext（“2d”）；
//c.fillRect（50,50300300）；
init（）；
}
var盒；
函数init（）{
box=新图像（）；
box.src=“cell.png”；
draw（）；
}
函数绘图（）{
c、 clearRect（0,0400）；
c、 drawImage（框，10,10）；
}

您遇到的问题是，您的代码在尝试绘制图像之前没有等待图像加载。您需要等待它被加载，然后调用图形代码，这可以通过图像的onload事件完成

var s={
行：10，
上校：10，
宽度：30，
身高：30，
};
var c；
window.onload=函数（）{
var canvas=document.getElementById（“myCanvas”）；
c=canvas.getContext（“2d”）；
init（）；
}
var盒；
函数init（）{
box=新图像（）；
//加载图像后将调用onload
box.onload=函数（）{
//这里你叫draw。
draw（）；
};
box.src=”http://placehold.it/30x30“；/”cell.png”；
}
函数绘图（）{
c、 clearRect（0,0400）；
c、 drawImage（框，10,10）；
}