How can I set the z-index of EaselJS Graphics and Shapes

Question

I have EaselJS Shapes on the canvas and then I start drawing Graphics each tick. At the moment the graphics are being drawn over the Shapes. Is there a way to define the z-index so that the Shapes are drawn over the Graphics each frame?

Any help would be much appreciated.

Answer 1

To bring an DisplayObject to front after insertion just use this:

stage.setChildIndex( displayObject, stage.getNumChildren()-1);

Answer 2

The Canvas API has no built-in scene graph. Once something is drawn, the fact that it was drawn is forgotten, and there is no reference of the object tied to the canvas. This means that, if the object changes, the entire canvas could potentially need to be redrawn.

Thus, if you need your Shape objects to be drawn on top of your Graphics objects, just draw the Graphics before you draw the Shapes. You'll need to redraw the Shapes every time you redraw the Graphics.

You could also put both Shapes and Graphics into a Container, and use the indices of the Container to control the rendering order of the objects.

---

Edit: As noted by @stot's answer, it turns out that the Stage itself can be used to managed child indices. This is because the Stage extends the Container class, and thus inherits the methods of that class.