CODEWITHSUNDEEP
javascripthtml
Craig Shipman
Craig Shipman

Reputation: 187

HTML line drawing without canvas (just JS)

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>");
        }
    }
}

Upvotes: 16

Views: 32560

Answers (5)

Davide
Davide

Reputation: 2124

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>";
}

Upvotes: 7

Leandro Pinheiro
Leandro Pinheiro

Reputation: 11

updated to:

lineDraw(ax, ay, bx, by) {
    if(ax > bx) {
        bx = ax + bx; 
        ax = bx - ax;
        bx = bx - ax;

        by = ay + by;
        ay = by - ay;
        by = by - ay;
    }

    let distance = Math.sqrt(Math.pow(bx - ax, 2) + Math.pow(by - ay, 2));
    let calc = Math.atan((by - ay) / (bx - ax));
    let degree = calc * 180 / Math.PI;

    let line = document.createElement('div');
    line.style.css({
        position: 'absolute',
        height: '1px',
        transformOrigin: 'top left',
        width: distance,
        top: ay + 'px',
        left: ax + 'px',
        transform: `rotate(${degree}deg)`,
        backgroundColor: 'back',
    });
    document.body.appendChild(line);
}

Upvotes: 1

inteblio
inteblio

Reputation: 113

This answer on another stack overflow page works well. I was drawing over an image. I needed to put the image in a DIV with an ID that was later used in the script in the getElementById() call. Then it works great. The other answer on the page (Craig Taub) does not work. I say this because it cost me time to realise it was nothing I was doing wrong. It uses the same principle of drawing a thin div which is rotated. I know it works in chrome.

Drawing lines on html page

Upvotes: 1

Nelson Ben&#237;tez Le&#243;n
Nelson Ben&#237;tez Le&#243;n

Reputation: 50643

This javascript graphic library seems very suited for what you want to achieve.

Upvotes: 2

Craig Taub
Craig Taub

Reputation: 4179

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>"
}

Upvotes: 18

Related Questions