Resources : Blog

HTML5 Canvas Widget Tutorial using KineticJS

By Rahul Tamhane in User Interface Design

April 4, 2013

< All >

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.