In my game there is a large 2D map of various objects. Example. As you see, upon creation objects of the same type (trees for example) are placed correctly, but objects of another type (enemies) are placed on top of the no matter the position. Now, how can I arrange that everything is drawn according to it's position?

Another example (the dog should be drawn before the tree, and not on top of it):

Another example

  • \$\begingroup\$ How are you currently drawing things? \$\endgroup\$
    – Tetrad
    Oct 30, 2011 at 16:55
  • \$\begingroup\$ I iterate trough the list of all objects and draw them with this: screen.drawImage(imageObject, x, y); \$\endgroup\$
    – jcora
    Oct 30, 2011 at 17:03

2 Answers 2


Assuming that you have an array containing every object that needs to be drawn. On each game loop you would loop through this array and call each object's corresponding draw() method to place it on the canvas. If you are doing it this way then you can use a sorting function on the array that will sort the array based on the object's Y axis value. So when the next game loop occurs the objects will naturally be drawn in the order that you need.

var gameObjects = [{y:0}, {y:1}, {y:20}, {y:-4}, {y:2}];
gameObjects.sort(function(a,b) { return a.y - b.y; });

console.log(gameObjects); //gives: [{y:-4}, {y:0}, {y:1}, {y:2}, {y:20}]

var l = gameObjects.length,
    c = 0;
while(c < l) {

This way objects with small Y values will be drawn first and the last object drawn will have the largest Y value.


I'm just going out on a limb here and assuming that your drawing is painter style, in that something drawing first will show up behind something drawn after it.

If that's the case, it's simply a matter of sorting your entities by y position before you draw. I'm assuming you have some mechanism of iterating through all of your entities. You'll have to sort every time the list get modified, which if you have continuously moving entities will probably be every frame.

There are a handful of optimizations you can do with this. For one, you probably want to discard objects that aren't in your viewport at all, first. It's pretty common to put entities in tiles and then only sort those tiles. But those can come afterwards, depending on your performance issues..

  • \$\begingroup\$ Well I already know that :D And you got the drawing style I'm using. Also, I don't send the whole map it would kill my servers. And I believe the sorting should be done upon map creation. Now, how do I sort them objects according to their y position? \$\endgroup\$
    – jcora
    Oct 30, 2011 at 17:22
  • \$\begingroup\$ Well sorting upon map creation doesn't really help with your dynamic entities since their y position is going to change if they move. And when you say "how do I sort them" I'm assuming you mean what code you write, but I'm not familiar with Javascript enough to tell you that. Usually there's some built in sort method which takes a predicate of some kind that you use to say "sort these objects by this function". \$\endgroup\$
    – Tetrad
    Oct 30, 2011 at 17:27
  • 2
    \$\begingroup\$ In JavaScript you would use the sort method on your array. Invoking sort without parameters will result in lexical sort-order, but you can write a function that takes two parameters and returns -1, 0, or 1. Then call myarray.sort(mySortFunction) \$\endgroup\$
    – bummzack
    Oct 30, 2011 at 22:31

You must log in to answer this question.

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