KineticJS

From simple 2D shapes and drawings, and up to complicated browser games, KineticJS can be used without a glitch for manipulating canvas elements inside the DOM.

KineticJS can work with many layers, animations and renderings, being ideal for animation and game engines.

What is new in this release:

• New FastLayer for ultra fast rendering. If you don't need node nesting, mouse and touch interactions, or event pub/sub, you should use FastLayer instead of Layer to create your layers. It renders about 2x faster than normal layers.
• Now passing a Kinetic event object to event handlers which contains a target, type, and evt key that points to the native event object.
• Can now configure if Kinetic should use degrees or radians via the Kinetic.angleDeg flag. By default it is true.

What is new in version 4.7.1:

• layer.clear() now correctly clears the layer
• layer.clear() now also clears the hit graph (this mirrors draw() which draws both the scene and hit graph)

What is new in version 4.5.2:

• Added event is now fired when nodes are added. event object with child property is passed.
• New setAttr() method which can be used to set Kinetic attrs, or even custom attrs. Custom attrs changes can also be subscribed to, just like Kinetic attrs. i.e. shape.on('myAttrChange', ...).
• New getType() to get node type. Will return Stage, Layer, Group, or Shape.

What is new in version 4.3.3:

• Bug fixes:
• Kinetic.Text events are now working correctly.
• Fixed scaling issue when drawing directly onto a layer canvas on mobile devices with a pixelRatio > 1.
• Wedge clockwise property is now correctly defaulted to false.

What is new in version 4.2.0:

• Pixel ratio optimization to sharpen text and image rendering on devices with a pixel ratio > 1
• New Wedge shape
• AMD support
• Fill patterns can now be translated, rotated, scaled, and offset, similarly to nodes

What is new in version 4.1.2:

• Changed createImageBuffer() to createImageHitRegion() for consistency.

What is new in version 4.0.5:

• New Features:
• Brighten filter (Thanks for getting this started Witali Mik!)
• Invert filter
• fire() method fires synthetic events without event bubbling
• Animation objects now contain frameRate property for convenience
• Enhancements:
• Greatly improved animation, transition, and drag and drop performance by introducing dynamic switching between fixed frame rates and dynamic frame rates
• simulate() method is now used to simulate user events, such as click, mousemove, mouseover, etc. When events are simulated, they can bubble up the Node tree.

What is new in version v3.10.4:

• New toImage() method converts any node into an image for the purpose of caching which can greatly improve drawing performance (as much as 4x faster for simple shapes)
• New applyFilter() method which enables you to apply filter logic to images (e.g. grayscale, inverting colors, etc.)
• toDataURL can now be used synchronously with layers, groups, and shapes. Stage toDataURL() is still asynchronous
• On attr change handler event object now contains oldVal and newVal property
• saveData() has changed to saveImageData(), and clearData() has changed to clearImageData()
• saveImageData() and clearImageData() now work with any node, including the stage, layers, and groups
• New on beforeAttrChange event handler which fires immediately before setting an attribute (in contrast to on attrChange, which fires immediately after an attr is updated)

What is new in version v3.10.3:

• New inheritiance model which enables you to more easily extend or add custom methods to Kinetic classes
• New Text newline support '\n'
• New clone method which clones any Kinetic object, including the object's user defined event listeners
• getIntersections can now be called from any Container, including Groups and Layers.
• Greatly improved Sprite animation performance by hooking into the global animation object

Requirements:

• JavaScript enabled on client side
• HTML 5 enabled browser