I'm experimenting with isometric tile maps in JavaScript and HTML5 Canvas. I'm storing tile map data in JavaScript 2D array.

// 0 - Grass
// 1 - Dirt
// ...
var mapData = [
    [0, 0, 0, 0, 0],
    [0, 0, 1, 0, 0,

and draw

for(var i = 0; i < mapData.length; i++) {
    for(var j = 0; j < mapData[i].length; j++) {
        var p = iso2screen(i, j, 0); // X, Y, Z
        context.drawImage(tileArray[mapData[i][j]], p.x, p.y);

but this function mean's all tile Z axis is equal to zero.

var p = iso2screen(i, j, 0);

Maybe anyone have idea and how to do something like mapData[0][0] Z axis equal to 3 mapData[5][5] Z axis equal to 5?

I have idea: Write function for grass, dirt and store this function to 2D array and draw and later mapData[0][0].setZ(3); But it is good idea to write functions for each tiles?

  • 3
    \$\begingroup\$ Your question is kind of unclear. Instead of saying "do something like..." Can you tell us what you want to do? I don't know how you're going to call .setZ(3) on an integer stored in an array. \$\endgroup\$
    – House
    Commented Jul 12, 2012 at 4:56
  • \$\begingroup\$ .setZ(3) work if I'm create functions for each tiles and create "setZ" method, but maybe is other method when create functions for all tiles? \$\endgroup\$
    – gyhgowvi
    Commented Jul 12, 2012 at 5:29

1 Answer 1


I'm assuming by Z axis we're kind of talking about the 'height' of the tile here.

If you're sure that there would only ever be one tile on each of the X and Y axes (like a heightmap) then you can just modify your map array to store two values rather than a number:

// mapData[i][j][0] is the tile Id, mapData[i][j][1] is the Z axis
var mapData = [
    [[0,0], [0,1], [0,0], [0,2], [0,3]],
    [[0,1], [0,0], [1,0, [0,1], [0,2],

If you're not sure of this (i.e, you might have caves or overhangs or similar features) then the way to do it is slices.

Slices are all the same size (the whole of your map) and you would have one for each and every Z level possible. You would also require a new tile type of 'Nothing', which means you just don't draw anything.

This way is more expensive, but if you need the flexibility it's the way to do it.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .