Search code examples
javascripthtmlcanvashtml5-canvas

Set height order of html canvas circles

I have circles that animate to move over each other.

The issue is that I can't get one set of circles (satellites) to appear behind the other set based on some property. Is there a z-index-like property for canvas elements?

I want the orbiting satellites to go behind the planet. Not just draw over.

Solution

  • Regarding a potential "z-index" equivalent, you have to understand that in the canvas there are always only two elements, the content that's already drawn on the canvas, and the one that is being painted on it.
    And we can indeed tell to draw the new content behind what's already drawn thanks to the "destination-over" composite mode, that you set through the context's .globalCompositeOperation property.

    But for your case this won't really be helpful. The easiest for you is to keep all your entities in an Array, and sort this Array by z-index before drawing them in order.