HTML5 Canvas Widget Tutorial using KineticJS

April 4, 2013

HTML5 is rich in functionality. Many of them involved with canvas element. KineticJS library makes it easy to work with HTML5 canvas element to create custom drawn widgets. Here I am presenting a simple example to draw a circle with animation.

Draw a circle with animation

1. Add a container

<div id="container"></div>

2. Initialize height and width of container while creating stage object.

stage = new Kinetic.Stage({

container: &#039;container&#039;,

width: 578,

height: 200


3. Create Kinetic layer.

layer = new Kinetic.Layer();

4. Specify interval to call circle draw method

adobe creative suite upgrade

interval = setInterval(drawCircle, 1000);

5. In drawCircle method, increase degree between 2 lines upto 360 in each call.

6. Create wedge object and initialize following parameters:

a. x and y coordinate: center of circle

b. angleDeg: degree between two radius

c. radius: length of radius

d. rotationDeg: starting point for circle

wedge = new Kinetic.Wedge({

x: 100,

y: 100,

radius: 70,

angleDeg: degree,

fill: &#039;red&#039;,

rotationDeg: -90


7. Add created wedge to layer


8. Add a layer to stage

  • Web developer

    In HTML5 this elements are very useful for great design. Thank you gor sharing.

  • Sundar

    This is an excellent tutorial. Thanks again for the great tutorial.