Kinetic Js Introduction

KineticJS is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more.

In order to understand what KineticJS is, you must be familiar with JavaScript development and should know the basics of HTML5 Canvas programming. KineticJS is a JavaScript library that helps us simplify the development of interactive HTML5 applications. In this case interactive applications are different 2D applications such as games, image editors, interactive maps, cartoons, and more (just turn on your imagination). From a technical point of view it is an extension to the HTML5 Canvas 2D context in the form of a JavaScript library. In addition, your application will work on all browsers that support HTML5, and even on mobile devices.

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

  • Move
  • Rotate
  • Animate

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. 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.

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)

All is well for now :D. But how to start with?? No worries..browse to kineticjs and click download on homescreen, where it will redirect to a page having js code..copy it and paste it in a notepad file and save as kinetic.js.

Now just use the script like all other external scripts..,

Example: Lets consider to draw a rectangle using kinetic js…

1. Include the kinetic javascript file in your html page..

2. create a container with div tag

3. declare stage and specify your container name,width and height. I knew, like me you have striked with one doubt..what is stage and why it is used? right? Ans is here…A stage is a place where you can create layers( Layers are tied to their own canvas element and are used to contain groups or shapes  ) and draw your shapes. In my understanding, i consider it as a paper on pad.

4. Next layer is declared. If at all required you can add up attributes/properties you need.

5. Now create a rectangle with your own dimensions.

6. Finally add this rectangle to layer and layer to stage which is resided in a div tag.

7.  Run the code


1. Code

24-06-2014 17-17-56

2. Output

24-06-2014 17-29-16


For more:

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s