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.

Scouring

Answer 1

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

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

Beecher

Thank you @stot. These createjs stage methods are the same than the old Flash ones btw. For those who use Adobe Animate, here's the syntax, as stage is referred to this: this.setChildIndex( my_movieclip, this.getNumChildren()-1); – Caputto

In the newer versions getNumChildren is deprecated. You can directly call the property numChildren now. Source: createjs.com/docs/easeljs/classes/… – Bibliogony

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.

Turkic

Indeed, the setChildIndex, addChild, and addChildAt APIs will help you do this. – Ambassador

it is possible to set its index using stage.setChildIndex(..) see @Beecher answer – Gannes