How to Draw Graphical Shapes using KineticJS?

KineticJS is a JavaScript library. It is light weight & provides better graphics. Let’s assume you want to develop an Interactive design document app. Here what you want is you need 3 panels left, right & center. Left panel is the toolbar. From where you can drag any shape to the center area. Where center area is a HTML5 Canvas. Here depending upon the requirements you can resize the shape, you can drag it to any corner of your central area, you can layer the shape or you can rotate the shape. While you selected a shape on canvas in right pan you can saw the property for that particular shape. If you will update the properties value it will reflect on the shape. In this case KineticJS is programmer friendly. Using kineticJS we can create shapes like Rectangle, Circle, Polygon, line & Ellipse.

Example to Draw shapes using KineticJS

To draw a shape using KineticJS in below program first I created a stage. On stage creating layer. Using configuration setting I am creating various shapes & adding this to layer. Finally adding layer to stage. To draw using stage.draw method.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example to Draw Shapes using KineticJS</title>
<script type="text/javascript" src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.3.min.js"></script>
</head>
<body>

<div id="canvasarea"></div>

<script type="text/jscript">
// Prepeare your stage first before draw a shape.
var stage = new Kinetic.Stage({
container: 'canvasarea',
width: 600,
height: 500,
draggable: false
});

// After stage you need a layer to draw shapes on this.
var layer = new Kinetic.Layer();

// How to draw a rectanlge using KineticJS?
var configRectangle = new Kinetic.Rect({
x: 339,
y: 60,
width: 200,
height: 80,
fill: 'lightblue',
stroke: 'black',
strokeWidth: 5,
draggable: true
});

// Add rectangle configuration settings to layer
layer.add(configRectangle);

// How to draw a circle using KineticJS?
var configCircle = new Kinetic.Circle({
x: 150,
y: 280,
radius: 70,
fill: 'lightblue',
stroke: 'black',
strokeWidth: 5,
draggable: true
});

// Add circle configuration settings to layer
layer.add(configCircle);

// How to draw a polygon using KineticJS?
var configPolygon = new Kinetic.Polygon({
points: [400, 392, 430, 320, 500, 280, 470, 209, 339, 239, 400, 392],
fill: 'lightblue',
stroke: 'black',
strokeWidth: 5,
draggable: true
});

// Add polygon configuration settings to layer
layer.add(configPolygon);

// How to draw a line using KineticJS?
var configLine = new Kinetic.Line({
points: [70, 450, 250, 450],
stroke: 'lightblue',
strokeWidth: 7,
lineCap: 'round',
lineJoin: 'round',
draggable: true
});

// Add line configuration settings to layer
layer.add(configLine);

// How to draw a ellipse using KineticJS?
var configEllipse = new Kinetic.Ellipse({
x: 150,
y: 100,
radius: {
x: 100,
y: 50
},
fill: 'lightblue',
stroke: 'black',
strokeWidth: 5,
draggable: true
});

// Add ellipse configuration settings to layer
layer.add(configEllipse);

// To present Add the layer to the stage
stage.add(layer);
stage.draw();
</script>
</body>
</html>

Updates

Example to Draw shapes using KineticJS