Stacking order

Layers are stacked on top of each other in their order of creation, so more recently created layers will be drawn on top of already existing layers.

The first layer you create will have an index of 1; the next one will have 2, and so on.

You can check the hierarchy of all the layers in the Layer Panel.

To change how layers are stacked, you can:

1. Simply change the order of creation by copy/pasting the code of one layer before or after another’s.
2. Set a layer’s index to a different value. Two layers might then have the same value. That’s no problem, but know that the last created layer will be drawn on top.
3. Use the placeBefore(), placeBehind(), bringToFront() and sendToBack() functions.

An example: We have these two layers:

layerA = new Layer
layerB = new Layer
# at this point layerB is on top of layerA

Now to place layer A in front of layer B we can do any of these:

layerA.placeBefore layerB
# now layerA is on top of layerB

layerB.placeBehind layerA
# …and this actually has the same effect

And here’s how to move layers directly to the front or back:

layerA = new Layer
layerB = new Layer
layerC = new Layer

# Put layerA on top
layerA.bringToFront()

# Draw layerB first
layerB.sendToBack()

Remember that child layers have their own hierarchy (that also starts with an index of 1) inside their parent layer. Thus, a child layer can only be placed before and behind its siblings inside the same parent.