HTML line drawing without canvas (just JS)

Question

I am trying to use HTML and draw a line on a page.

From everything I have read suggests HTML5 canvas tag is the best to use, but I need the line to connect to something on the page which is not in a canvas tag so canvas is not good for me (want/need to use native JS).

I have written (from something I found) a function which does what i need but problem is once line appears, everything else of page disappears.

I found that every time I change the style in JavaScript everything but the shape disappears.

Deleting "document.write" ends with nothing disappearing.

function draw(ax, ay, bx, by) {
    var n, widthLine, i, x, y;
    widthLine = 1;
    if (Math.abs(ax - bx) > Math.abs(ay - by)) {
        if (ax > bx) {
            n = ax;
            ax = bx;
            bx = n;

            n = ay;
            ay = by;
            by = n;
        }
        n = (by - ay) / (bx - ax);

        for (i = ax; i <= bx; i++) {
            x = i;
            y = Math.round(ay + m * (x - ax));
            document.write("<div style='height:" + lineWidth + "px;width:" + widthLine + "px;background-color:black;position:absolute;top:" + y + "px;left:" + x + "px;'></div>");
        }
    } else {
        if (ay > by) {
            n = ax;
            ax = bx;
            bx = n;

            n = ay;
            ay = by;
            by = n;
        }
        n = (bx - ax) / (by - ay);

        for (i = ay; i <= by; i++) {
            y = i;
            x = Math.round(ax + n * (y - ay));
            document.write("<div style='height:" + lineWidth + "px;width:" + lineWidth + "px;background-color:black;position:absolute;top:" + y + "px;left:" + x + "px;'></div>");
        }
    }
}

Answer 1

A quick fix.

The below function gets the coords of the line and then draws it.

It works by using a long and thin div element. The rotation angle and length are calculated.

Should work across all browsers (hopefully even IE).

function linedraw(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));
    document.body.innerHTML += "<div id='line' style='height:" + length + "px;width:1px;background-color:black;position:absolute;top:" + (ay) + "px;left:" + (ax) + "px;transform:rotate(" + calc + "deg);-ms-transform:rotate(" + calc + "deg);transform-origin:0% 0%;-moz-transform:rotate(" + calc + "deg);-moz-transform-origin:0% 0%;-webkit-transform:rotate(" + calc  + "deg);-webkit-transform-origin:0% 0%;-o-transform:rotate(" + calc + "deg);-o-transform-origin:0% 0%;'></div>"
}

Answer 2

I just developed my version on drawing a line in pure js + html code.
First of all the tan function is defined between 0 and 180 degrees. If x2 is bigger than x1 we invert these points (x2 becomes x1, and x1 becomes x2).
After that we check the length of this line (Pythagorean theorem) and we measure the slope. With the slope we can calculate the degree in radiants. To convert in degrees we multiply the result and we divide it by 3.14.
Finally we can draw a div with an height of 1px and a width of lineLength. We rotate this div based to the calculated one.

function linedraw(x1, y1, x2, y2) {
    if (x2 < x1) {
        var tmp;
        tmp = x2 ; x2 = x1 ; x1 = tmp;
        tmp = y2 ; y2 = y1 ; y1 = tmp;
    }

    var lineLength = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
    var m = (y2 - y1) / (x2 - x1);

    var degree = Math.atan(m) * 180 / Math.PI;

    document.body.innerHTML += "<div class='line' style='transform-origin: top left; transform: rotate(" + degree + "deg); width: " + lineLength + "px; height: 1px; background: black; position: absolute; top: " + y1 + "px; left: " + x1 + "px;'></div>";
}