title: Drawing path with FabricJS
body: <p>First:</p>
  
  <pre><code>var canvas = new fabric.StaticCanvas('c');
  var path = new fabric.Path('M 0 0 L 50 0 M 0 0 L 4 -3 M 0 0 L 4 3 z', {
      left: 100,
      top: 100,
      stroke: 'red',
      strokeWidth: 1,
      fill: false
  });
  canvas.add(path);
  </code></pre>
  
  <p>result:</p>
  
  <p><img src="https://i.stack.imgur.com/wyPpB.png" alt="enter image description here"></p>
  
  <hr>
  
  <p>So how can I rotate this arrow by 45 degree whose center point is the head of the arrow like this:</p>
  
  <p><img src="https://i.stack.imgur.com/NhqZp.png" alt="enter image description here"></p>
  
  <p>I tried to set 'originX' and 'originY', but the problem is I cannot set the origin to the head of the arrow by setting these two parameters. As shown below:</p>
  
  <pre><code>var canvas = new fabric.StaticCanvas('c');
  var path = new fabric.Path('M 0 0 L 50 0 M 0 0 L 4 -3 M 0 0 L 4 3 z', {
      left: 100,
      top: 100,
      stroke: 'red',
      strokeWidth: 1,
      fill: false,
      **originX: 'left',**
      **originY: 'top'**
  });
  canvas.add(path);
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/gLq6H.png" alt="enter image description here"></p>
  
  <pre><code>var canvas = new fabric.StaticCanvas('c');
  var path = new fabric.Path('M 0 0 L 50 0 M 0 0 L 4 -3 M 0 0 L 4 3 z', {
      left: 100,
      top: 100,
      stroke: 'red',
      strokeWidth: 1,
      fill: false,
      originX: 'left',
      originY: 'top',
      **angle: 45**
  });
  canvas.add(path);
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/PFwFr.png" alt="enter image description here"></p>