How to determine Z-order when drawing in a one-point perspective?

Question

I'm trying to make a simple javascript that draws rectangles on a canvas, then draws the side faces based on a one-point perspective. The problem is, the amount of rectangles and their positioning is arbitrary, so faces tend to overlap in a way that wouldn't happen in true 3D perspective. How can I determine the correct drawing order so that this won't happen?

Here are some screenshots to illustrate what I mean:

Screenshot 1 - The wrong way. In this one, the grouping of red, green, and blue blocks is being drawn in the reverse order of how they should be drawn.

Screenshot 2 - The right way. This is the way that it should be drawn.

Answer 1

What you are looking for is called the Painter's Algorithm that is as long as you don't have any intersecting polygons

Answer 2

Since your screenshots don't work, I'm going to take a wild guess and assume that the problem your having is that drawing rectangles from back to front yields weird overlaps.

One approach to fixing this would be to use simple binary space partitioning. Essentially, expand every front facing rectangle to an infinite plane. Then, split all of the side rectangles where those planes intersect. Then, drawing from front to back should not product overlaps anymore, since the side rectangles will be split wherever any overlap problems would have occurred.

Edit: Ah, now that your screenshots work I don't think that's your problem. Ah well, I'll leave the answer anyways.