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.
What you are looking for is called the Painter's Algorithm that is as long as you don't have any intersecting polygons
