How it works (v3.9.4+)

KineticJS applications require a container DOM element in the HTML page to contain a stage which is made up of layers.  Each layer is tied to its own canvas element, and can contain groups or shapes.  You can add event listeners to shapes, groups, layers, and the stage, and you can move them, rotate them, scale them, layer them on top of each other, and much more.  Groups can be used to contain shapes and other groups.

How is KineticJS so fast?

For event handling, the KineticJS stage is made up of a backstage layer and a buffer layer to provide high performance path and pixel detection.  Animations, transitions, and drag and drop operations are particularly smooth because developers can create an unlimited number of user defined layers which enable them to update and redraw some shapes while not touching others.  In addition, KineticJS also uses dynamic frame rates that change depending on CPU demand, layer hashing to eliminate unecessary layer redraws, and layer throttling to prevent excess redraws.

• 4. Result

  The result is a composite of the the user defined layers.

• 3. User Defined Layers

  User defined layers are layers that the developer can use however they like.  Layers can be used for traditional canvas drawings, to contain KineticJS shapes with or without event bindings, animations, etc.  KineticJS applications require at least one layer.

• 2. Backstage Layer

  The backstage layer is a hidden layer that uses a custom canvas context to render invisible shapes for the purpose of high performance path detection and executing shape event handlers.  The backstage layer is the key to enabling high performance canvas applications with thousands of custom shapes.

• 1. Buffer Layer

  The buffer layer is a hidden layer that's used for pixel detection and canvas composites.