JavaScript - キャンバスをグローバル変数にする

Question

今、私はHTML5を使いこなし、JavaScriptを使って単純な2Dタイルマップを作成しています。それはうまくいっているが、私はすべてのものを1つの巨大な機能の中に入れることができないことに気づいた

私はcanvasとcontextを他の機能でアクセス可能な変数としてグローバル化しようとしています。今は「負荷」でしか利用できません...どうすればそれを自分で作るのですか？私はcanvasを入れてcontext変数を作成すると...私はここでエラーにUncaught TypeError: Cannot call method 'getContext' of null

を取得し、私のSSCCEです：

// HTML5 JS Tile Example 

// Set return 2D array of map 
function loadMap(map) { 
    if (map == 1) { 
     return [ 
     [67, 67, 67, 67, 67, 67, 67, 67, 67, 190, 190, 67, 1, 1, 1, 1], [67, 393, 343, 343, 343, 343, 343, 343, 343, 190, 190, 448, 1, 166, 166, 1], [67, 343, 343, 393, 343, 343, 343, 343, 343, 343, 343, 448, 1, 166, 166, 1], [67, 1, 1, 1, 439, 1, 1, 1, 343, 13, 13, 13, 43, 166, 166, 1], [67, 1, 166, 166, 166, 166, 166, 1, 343, 13, 343, 448, 1, 166, 166, 1], [67, 1, 166, 166, 166, 166, 166, 1, 343, 13, 343, 448, 1, 166, 166, 1], [67, 1, 166, 166, 166, 166, 166, 1, 343, 13, 343, 448, 1, 319, 1, 1], [67, 1, 25, 1, 166, 321, 25, 1, 343, 13, 343, 343, 343, 343, 343, 67], [67, 424, 424, 424, 13, 424, 424, 424, 343, 13, 343, 343, 343, 394, 343, 67], [370, 13, 13, 13, 13, 13, 13, 13, 13, 13, 67, 67, 343, 343, 343, 67], [67, 67, 67, 67, 67, 67, 67, 67, 67, 370, 67, 67, 67, 67, 67, 67]]; 
    } 
} 

// On load... 
window.onload = function() { 
    var canvas = document.getElementById("canvas"); 
    var context = canvas.getContext("2d"); 
    var imageObj = new Image(); 
    var tiles = []; 
    var board = loadMap(1); 

    canvas.width = 512; 
    canvas.height = 352; 

    // 2. SET UP THE MAP TILES 
    for (x = 0; x <= 520; x++) { 
     imageObj = new Image(); // new instance for each image 
     imageObj.src = "line_tile/t" + x + ".png"; 
     tiles.push(imageObj); 
    } 
    var theX; 
    var theY; 
    // 3. DRAW MAP BY ROWS AND COLS 
    for (x = 0; x <= 10; x++) { 
     for (y = 0; y <= 15; y++) { 

      theX = x * 32; 
      theY = y * 32; 
      context.drawImage(tiles[board[x][y]], theY, theX, 32, 32); 
     } 
    } 
}; 

オンライン例：http://mystikrpg.com/html5/

Answer 1

ちょうどvar宣言を削除して、変数を宣言外：

// HTML5 JS Tile Example 

// Set return 2D array of map 
function loadMap(map) { 
    if (map == 1) { 
     return [ 
     [67, 67, 67, 67, 67, 67, 67, 67, 67, 190, 190, 67, 1, 1, 1, 1], [67, 393, 343, 343, 343, 343, 343, 343, 343, 190, 190, 448, 1, 166, 166, 1], [67, 343, 343, 393, 343, 343, 343, 343, 343, 343, 343, 448, 1, 166, 166, 1], [67, 1, 1, 1, 439, 1, 1, 1, 343, 13, 13, 13, 43, 166, 166, 1], [67, 1, 166, 166, 166, 166, 166, 1, 343, 13, 343, 448, 1, 166, 166, 1], [67, 1, 166, 166, 166, 166, 166, 1, 343, 13, 343, 448, 1, 166, 166, 1], [67, 1, 166, 166, 166, 166, 166, 1, 343, 13, 343, 448, 1, 319, 1, 1], [67, 1, 25, 1, 166, 321, 25, 1, 343, 13, 343, 343, 343, 343, 343, 67], [67, 424, 424, 424, 13, 424, 424, 424, 343, 13, 343, 343, 343, 394, 343, 67], [370, 13, 13, 13, 13, 13, 13, 13, 13, 13, 67, 67, 343, 343, 343, 67], [67, 67, 67, 67, 67, 67, 67, 67, 67, 370, 67, 67, 67, 67, 67, 67]]; 
    } 
} 

// On load... 

var canvas; 
var context; 

window.onload = function() { 
    canvas = document.getElementById("canvas"); 
    context = canvas.getContext("2d"); 
    var imageObj = new Image(); 
    var tiles = []; 
    var board = loadMap(1); 

    canvas.width = 512; 
    canvas.height = 352; 

    // 2. SET UP THE MAP TILES 
    for (x = 0; x <= 520; x++) { 
     imageObj = new Image(); // new instance for each image 
     imageObj.src = "line_tile/t" + x + ".png"; 
     tiles.push(imageObj); 
    } 
    var theX; 
    var theY; 
    // 3. DRAW MAP BY ROWS AND COLS 
    for (x = 0; x <= 10; x++) { 
     for (y = 0; y <= 15; y++) { 

      theX = x * 32; 
      theY = y * 32; 
      context.drawImage(tiles[board[x][y]], theY, theX, 32, 32); 
     } 
    } 
}; 

これにより、グローバルスコープで