title: Canvas Kinetic drawing shape with touch and click event
body: <p>i want use kinetic draw a shape with given points(x, y) when  the user click on these points, i will draw a line connect these points and when user click the first point again, we will have a shape by connect all the points and fill it with given color.</p>
  
  <p>Here is my code, but at drawShape function the poly shape do not appear after i added it into my layer, please have a look and give me some suggestion to make it works, thanks</p>
  
  <pre><code>$(document).ready(function() {
  
  var stage = new Kinetic.Stage({
      container : "web",
      height : 470,
      width : 470
  }), imgLayer = new Kinetic.Layer(), imgObj = new Image(), arrPosNode = [], clickedNode = [], animations = {}, pointArr = [];
  arrPosNode = ["221 22", "220 130", "220 235", "18 170", "420 170", "99 405", "345 405", "125 202", "320 202", "160 321", "286 320"];
  animations = {
      normal : [{
          x : 0,
          y : 0,
          height : 400,
          width : 410
      }],
      active : [{
          x : 0,
          y : 400,
          height : 400,
          width : 410
      }]
  }
  
  function addNode(pos, layer, activeColor, num) {
      var newPos = pos.split(" ");
      //console.log(newPos[0], newPos[1]);
      var node = new Kinetic.Circle({
          x : newPos[0],
          y : newPos[1],
          radius : 15,
          fill : 'transparent',
          id : 'node_' + num
      });
  
      node.on('click', function() {
          //node.setFill(activeColor);
          drawShape(node.getX(), node.getY(), node.getRadius(), layer);
          layer.draw();
      });
  
      layer.add(node);
  }
  
  function saveClickedPoint(x, y, radius) {
      for (var n = 0; n &lt; clickedNode.length; n++) {
          if (x == clickedNode[n].x &amp;&amp; y == clickedNode[n].y) {
              return;
          }
      }
      clickedNode.push({
          id : ('draw_' + (clickedNode.length + 1)),
          x : x,
          y : y,
          radius : radius
      });
  }
  
  function getArrFromPoint(obj) {
      pointArr = [];
      for (var n = 0; n &lt; obj.length; n++) {
          pointArr.push(parseInt(obj[n].x));
          pointArr.push(parseInt(obj[n].y));
      }
      return pointArr;
  }
  
  function drawShape(x, y, radius, layer) {
      saveClickedPoint(x, y, radius);
      if (clickedNode.length == 1)
          return;
      else {
          var points = getArrFromPoint(clickedNode);
          console.log(points);
          var poly = new Kinetic.Polygon({
              points : points,
              fill : "#d99694",
              stroke : "#d99694",
              strokeWidth : 5
          });
          layer.add(poly);
      }
  }
  
  
  imgObj.onload = function() {
      var bg = new Kinetic.Sprite({
          x : 15,
          y : 10,
          image : imgObj,
          height : 400,
          width : 410,
          animation : 'normal',
          animations : animations,
          frameRate : 1
      });
  
      imgLayer.add(bg);
  
      for (var n = 0; n &lt; arrPosNode.length; n++) {
          addNode(arrPosNode[n], imgLayer, 'transparent', n);
          /*d99694*/
      }
  
      stage.add(imgLayer);
  
      $('.valider').bind('click', function() {
          bg.setAnimation('active');
          imgLayer.draw();
      });
  };
  
  imgObj.src = "images/web_sprite.png";
  </code></pre>
  
  <p>});</p>