Still have questions?
Contact support
You are looking at an outdated 7.12.0 version of this document. Switch to the 7.14.0 version to see the up to date information.

GraphicsJS Layers

Overview

Layer is an object used to group elements in GraphicsJS. Elements must be grouped if you want to apply similar changes to them, transformation and alike. You can change layers in suspended mode, increasing performance and improving user experience.

Layers are transparent, by default they have no bounds (which can be changed using clip() method) and you can create as many layers as necessary, including nested layers (using appendChild() method).

Some basic samples of working with layers can be found in the Basics: Layers article.

Creating and Managing

Layers can be created using:

To remove a layer use:

To append new elements to a layer use:

Do not forget you can suspend and resume rendering while changing layers or elements within layers.

Transformation

Using layers makes it easier to operate with groups of elements. It's possible to transform them as a whole instead of working with each shape, path and element separately. See Transformation article.

Clipping and Bounds

By default each layer has no bounds and spans across the parent, you can change bounds of a layer using clip() method, clipping can be of any custom shape.

zIndex

You can swap layers using swapChildren() or swapChildrenAt() methods of a parent, or by changing zIndex using zIndex() method.