Implement elbow connector tool on HTML5 canvas

See more:

Javascript

Canvas

I am trying to imitate elbow connector tool in MS Word to allow user to draw same on my canvas.However my elbow connector is not dancing like the one in MS Word, also there is option in Word to drag the shape from middle line.Has anyone done something like this before? Below is what i have coded so far.

var startPosX, startPosY, midPosX, midPosY;
function tool_elbowConnect() {
    var tool = this;
    this.started = false;

    this.mousedown = function (ev) {
        tool.started = true;
        tool.x0 = startPosX = ev.offsetX;
        tool.y0 = startPosY = ev.offsetY;

    };

    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 > startPosX) {
            midPosX = ((curPosX - startPosX) / 2) + startPosX;
        }
        else if (startPosX > curPosX) {
            midPosX = ((startPosX - curPosX) / 2) + curPosX;
        }

        if (curPosY > startPosY) {
            midPosY = ((curPosY - startPosY) / 2) + startPosY;
        }
        else if (startPosY > curPosY) {
            midPosY = ((startPosY - curPosY) / 2) + curPosY;
        }

        drawElbowConnect(startPosX, startPosY, midPosX, curPosX, curPosY, strokeColor)
    };

    this.mouseup = function (ev) {
        if (tool.started) {
            tool.mousemove(ev);
            tool.started = false;
            addCircuitTag(ev.offsetY, ev.offsetX);
            img_update();


        }
    };

}


function drawElbowConnect(startPosX, startPosY, midPosX, curPosX, curPosY, strokeColor,isArrowHead) {

//Line 1
context.beginPath();
context.moveTo(startPosX, startPosY);
context.lineTo(midPosX, startPosY);
context.strokeStyle = strokeColor;
context.stroke();
context.closePath();

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

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