I am trying to create an arrow using line and triangle shapes. You can check the demo on jsbin:

,output

As you can see from the demo that arrow head's position varies with angle and it's not correct. What am I doing wrong here?

Here's the math I used to calculate angle:

var dx = x2 - x1,
    dy = y2 - y1,
    angle = Math.atan2(dy, dx);

angle *= 180 / Math.PI;
angle += 90;

I am trying to create an arrow using line and triangle shapes. You can check the demo on jsbin:

http://jsbin./xuyere/1/edit?js,output

As you can see from the demo that arrow head's position varies with angle and it's not correct. What am I doing wrong here?

Here's the math I used to calculate angle:

var dx = x2 - x1,
    dy = y2 - y1,
    angle = Math.atan2(dy, dx);

angle *= 180 / Math.PI;
angle += 90;

• javascript
• html5-canvas
• fabricjs
• trigonometry

1 Answer 1

I have changed the value of centerX and CenterY to center and its ing perfectly. Updated code should look like this. Your updated code http://jsbin./nepiqaviqe/1/edit?js,output

var triangle = new fabric.Triangle({
angle: angle,
fill: '#207cca',
top: y2,
left: x2,
height: headLength,
width: headLength,
originX: 'center',
originY: 'center',
selectable: false
  });

  fCanvas.add(triangle);
  }


function createLineArrow(points) {
 var line = new fabric.Line(points, {
strokeWidth: 5,
stroke: '#7db9e8',
originX: 'center',
originY: 'center',
hasControls: false,
hasBorders: false,
hasRotatingPoint: false,
hoverCursor: 'default',
selectable: false
 });