html - JavaScript - Making canvas a global variable - Stack Overflow

admin2025-04-19 1

Right now, I am messing around HTML5 and using JavaScript to make a simple 2D Tile map. It's going well however I realized I cannot put everything inside one giant function.

I'm trying to make canvas and context variable global as in accessable by other functions. Right now, it's only available on "on load"... how do I make it in its own? When I put the canvas and context create variables... I get the error Uncaught TypeError: Cannot call method 'getContext' of null

Here is my 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);
        }
    }
};

Online example: /

Right now, I am messing around HTML5 and using JavaScript to make a simple 2D Tile map. It's going well however I realized I cannot put everything inside one giant function.

Here is my 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);
        }
    }
};

Online example: http://mystikrpg./html5/

Share Improve this question asked Apr 22, 2012 at 17:46 test 18.2k67 gold badges173 silver badges245 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 6

Just remove the var declarations and declare the variables outside:

// 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);
        }
    }
};

This will create the variables in global scope.

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745002587a279320.html

htmlJavaScriptMaking canvas a global variableStack Overflow

最新回复(0)