kinetic-rectangle

by bhupendra negi

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.2.min.js"></script>
<div id="con"></div>

JavaScript

// preapring stage for kinetic.js

var stage = new Kinetic.Stage({
    container:'con',
    width:500,
    height:500

});
var layer = new Kinetic.Layer();

var rect = new Kinetic.Rect({
    
    x:0,
    y:20,
    width:100,
    height:50,
    fill:'green',
    stroke:'black',
    strokeWidth:5
    
});


var circle = new Kinetic.Circle({
    x: stage.getWidth() / 2,
    y: stage.getHeight() / 2,
    radius: 70,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 4,
    draggable:true
});

 var blueSpline = new Kinetic.Line({
        points: [10,10,300,100,50,100,-80,100],
        stroke: 'blue',
        strokeWidth: 10,
        lineCap: 'round',
        tension: .5,
         draggable:true
     
      });

//blob type with closed set property
      var greenSpline = new Kinetic.Line({
        points: [20,50,340,50,200,150,250,150],
        stroke: 'green',
          fill:'yellow',
        strokeWidth: 5,
        lineCap: 'round',
        tension: 1,
        dash: [10, 10],
          draggable:true,
          closed:true
      });

layer.add(greenSpline);
layer.add(blueSpline);
layer.add(circle);
layer.add(rect);
stage.add(layer);