HTML5 Canvas tile based map not showing up

Question

I am new to html5 canvas game dev and I am having a probably newbie problem.

I am making a tile based map that is supposed to turn a 2d array into a map with walls and open space, but whenever I open the game it just doesn't show up... I don't even get errors!?

Please help me ( I am using chrome BTW )

pastebin code: http://pastebin.com/5GcQwCVa#

// Declares global variables
var canvas = document.createElement("canvas");
    c = canvas.getContext("2d"),
    make = {},
    maps = {},
    width = 800,
    height = 600;

// Creates the requestAnimationFrame variable
(function () {
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    window.requestAnimationFrame = requestAnimationFrame;
}) ();

// Modifies the canvas' properties
canvas.width = width,
canvas.height = height;

// 2D arrays that make up maps
maps = {
    one: [
    ["w","w","w","w","w","w","w","w"],
    ["w","o","o","o","o","o","o","w"],
    ["w","o","w","w","w","w","o","w"],
    ["w","o","w","o","o","o","o","w"],
    ["w","o","w","o","w","o","o","w"],
    ["w","o","w","o","o","w","o","w"],
    ["w","o","o","o","o","o","o","w"],
    ["w","w","w","w","w","w","w","w"]
    ],

    two: [
    ["w","w","w","w","w","w","w","w"],
    ["w","o","o","o","o","o","o","w"],
    ["w","o","o","o","o","o","o","w"],
    ["w","o","o","o","o","o","o","w"],
    ["w","o","o","o","o","o","o","w"],
    ["w","o","o","o","o","o","o","w"],
    ["w","o","o","o","o","o","o","w"],
    ["w","w","w","w","w","w","w","w"]
    ]
};

// Maps drawing functions
make = {
    map: function ( map2d ) {
            var i,
                    j,
                    tile,
                    tilesX = 8,
                    tilesY = 8;

            for (i = 0; i < tilesX; i++) {
                    for(j = 0; j < tilesY; j++) {
                            if (map2d[i][j] === "w") {
                                    this.tile(i * 64, j * 64);
                            }
                    }
            }
    },

    tile: function (x, y, TD) {
            switch (TD) {
                    case "w":
                            c.rect(x, y, 64, 64);
                            c.fillStyle = wallColor;
                            c.fill();
                            c.lineWidth = 8;
                            c.strokeStyle = "black";
                            c.stroke();
                            break;

                    case "o":
                            c.rect(x, y, 64, 64);
                            c.fillStyle = "white";
                            c.fill();
                            c.lineWidth = 8;
                            c.strokeStyle = "white";
                            c.stroke();
                            break;
            }
    }
}

// Updates constantly
function update () {
    c.clearRect(0, 0, width, height);
    make.map(maps.two);
    requestAnimationFrame(update);
}

// Begins updating when window is ready
window.addEventListener("load", function () {
    update();
});

score 4 · Accepted Answer · edited May 23 '17 at 12:21

So there are a few things. The first is you need to actually add the canvas to the document, you can do that like so.

document.body.appendChild(canvas);

I added this to your windows load event listener.

The next thing is you aren't passing "o" or "w" to your function for the switch statement to be called. So I just hard coded w for now because you have this bit

            if (map2d[i][j] === "w") {
                this.tile(i * 64, j * 64, "w");
            }

So you are only calling draw if its a wall anyway.

After that you still see nothing because you have a variable called wallcolor that doesn't actually exist, so I changed your fill to just use black for now.

            c.beginPath();
            c.rect(x, y, 64, 64);
            c.fillStyle = "black";
            c.fill();

            c.lineWidth = 8;
            c.strokeStyle = "black";
            c.stroke();
            c.closePath();

Another thing you will notice is the addition of beginPath and closePath if you are creating paths you need to use these otherwise all your shapes will keep being added to the same path and every time you call fill or stroke it will fill or stroke everything you've already drawn making it really slow over time. The following is a good explanation of what paths are

Live Demo

// Declares global variables
var canvas = document.createElement("canvas");
    c = canvas.getContext("2d"),
    make = {},
    maps = {},
    width = 800,
    height = 600;

// Creates the requestAnimationFrame variable
(function () {
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    window.requestAnimationFrame = requestAnimationFrame;
}) ();

// Modifies the canvas' properties
canvas.width = width,
canvas.height = height;



// 2D arrays that make up maps
maps = {
    one: [
    ["w","w","w","w","w","w","w","w"],
    ["w","o","o","o","o","o","o","w"],
    ["w","o","w","w","w","w","o","w"],
    ["w","o","w","o","o","o","o","w"],
    ["w","o","w","o","w","o","o","w"],
    ["w","o","w","o","o","w","o","w"],
    ["w","o","o","o","o","o","o","w"],
    ["w","w","w","w","w","w","w","w"]
    ],

    two: [
    ["w","w","w","w","w","w","w","w"],
    ["w","o","o","o","o","o","o","w"],
    ["w","o","o","o","o","o","o","w"],
    ["w","o","o","o","o","o","o","w"],
    ["w","o","o","o","o","o","o","w"],
    ["w","o","o","o","o","o","o","w"],
    ["w","o","o","o","o","o","o","w"],
    ["w","w","w","w","w","w","w","w"]
    ]
};

// Maps drawing functions
make = {
    map: function ( map2d ) {
        var i,
            j,
            tile,
            tilesX = 8,
            tilesY = 8;

        for (i = 0; i < tilesX; i++) {
            for(j = 0; j < tilesY; j++) {
                if (map2d[i][j] === "w") {
                    this.tile(i * 64, j * 64, "w");
                }
            }
        }
    },

    tile: function (x, y, TD) {
        switch (TD) {
            case "w":
                c.beginPath();
                c.rect(x, y, 64, 64);
                c.fillStyle = '#000';
                c.fill();

                c.lineWidth = 8;
                c.strokeStyle = "black";
                c.stroke();
                c.closePath();
                break;

            case "o":
                c.rect(x, y, 64, 64);
                c.fillStyle = "white";
                c.fill();
                c.lineWidth = 8;
                c.strokeStyle = "white";
                c.stroke();
                break;
        }
    }
}

// Updates constantly
function update () {
    c.clearRect(0, 0, width, height);
    make.map(maps.two);
    requestAnimationFrame(update);
}

// Begins updating when window is ready
window.addEventListener("load", function () {
    // Add the canvas
    document.body.appendChild(canvas);
    update();
});

HTML5 Canvas tile based map not showing up

1 Answers1