canvas tile based map not showing up ( newbie )

[lopesam]

Hi, 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 ( I am using chrome BTW )

// Declares global variablesvar 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' propertiescanvas.width = width,canvas.height = height;// 2D arrays that make up mapsmaps = {	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 functionsmake = {	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 constantlyfunction update () {	c.clearRect(0, 0, width, height);	make.map(maps.two);	requestAnimationFrame(update);}// Begins updating when window is readywindow.addEventListener("load", function () {	update();});

code can also be found here: http://pastebin.com/5GcQwCVa

 

[Eduardo]

Hi, at the line 1 you are creating a canvas element, so you need to add to the DOM using something like:

document.body.appendChild(canvas);

And you forget to pass the argument 'TD' to the tile function at line 56.

[lopesam]

thanks, they were some pretty silly mistakes.