Javascript 绘制到画布时出现控制台错误

我有一个主javascript文件，它试图为一个游戏在画布上绘制一个tilemap，我有一个包含的文件，它实际上绘制了地图等，但我在firebug中遇到了这个错误：

TypeError:无法将值转换为以下任意值：HTMLImageElement、HtmlCanvaElement、HTMLVideoElement。 [在此错误上中断]

调用my level.js文件的主js如下所示：

$(document).ready(function(){

var canvas = document.getElementById("TBG");
var context = canvas.getContext("2d");

var ui = new Gui();
var level = new Level();

//----------Login/Register Gui --------------
$('#TBG').hide();
$('#load-new').hide();
$('#reg').hide();
$('#login').hide();

//if login_but is clicked do ui.login function
$('#login_but').click(ui.login);
//if reg_but is clicked do ui.register function
$('#reg_but').click(ui.register);

$('#new_but').click(function(){
    game_settings("new");
});

$('#load_but').click(function(){
    game_settings("load");
});

//if login_sumbit button is clicked do ui.login_ajax function
$("#login_submit").click(ui.login_ajax);

$("#reg_submit").click(ui.register_ajax);

$("#welcome").on("click", "#logout_but", ui.logout);

//____________________________________________
//Initialisation of game

function game_settings(state){
    if(state == "load"){
        ui.load_game();
        //do ajax call to load user last save
        //level.level_init(0,1);

        draw();
    }
    else{
        //set beginning params


        //Change screens
        ui.new_game();
        alert("new game");
    }
}

function draw () {

    context.clearRect(0,0,canvas.width,canvas.height);

    level.draw(context);

    setTimeout(draw, 30);


}
// End Loop 
      });

function Level(){

var tilesize = 32;
var map = 0;
var mapTiles = [];

   // var saved_level = level;
    //var saved_location = location;


map = [
    [1,1,1,1,1,1,1,1,1,1],
    [2,2,2,2,2,2,2,2,2,2]
];

    for (x = 1; x <= 256; x++) {
        var imageObj = new Image(); // new instance for each image
        imageObj.src = "images/prototype/"+x+".jpg";
        mapTiles.push(imageObj);
    }


this.draw = function(ctx) {
 for (var x = 0; x <= 31; x++){
        for ( var y = 0; y <= 31; y++){
            ctx.drawImage(mapTiles[map[x][y]],x*tilesize, y*tilesize);

    }
}
};

}

这行代码（level.js）所在的文件如下所示：

$(document).ready(function(){

var canvas = document.getElementById("TBG");
var context = canvas.getContext("2d");

var ui = new Gui();
var level = new Level();

//----------Login/Register Gui --------------
$('#TBG').hide();
$('#load-new').hide();
$('#reg').hide();
$('#login').hide();

//if login_but is clicked do ui.login function
$('#login_but').click(ui.login);
//if reg_but is clicked do ui.register function
$('#reg_but').click(ui.register);

$('#new_but').click(function(){
    game_settings("new");
});

$('#load_but').click(function(){
    game_settings("load");
});

//if login_sumbit button is clicked do ui.login_ajax function
$("#login_submit").click(ui.login_ajax);

$("#reg_submit").click(ui.register_ajax);

$("#welcome").on("click", "#logout_but", ui.logout);

//____________________________________________
//Initialisation of game

function game_settings(state){
    if(state == "load"){
        ui.load_game();
        //do ajax call to load user last save
        //level.level_init(0,1);

        draw();
    }
    else{
        //set beginning params


        //Change screens
        ui.new_game();
        alert("new game");
    }
}

function draw () {

    context.clearRect(0,0,canvas.width,canvas.height);

    level.draw(context);

    setTimeout(draw, 30);


}
// End Loop 
      });

function Level(){

var tilesize = 32;
var map = 0;
var mapTiles = [];

   // var saved_level = level;
    //var saved_location = location;


map = [
    [1,1,1,1,1,1,1,1,1,1],
    [2,2,2,2,2,2,2,2,2,2]
];

    for (x = 1; x <= 256; x++) {
        var imageObj = new Image(); // new instance for each image
        imageObj.src = "images/prototype/"+x+".jpg";
        mapTiles.push(imageObj);
    }


this.draw = function(ctx) {
 for (var x = 0; x <= 31; x++){
        for ( var y = 0; y <= 31; y++){
            ctx.drawImage(mapTiles[map[x][y]],x*tilesize, y*tilesize);

    }
}
};

}

功能级别（）{
var tilesize=32；
var-map=0；
var-mapTiles=[]；
//var保存的\u级别=级别；
//var保存位置=位置；
地图=[
[1,1,1,1,1,1,1,1,1,1],
[2,2,2,2,2,2,2,2,2,2]
];
对于（x=1；x忘掉画布和其他一切，看看
map
数组和使用它的代码。让我们撕掉画布代码，用一些
console.log（）调用检查数组访问：

map = [
    [1,1,1,1,1,1,1,1,1,1],
    [2,2,2,2,2,2,2,2,2,2]
];

console.log( map.length );
console.log( map[0].length );

for (var x = 0; x <= 31; x++){
    for ( var y = 0; y <= 31; y++){
        console.log( x, y, map[x], map[x] && map[x][y] );
    }
}

当
map[x][y]
是
未定义的
时，这个表达式的计算结果是什么？
苏格拉底，是你吗？：p回答：我们试图访问超出我们实际设置的元素数量的map数组元素。（嗨，迈克尔·盖里，我已经足够大了，在大学里我是用苏格拉底的方法学习的！）柏拉图！见到你真高兴，老朋友。是的，另一种说法是“mapTiles[未定义]
的计算结果是什么？”我们的朋友亚里士多德怎么样？你最近有没有收到他的来信？我一直想问他溢出堆栈意味着什么。