draw an arrow head HummusJS

Question

How can I draw an arrowhead in hummusJS? I am using hummus for drawing in pdf. I need to draw an arrow in pdf. I am able to draw the line. But how can I draw an arrowhead? I tried the following

if(x2 > y2)
            {
                a1 = x2-5;
                b1 = y2-5;
                a2 = x2-5;
                b2 = y2+5;
                a3 = x2+5;
                b3 = y2;
            }
            else
            {
                a1 = x2-5;
                b1 = y2+5;
                a2 = x2+5;
                b2 = y2+5;
                a3 = x2;
                b3 = y2-5;                
            }

 cxt.drawPath(a1,b1,a2,b2,a3,b3,{type: 'fill',
            color: '#000000'})

I tried like this also

      var d =5;
            a1 = x2-d*Math.sin(45);
            b1 = y2-d*Math.cos(45);
            a2 = x2+d*Math.sin(45);
            b2 = y2+d*Math.cos(45);
cxt.drawPath(x2,y2,a1,b1,{type: 'fill',
                color: '#000000'})
cxt.drawPath(x2,y2,a2,b2,{type: 'fill',
                color: '#000000'})

But this is not drawing arrowhead in the correct position here is the image

Answer 1

Based on answers from this question: How to calculate the coordinates of a arrowhead based on the arrow? particularly the accepted one: https://stackoverflow.com/a/10316601/1713942

You can calculate the coordinates needed using vector arithmetic:

function arrowhead(A, B) {
    var h = 10 * Math.sqrt(3);
    var w = 10;
    var d = {x: B.x - A.x, y: B.y - A.y};
    var length = Math.sqrt(d.x*d.x + d.y*d.y);
    var U = {x: d.x/length, y: d.y/length};
    var V = {x: -U.y, y: U.x};
    return [
        {x: B.x - U.x*h + V.x*w, y: B.y - U.y*h + V.y*w},
        {x: B.x - U.x*h - V.x*w, y: B.y - U.y*h - V.y*w}
    ];
}

h and w determine the length and half-width. The function returns two points: the ends of the arrowhead.

Usage Example:

var startPoint = {x:100, y:100};
var endPoint = {x:200, y:200};

var arrowPoint = arrowhead(startPoint, endPoint);

// draw line
cxt.drawPath(startPoint.x, startPoint.y, endPoint.x, endPoint.y);

// draw arrow head
cxt.drawPath(endPoint.x, endPoint.y, arrowPoint[0].x, arrowPoint[0].y, arrowPoint[1].x, arrowPoint[1].y, endPoint.x, endPoint.y, {type: 'fill', color: '#000000'});