Drawing lines on html page

How can we draw a line in html page. I tried using canvas but found that its not working. Maybe browser doesn't support it. Can there be other easier way.



EDIT: Maybe it is little bit late but here is my new implementation. Hope it's more readable.

function createLineElement(x, y, length, angle) {
    var line = document.createElement("div");
    var styles = 'border: 1px solid black; '
               + 'width: ' + length + 'px; '
               + 'height: 0px; '
               + '-moz-transform: rotate(' + angle + 'rad); '
               + '-webkit-transform: rotate(' + angle + 'rad); '
               + '-o-transform: rotate(' + angle + 'rad); '  
               + '-ms-transform: rotate(' + angle + 'rad); '  
               + 'position: absolute; '
               + 'top: ' + y + 'px; '
               + 'left: ' + x + 'px; ';
    line.setAttribute('style', styles);  
    return line;

function createLine(x1, y1, x2, y2) {
    var a = x1 - x2,
        b = y1 - y2,
        c = Math.sqrt(a * a + b * b);

    var sx = (x1 + x2) / 2,
        sy = (y1 + y2) / 2;

    var x = sx - c / 2,
        y = sy;

    var alpha = Math.PI - Math.atan2(-b, a);

    return createLineElement(x, y, c, alpha);

document.body.appendChild(createLine(100, 100, 200, 200));

Explanation (as they say "a picture is worth a thousand words"):

Draw line explanation sketch


you could define:

<div id="line1" class="line vertical"></div>
<div id="line2" class="line horizontal"></div>

.line {
  position: absolute;
  background-color: #000000;

.vertical { 
   width: 1px;
   height: 500px;

.horizontal {
   width: 500px;
   height: 1px;

#line1 {
   top: 20px;
   left: 50%;

#line2 {
   top: 260px;
   left: 25%;

/* for added rotation effects */
.forty-five {
   transform: rotate(45deg);

if you want to get into diagonal lines you could begin to try some rotation with transform: rotate(45deg); The IE Compatible method of rotating objects is discussed thoroughly here, which is terribly complicated. I do not know the IE compatible way to rotate divs, sorry., but that would work in Safari, Firefox, Chrome, and Opera.


2014/11/08 - sjc - updated transform rules. Added MozDev links and IE rotation SO links.


i found myself needing a solution on this so i developped one using "hr" div and some gradient in border-image. Here is a Jsfiddle link to test it and the code below.

<html lang="fr">
        function pow2(n){
            return n*n;

        var p1 = {
        var p2 = {
        var select = null;

        function getAngle(){

            var dist = Math.sqrt(pow2(p1.x-p2.x)+pow2(p1.y-p2.y));
            var l = document.getElementById("line");
            var cos = (p2.x-p1.x)/Math.sqrt(pow2(p2.x-p1.x)+pow2(p2.y-p1.y));
            var behind = p1.x < p2.x;
            var higher = p1.y > p2.y;
            l.style.width = (dist*2)+"px";
            l.style.left = (p1.x-dist)+"px";
            l.style.top = (p1.y)+"px";

            l.style.transform = "rotateZ("+(higher?-1:1)*Math.acos(cos)*(180/Math.PI)+"deg)";

        var down = false

                select.x = e.pageX;
                select.y = e.pageY;
                var p = document.getElementById(select.id);
                p.style.left = (select.x-5)+"px";
                p.style.top = (select.y-5)+"px";
                select = p1;
            else if(select == p1)
                select = p2;
                select = null;
            down = true;
<hr id="line" style="
position: absolute;
top: 50px;
left: -100px;
width: 500px;
margin: 0;
-webkit-transform: rotateZ(53.1deg);
border-width: 1px;      border-style: solid;                          
border-image: linear-gradient(to right, #ffffff 0%,#ffffff 49%,#000000 50%,#000000 100%) 1;
<div id="p1" style="
border-radius: 5px;
width: 10px;
background: #000;
position: absolute;
height: 10px;
top: 45px;
left: 145px;
<div id="p2" style="
border-radius: 5px;
width: 10px;
background: #000;
position: absolute;
height: 10px;
top: 245px;
left: 295px;

hope it helps someone :)


The <canvas> object is the easiest way (aside from plopping an image or using flash). Also, please post your code and tell us under what browser you're trying to use <canvas>. We can't tell you what you're doing wrong otherwise.

As far as support is concerned, from Wikipedia:

The element is currently supported by the latest versions of Mozilla Firefox, Google Chrome, Safari, and Opera. It is not natively implemented by Internet Explorer (IE) as of version 8[7], though support is in development for Internet Explorer 9; however, many of the Canvas element's features can be supported in IE, for example by using Google or Mozilla plugins, JavaScript libraries and either Adobe Flash or IE's proprietary VML.

SVG is another option, but (surprise!) IE doesn't it support it (IE9 is supposed to support some parts of it).

I'm also not sure what kind of line you want to draw. I mean, you could just make a div and only enable one of its borders - that would be a straight line.


Not all browsers support the <canvas/> element. Try a cross-browser solution, like FlashCanvas or excanvas.

The alternative is using SVG.


options for cross browser vector graphics include Raphaël and svgweb


Hi there i made a jQuery plugin for that propose. It is crossbrowser and don't use SVG or CANVAS. Check it: https://github.com/tbem/jquery.line


I find that the < hr > tag works very well if all you want is a horizontal line accross the page.


I found this code on w3schools.com at https://www.w3schools.com/tags/canvas_lineto.asp

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

this allows you to easily draw lines on a canvas. Hope this helps!


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.