Mit folgender Funktion kann man ein gleichschenkliges Dreieck mit BC = hc auf ein Canvas zeichnen. Dei Position des Dreieckes ist durch die zwei Punkte A und D bestimmt, die die Strecke von A nach D definieren.

Die Funktion kann rechts getestet werden. Der Javascript Code folgt hier:

let canvas = document.getElementById('canvas');
        
function arrow(Ex, Ey, Tx, Ty) {

    let ctx = canvas.getContext('2d'); 

    let ET = Math.sqrt(Math.pow(Tx - Ex, 2) + Math.pow(Ey - Ty, 2));
    let EL = Math.sqrt(Math.pow(ET / 2, 2) + Math.pow(ET, 2));
    let Alpha = Math.acos(ET / EL);
    let Alpha2 = Math.asin((Ey - Ty) / ET);

    let x_L = EL * Math.cos(Alpha + Alpha2);
    let y_L = EL * Math.sin(Alpha + Alpha2);

    let x_R = EL * Math.cos(Alpha - Alpha2);
    let y_R = EL * Math.sin(Alpha - Alpha2);

    let Rx = Ex + ((Tx > Ex)?1:-1) * x_R;
    let Ry = Ey + y_R;

    let Lx = Ex + ((Tx > Ex)?1:-1) * x_L;
    let Ly = Ey - y_L; 

    ctx.clearRect(0, 0, 300, 300);

    ctx.beginPath();
    ctx.moveTo(Ex, Ey);
    ctx.lineTo(Rx, Ry);
    ctx.lineTo(Lx, Ly);
    ctx.lineTo(Ex, Ey);
    ctx.stroke(); 

}

canvas.addEventListener('mousemove', function(e) { 
    
    arrow(150, 150, e.offsetX, e.offsetY);

});