Connecting nodes with lines using Javascript/JQuery and HTML (no canvas)

Question

I'm close, but my math is all kinds of screwed up somewhere or something...

Here is a fiddle of the current state.

Here are the nodes and lines:

drawnode(entity, 200, 200);
drawnode(entity, 200, 300);
drawnode(entity, 400, 300);

drawline(200, 200, 200, 300);
drawline(200, 300, 400, 300);
drawline(400, 300, 200, 200);

Here is the result:

Here are my two functions:

function drawnode(x, y) {

    var ele = ""
    var style = "";
    style += "position:absolute;";
    style += "z-index:100;"
    ele += "<div class='relNode' style="+ style + ">";
    ele += "<span> Test Node</span>"
    ele += "<div>"

    $('#rPaper').show();
    var node = $(ele).appendTo('#rPaper');
    var width = node.width();
    var height = node.height();

    var centerX = width / 2;
    var centerY = height / 2;

    var startX = x - centerX;
    var startY = y - centerY;

    node.css("left", startX).css("top", startY);

}

function drawline(ax, ay, bx, by) {
    if (ay > by) {
        bx = ax + bx;
        ax = bx - ax;
        bx = bx - ax;
        by = ay + by;
        ay = by - ay;
        by = by - ay;
    }
    var calc = Math.atan((ay - by) / (bx - ax));
    calc = calc * 180 / Math.PI;
    var length = Math.sqrt((ax - bx) * (ax - bx) + (ay - by) * (ay - by));
    var style = ""
    style += "height:" + length + "px;"
    style += "width:1px;"
    style += "background-color:black;"
    style += "position:absolute;"
    style += "top:" + (ay) + "px;"
    style += "left:" + (ax) + "px;"
    style += "transform:rotate(" + calc + "deg);"
    style += "-ms-transform:rotate(" + calc + "deg);"
    style += "transform-origin:0% 0%;"
    style += "-moz-transform:rotate(" + calc + "deg);"
    style += "-moz-transform-origin:0% 0%;"
    style += "-webkit-transform:rotate(" + calc + "deg);"
    style += "-webkit-transform-origin:0% 0%;"
    style += "-o-transform:rotate(" + calc + "deg);"
    style += "-o-transform-origin:0% 0%;"
    style += "-webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, .1);"
    style += "box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, .1);"
    style += "z-index:99;"
    $("<div style='" + style + "'></div>").appendTo('#rPaper');
}

I'm sure it's something terribly stupid.

Credit for drawline function goes to this SO solution, though I've modified it and somehow broken it.

edit: I don't believe my question is a duplicate of the suggested question. That is very generic while mine is specific with semi-functional code and a defined logical problem which has already been solved. The accepted answer there uses a 3rd party library, which was not an option for me.

Answer 1

See example in fiddle with testcases.

I changed 3 things:

1. calc changed to angle and additional change:

   angle = -angle;

2. exchange width and height. Rectange is defined with x,y,widht,height. I am more used to that arrangment.

3. Added check if (ax > bx) { instead of if (ay > by) {

Problem is actually how to draw narrow horizontal rectangle (line) and then rotate it correctly.