title: KineticJS Uncaught TypeError: Cannot read property 'x' of undefined after Update
body: <p>I was using this tutorial to build up draggable polygons. <a href="http://tech.joshuacummings.com/2012/07/scalable-draggable-anchored-triangle-in.html" rel="nofollow">Tutorial</a></p>
  
  <p>Now I want to add Text into it and tried to update from kinetic-v3.10.0.js to a newer one. 
  But after update I always get the mentioned error message.</p>
  
  <p>Can someone please have a look on my code and help me out what I need to change, that it might work again?</p>
  
  <p>Here are parts of my code:</p>
  
  <p>Build Anchor</p>
  
  <pre><code>function buildAnchor(layer, x, y, name) {
  var anchor = new Kinetic.Circle({
      x: x,
      y: y,
      radius: 12,
      stroke: 'red',
      fill: '#ddd',
      strokeWidth: 4,
      draggable: true,
      name : name
  });
  
  // add hover styling
  anchor.on('mouseover', function() {
      document.body.style.cursor = 'pointer';
      this.setStrokeWidth(6);
      layer.draw();
  });
  anchor.on('mouseout', function() {
      document.body.style.cursor = 'default';
      this.setStrokeWidth(4);
      layer.draw();
  });
  
  layer.add(anchor);
  return anchor;}
  </code></pre>
  
  <p>Build Line:</p>
  
  <pre><code>function buildLine(layer, x1, y1, x2, y2, name) {
  var line = new Kinetic.Line({
      points: [x1, y1, x2, y2],
      stroke : '#000',
      strokeWidth : 2,
      name : name
  });
  
  var xDiff = x1 - x2;
  var yDiff = y1 - y2;
  
  var text = new Kinetic.Text({
      x: 0,
      y: 0,
      text: 'Test',
      fontSize: 20,
      fontFamily: 'Calibri',
      fill: 'green'
  });
  
  
  if (xDiff &lt; 0 &amp;&amp; yDiff == 0) {
      line.move(0,-30); //Point a -&gt; b
  }
  else if (xDiff == 0 &amp;&amp; yDiff &lt; 0) {
      line.move(30,0); //Point b -&gt; c
  }
  else if (xDiff &gt; 0 &amp;&amp; yDiff == 0) {
      line.move(0,30); //Point c -&gt; d
  }
  else if (xDiff == 0 &amp;&amp; yDiff &gt; 0) {
      line.move(-30,0); //Point d -&gt; a
  }
  else if (xDiff &lt; 0 &amp;&amp; yDiff &lt; 0) {
      line.move(0,-30);       
  }
  else if (xDiff &lt; 0 &amp;&amp; yDiff &gt; 0) {
      line.move(0,-30);
  }
  else if (xDiff &gt; 0 &amp;&amp; yDiff &gt; 0) {
      line.move(-5,30);
  }
  
  layer.add(text);
  layer.add(line);
  return line;
  return text;}
  </code></pre>
  
  <p>Build Triangle:</p>
  
  <pre><code>function buildTriangle(layer, points, name) {
  var triangle = new Kinetic.Polygon({
      stroke : '#666',
      strokeWidth : 8,
      name : name
  });
  
  triangle.scaleAnchor = function(anchor, factor) {
      anchor.attrs.x = ( anchor.attrs.x - this.center.x ) * factor + this.center.x;
      anchor.attrs.y = ( anchor.attrs.y - this.center.y ) * factor + this.center.y;
  };
  triangle.calculateCenter = function() {
      this.center.x = ( this.a.attrs.x + this.b.attrs.x + this.c.attrs.x ) / 3;
      this.center.y = ( this.a.attrs.y + this.b.attrs.y + this.c.attrs.y ) / 3;
  };
  
  triangle.a = buildAnchor(layer, points[0], points[1], 'anchor');
  triangle.b = buildAnchor(layer, points[2], points[3], 'anchor');
  triangle.c = buildAnchor(layer, points[4], points[5], 'anchor');
  line1 = buildLine(layer, points[0], points[1], points[2], points[3], 'line');
  line2 = buildLine(layer, points[2], points[3], points[4], points[5], 'line');
  line3 = buildLine(layer, points[4], points[5], points[0], points[1], 'line');
  triangle.was = { x : 0, y : 0 };
  triangle.center = { x : 0, y : 0 };
  
  layer.add(triangle);
  return triangle;}
  </code></pre>
  
  <p>Draw Triangle:</p>
  
  <pre><code>function drawtriangle() {
  var triangle = this.get('.triangle')[0];
  
  triangle.setPoints([    triangle.a.attrs.x - triangle.was.x, 
                          triangle.a.attrs.y - triangle.was.y,
                          triangle.b.attrs.x - triangle.was.x,
                          triangle.b.attrs.y - triangle.was.y,
                          triangle.c.attrs.x - triangle.was.x,
                          triangle.c.attrs.y - triangle.was.y ]);
  line1.setPoints([triangle.a.attrs.x - triangle.was.x, triangle.a.attrs.y - triangle.was.y, triangle.b.attrs.x - triangle.was.x, triangle.b.attrs.y - triangle.was.y]);
  line2.setPoints([triangle.b.attrs.x - triangle.was.x, triangle.b.attrs.y - triangle.was.y, triangle.c.attrs.x - triangle.was.x, triangle.c.attrs.y - triangle.was.y]);
  line3.setPoints([triangle.c.attrs.x - triangle.was.x, triangle.c.attrs.y - triangle.was.y, triangle.a.attrs.x - triangle.was.x, triangle.a.attrs.y - triangle.was.y]);
  
  triangle.calculateCenter.apply(triangle);}
  </code></pre>