title: fabric.js arrows and arrow head rotating
body: <p>I want to create arrows in fabric.js that connect two objects together.</p>
  
  <p>I have a jsFiddle link here: <a href="http://jsfiddle.net/xvcyzh9p/45/" rel="nofollow noreferrer">http://jsfiddle.net/xvcyzh9p/45/</a> (thanks to @gco).</p>
  
  <p>The above allows you to create two objects (two rectangles) and connect them together with a line.</p>
  
  <pre><code>function addChildLine(options) {
  canvas.off('object:selected', addChildLine);
  
  // add the line
  var fromObject = canvas.addChild.start;
  var toObject = options.target;
  var from = fromObject.getCenterPoint();
  var to = toObject.getCenterPoint();
  var line = new fabric.Line([from.x, from.y, to.x, to.y], {
      fill: 'red',
      stroke: 'red',
      strokeWidth: 5,
      selectable: false
  });
  canvas.add(line);
  // so that the line is behind the connected shapes
  line.sendToBack();
  
  // add a reference to the line to each object
  fromObject.addChild = {
      // this retains the existing arrays (if there were any)
      from: (fromObject.addChild &amp;&amp; fromObject.addChild.from) || [],
      to: (fromObject.addChild &amp;&amp; fromObject.addChild.to)
  }
  fromObject.addChild.from.push(line);
  toObject.addChild = {
      from: (toObject.addChild &amp;&amp; toObject.addChild.from),
      to: (toObject.addChild &amp;&amp; toObject.addChild.to) || []
  }
  toObject.addChild.to.push(line);
  
  // to remove line references when the line gets removed
  line.addChildRemove = function () {
      fromObject.addChild.from.forEach(function (e, i, arr) {
          if (e === line)
              arr.splice(i, 1);
      });
      toObject.addChild.to.forEach(function (e, i, arr) {
          if (e === line)
              arr.splice(i, 1);
      });
  }
  canvas.addChild = undefined;
  }
  
  function addChildMoveLine(event) {
      canvas.on(event, function (options) {
          var object = options.target;
          var objectCenter = object.getCenterPoint();
          // udpate lines (if any)
          if (object.addChild) {
              if (object.addChild.from)
                  object.addChild.from.forEach(function (line) {
                      line.set({ 'x1': objectCenter.x, 'y1': objectCenter.y });
                  })
                  if (object.addChild.to)
                      object.addChild.to.forEach(function (line) {
                          line.set({ 'x2': objectCenter.x, 'y2': objectCenter.y });
                      })
                      }
  
          canvas.renderAll();
      });
  }
  </code></pre>
  
  <p>I have tried looking at other examples to create an arrow in fabric.js but to implement in gco's fiddle has been a pain. </p>
  
  <p>My best attempt at this can be found here: <a href="http://example.legalobjects.com/" rel="nofollow noreferrer">http://example.legalobjects.com/</a></p>
  
  <p><strong>It looks something like this:</strong>
  <a href="https://i.stack.imgur.com/DvIcI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DvIcI.png" alt="enter image description here"></a></p>
  
  <p>Some of the problems I have experience are:</p>
  
  <ul>
  <li>The arrow head not moving around the in the correct direction</li>
  <li>The arrow head (or multiple arrow heads) breaking when more than one arrow is added to the canvas - they get "stuck" for some reason.</li>
  <li>Arrow head/line not moving around the object</li>
  </ul>
  
  <p><strong>When adding more than one arrow this happens:</strong>
  <a href="https://i.stack.imgur.com/4aM2U.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4aM2U.png" alt="enter image description here"></a></p>
  
  <p>If anyone has any ideas or can help at all, I would be very appreciative!</p>
  
  <p>Thanks.</p>