What are the differences between group and layer in KineticJs

Question

I am developing a HTML5 web application using KineticJS. I read that in KineticJS there are grouping and layering. As far as I know there are no differences between them. Can you tell me the differences?

Answer 1

The basic difference: Groups are containers while Layers are separators.

Group:

• A group is a container for shaped objects inside a layer.
• For example, a group might contain both a circle and a rectangle.
• A group can be manipulated and all elements within that group are similarly manipulated.
• For example, dragging a group will simultaneously drag a circle and rectangle contained in that group.

Layer:

• Layers are actually separate canvas elements that are stacked atop each other.
• This is similar to the way layers work in Photoshop and Illustrator.
• Multiple layers are visible simultaneously.
• If objects from different layers overlap, the topmost object displays fully (like z-indexing).

Groups are used to contain multiple items so they can be manipulated as a group--like putting circles and lines into a group to create a "stickman". Moving the group will move all the pieces of the stickman.

Layers are used to separate different items--like having a background layer that doesn't change and a top layer where animation is occurring.