# HTML5 Canvas Depth Sorting

I'm have problem with Isometric. I'm don't know how to name this "problem", but I'm show you some sceen what I get and what I'm need to get.

My code now drawing something like: http://2.bp.blogspot.com/_rqhF_8E1nlA/R59d_PmoREI/AAAAAAAAAGo/3yHpmy55moc/s400/lore2.png

But I'm need draw something like this: http://3.bp.blogspot.com/_rqhF_8E1nlA/R59epfmoRFI/AAAAAAAAAGw/cE_o-A0bvm0/s400/lore3.png

I'm hear this is "Depth sort" But what it is? how I'm can apply to my code and where I'm can learn this?

My code: 'http://jsdo.it/keichioor/exU1

• You asked this on Stack Overflow already :P – alex Jul 20 '12 at 13:02
• Note that the article where those images came from is demonstrating something different -- the second table is actually on top of the first table, but the depth sort can't deal with the non-transitive overlap of the 3 sprites. – Jimmy Jul 20 '12 at 17:22

What you call "Depth sort" is sorting the elements to make the nearest of the camera drawing "at the end", in order to "cover" the others.

With your code it gives something like that http://jsfiddle.net/dievardump/FjrB9/3/ I Just added this function to sort the block Array :

var sortMap = function (a, b) {
if (a.x > b.x){
return 1;
} else if (a.x < b.x) {
return -1;
} else {
if (a.y > b.y) {
return 1;
} else {
return -1;
}
}
}


because with your implementation, the more the x and the y are high, the more the element is near the camera.

Note : This implementation works for your current code, BUT for game/implementation with a moving camera, it exists generic function which gives you the distance to the camera, according to x/y (and sometimes z).