Resources : Blog

HTML5 Canvas Widget Tutorial using KineticJS

By Rahul Tamhane in User Interface Design

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

[code language="html"]
<div id="container"></div>
[/code]

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

[code language="javascript"]

stage = new Kinetic.Stage({

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

width: 578,

height: 200

});
[/code]

3. Create Kinetic layer.

[code language="javascript"]

layer = new Kinetic.Layer();
[/code]

4. Specify interval to call circle draw method

adobe creative suite upgrade
[code language="javascript"]

interval = setInterval(drawCircle, 1000);
[/code]

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

[code language="javascript"]

wedge = new Kinetic.Wedge({

x: 100,

y: 100,

radius: 70,

angleDeg: degree,

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

rotationDeg: -90

});
[/code]

7. Add created wedge to layer

[code language="javascript"]
layer.add(wedge);
[/code]

8. Add a layer to stage

[code language="javascript"]
stage.add(layer);
[/code]
765qwerty765
  • 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.