为什么我的drawChar函数的drawImage没有显示？

首先，我正在尝试使用HTML5画布和Javascript进行2D游戏的非常简单的平铺 Map 引擎，除了我的第二个drawChar函数的drawImage（）没有在画布上显示外，一切似乎都正常 . 我知道网址很好，我已经检查过丢失的字符等，但是无法弄明白 . 代码如下 . 任何帮助表示赞赏 .

附：我知道这些代码中的大部分都不是“现代”或“最佳实践”，我仍在学习，我只是想了解为什么会出现这种错误 . 谢谢 .

<canvas id="canvas" width="1000" height="500" style="border: 2px solid black; margin: 10px auto;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var draw=canvas.getContext('2d');

var tileSize=canvas.height/10;
var mapLength=canvas.width/tileSize;
var tilex=0;
var tiley=0;

var tile1= new Image();
var tile2= new Image();
var charImg= new Image();

tile1.src='https://raw.githubusercontent.com/daveboy87/Jscript-TileEngine/master/tile_sky.jpg';

tile2.src='https://raw.githubusercontent.com/daveboy87/Jscript-TileEngine/master/tile_ground.jpg';

charImg.src='https://raw.githubusercontent.com/daveboy87/Jscript-TileEngine/master/player.jpeg';



var mapArray = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 1, 1]
];





function drawMap() {

for (var y=0; y<mapLength; y++){
for (var x=0; x<tileSize; x++){


tilex=x*tileSize;
tiley=y*tileSize;


if (parseInt(mapArray[y][x]) == 0) {

draw.drawImage(tile1, tilex, tiley, tileSize, tileSize);   }

if (parseInt(mapArray[y][x]) == 1) {

draw.drawImage(tile2, tilex, tiley, tileSize, tileSize);   }

                              }
                              }
               }


function drawChar(){
draw.drawImage(charImg, 300, 200, tileSize, tileSize);     }


function nextFrame(){
draw.clearRect(0, 0, canvas.width, canvas.height);
drawMap();
drawChar();
}

setInterval(nextFrame, 1000);