HTML line drawing without canvas (just JS)
html, javascript
Solution
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>"
}
Problem
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>"); } } } ```