How to determine the stacking order of images on a canvas?

Question

JavaScript

Good evening!
I'm creating a game on HTML5 Canvas , something like this:

All buildings/roads will be drawn on canvas
SVG had to be abandoned so as not to hang mobile (and not only) browsers by the legs .
Images in the process of rendering overlap each other, but this needs to be controlled somehow - the smaller the ordinate ( y ) , the "further" the layer with the image of the building will be.
So how do you control the stacking order of rendered images?
UPD: How much will it slow down the browser to use a separate canvas for each building?

Answer 1

So how do you control the stacking order of rendered images?

Draw in the correct order. From far to near.
After they have already been drawn - no way.

Answer 2

Use libraries like Paper.