JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas1" width="500" height="500"></canvas>

JavaScript

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

function drawArrowhead(locx, locy, angle, sizex, sizey) {
    var hx = sizex / 2;
    var hy = sizey / 2;
ctx.translate((locx ), (locy));
ctx.rotate(angle);
ctx.translate(-hx,-hy);

    ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,1*sizey);    
ctx.lineTo(1*sizex,1*hy);
ctx.closePath();
ctx.fill();
}
    

// returns radians
function findAngle(sx, sy, ex, ey) {
    // make sx and sy at the zero point
    return Math.atan((ey - sy) / (ex - sx));
}

var sx = 50;
var sy = 190;
var ex = 100;
var ey = 10;

ctx.beginPath();
ctx.fillStyle = "rgba(55, 217, 56,1)";
ctx.moveTo(10,10);
ctx.quadraticCurveTo(sx, sy, ex, ey);
ctx.stroke();

var ang = findAngle(sx, sy, ex, ey);
ctx.fillRect(ex, ey, 2, 2);
drawArrowhead(ex, ey, ang, 12, 12);