javascript - Console error when drawing to canvas -

I have a main javascript file that is trying to attract a tilemap to the canvas for a game, and I have an included file that actually maps etc, but im pulls this error in firebug:

Writing Error: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement: None of the values ​​can be changed . [Break this error]

  ctx.drawImage (mapiles [map [x] [y]], x * tilixes, y * tilkses);   
 The main JS, which calls my level.js file, looks like this:  
  $ (document) .ready (function ( ) {Var canvas = document .getElementById ("TBG"); var reference = canvasgate contact ("2D"); var ui = new GUI (); var level = new level (); // ---- ------ Login / Register Gui -------------- $ ('# TBG') Hide (); $ ('# load-new') Hide () Hide $ ('# reg') ($); $ ('# login'); .. login_but is clicked function $ ('# login_but') by ui.login // if click (ui .login); // If reg_but is clicked ui do .register function $ ('# reg_but') Click (ui.register); .. $ ('# new_but') (function () {game_settings ("new");}); $ ('# load_but') Click (function () { Game_settings ("load");}); // login_sumbit button was clicked ("# login_submit") and click the ui.login_ajax function $ (ui.login_ajax); $ ("# reg_submit") .click ( Ui.register_ajax); $ ("Welcome") ("click on", "#logout_but", ui.logout) ;. // ____________________________________________ // game function game_settings (state) {if initialisation (state = = "load") {ui.load_game (); // do aja to finally load the user x call //level.level_init(0,1); Attract (); } Else {// set start parameter // change screen ui.new_game (); Alert ("new game"); }} Function draw () {context.clearRect (0,0, canvas.Wide, canvas.height); Level.draw (reference); SetTimeout (Draw, 30); } // End Loop});   
 And where this line of file (level.js) looks like this:  
  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], [2,2,2,2,2,2,2,2]]]; For (x = 1; x & lt; = 256; x ++) {var imageObj = new image (); // New example for each image image, obz. Src = "picture / prototype" "+ x +". Jpg "; mapTiles.push (imageObj);} This.draw = function (ctx) {(plus x = 0; x & lt; = 31; x ++) for {(y y = 0; y & lt; {Ctx.drawImage (mapTiles [map [x] [y]], x * tilselas, y * tilyses);}}}}}   
 for {0} Have you ever encountered this error?  
 And how will I fix this issue, thank you Tom   
 
 
 Forget about the canvas and everything else and use the  map  array and the code that uses it. Check the array access with any and  console.log ()  calls:  
  map = [[1,1,1,1,1, 1, 1,1,1,1], [2,2,2,2,2,2,2,2,2]]; Console.log (map.length); Console.log (map [0]. For length (; var x = 0; x & lt; = 31; x ++) {for (var y = 0; y & lt; = 31; y ++) {console.log (x, y Map [x], map [x] & amp;; and map [x] [y]);}}   
 Do you see the problem? You can see it by looking at it That those  console.log ()  calls will be printed. If not, then paste that code into the Chrome Developer Console and see what it does. (BTW, where in the last logic is the  map [x] and map [x] [y] , it is essentially the same as  map [x] [y]  But this prevents the code from crashing when the  map [x]  is  undefined  as you would see in the log.)  
 Now when we < Code> Map [x] [y]  is  undefined  some time, go back to the  drawImage ()  call, which uses it as image logic :  
  mapTiles [Map [x] [y]]   
 when  The [x] [y]  to  undefined , will evaluate the expression?