So, what is KineticJS?

2 min read

(For more resources related to this topic, see here.)

With KineticJS you can draw shapes on the stage and manipulate them using the following elements:

  • Move

  • Rotate

  • Animate

Even if your application has thousands of figures, the animation will run smoothly and with a high enough FPS. The items are organized into layers, of which you can have as many as you want. Shapes can also be organized into groups. KineticJS allows unlimited nesting of shapes and groups. Scenes, layers, groups, and figures are virtual nodes, similar to DOM nodes in HTML. Any node can be styled or transformed. There are several predefined shapes, such as rectangles, circles, images, text, lines, polygons, stars, and so on. You can also create custom drawing functions in order to create custom shapes. For each object you can assign different event handlers (touch or mouse). You can also apply filter or animation to the shapes.

Of course, you can implement all the necessary HTML5 Canvas functionality without KineticJS, but you have to spend a lot more time, and not necessarily get the same level of performance. The creators of KineticJS put all their love and faith into a brighter future of HTML5 interactivity. The main advantage of the library is high performance, which is achieved by creating two canvas renderers – a scene renderer and a hit graph renderer. One renderer is what you see, and the second is a special hidden canvas that’s used for high-performance event detection. A huge advantage of KineticJS is that it is an extension to HTML5 Canvas, and thus is perfectly suited for developing applications for mobile platforms. High performance can hide all the flaws of the canvas in iOS, Android, and other platforms. It is a known fact that the iOS platform does not support Adobe Flash. In this case, KineticJS is a good Flash alternative for iOS devices. You can wrap up your KineticJS application with Cordova/PhoneGap and use it as an offline application, or publish to the App store.

In short, the following are the main advantages of KineticJS:

  • Speed

  • Scalability

  • Extensibility

  • Flexibility

  • Familiarity with API (for developers with the knowledge of HTML, CSS, JS, and jQuery)

If you are an active innovator and indomitable web developer, this library is for you.


In this article, we walked through the basics and main advantages KineticJS.

Resources for Article :

Further resources on this subject:


Please enter your comment!
Please enter your name here