Draw arrow at the end of elbow connector on Canvas

See more:

Javascript

Canvas

I have implemented elbow connector tool to be drawn on canvas, the elbow connector is working properly however i want to show arrow at the end of elbow connector. I have added the arrow at the end of line but some how i am not able to get proper angle for arrow end and my arrow end keeps rotating as my elbow connector moves.Could anyone please help.Below is my code.

 var startPosX1, startPosY1, startPosX2 = "", startPosY2 = "", midPosX1, midPosY1;
function tool_elbowArrowConnect() {
    var tool = this;
    this.started = false;
    //cPush();
    this.mousedown = function (ev) {
        tool.started = true;
        tool.x0 = startPosX1 = ev.offsetX;
        tool.y0 = startPosY1 = ev.offsetY;
        cPush();
    };

    this.mousemove = function (ev) {
        if (!tool.started) {
            return;
        }

        context.clearRect(0, 0, canvas.width, canvas.height);
        context.strokeStyle = strokeColor;
        var curPosX, curPosY;
        curPosX = ev.offsetX;
        curPosY = ev.offsetY;
        //elbow connector logic
        if (curPosX > startPosX1) {
            midPosX1 = ((curPosX - startPosX1) / 2) + startPosX1;
        }
        else if (startPosX > curPosX) {
            midPosX1 = ((startPosX1 - curPosX) / 2) + curPosX;
        }

        if (curPosY > startPosY1) {
            midPosY1 = ((curPosY - startPosY1) / 2) + startPosY1;
        }
        else if (startPosY1 > curPosY) {
            midPosY1 = ((startPosY1 - curPosY) / 2) + curPosY;
        }

        //Line 1
        context.beginPath();
        context.moveTo(startPosX1, startPosY1);
        context.lineTo(midPosX1, startPosY1);
        context.strokeStyle = strokeColor;
        context.stroke();
        context.closePath();

        //Line2
        context.beginPath();
        context.moveTo(midPosX1, startPosY1);
        context.lineTo(midPosX1, curPosY);
        context.strokeStyle = strokeColor;
        context.stroke();
        context.closePath();

        //Line3
        context.beginPath();
        context.moveTo(midPosX1, curPosY);
        context.lineTo(curPosX, curPosY);
        context.strokeStyle = strokeColor;
        context.stroke();

        if (midPosX1 != undefined && startPosX2 == "" && startPosY2 == "") {
            startPosX2 = midPosX1;
            startPosY2 = curPosY;
        }

        //  context.closePath();

        if (startPosX2 != ev.offsetX && startPosY2 != ev.offsetY) {
            var radianAngle = Math.atan((ev.offsetY - startPosY2) / (ev.offsetX - startPosX2));
            radianAngle += ((ev.offsetX > startPosX2) ? 90 : -90) * Math.PI / 180;
            drawArrowhead(ev.offsetX, ev.offsetY, radianAngle, context);
        }

    };

    this.mouseup = function (ev) {
        if (tool.started) {
            tool.mousemove(ev);
            tool.started = false;
            img_update();
        }
    };

}

function drawArrowhead(x, y, radians, ctx) {
    // context.clearRect(x - 5, y - 5, 10, 10);
    ctx.save();
    ctx.strokeStyle = strokeColor;
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.translate(x, y);
    ctx.rotate(radians);
    ctx.moveTo(0, 0);
    ctx.lineTo(6, 10);
    ctx.lineTo(-6, 10);
    ctx.closePath();
    ctx.restore();
    ctx.fillStyle = strokeColor;
    ctx.fill();
}