GraphicsJS Layers


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 addChild() 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 add new elements to a layer use:

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


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.


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

You are looking at an outdated v7 version of this document. Switch to the v8 version to see the up to date information.