Those of you who are in need for drawing vector lines might be interested in

the following code.

DrawLine( x1, y1, x2, y2, color ) draws a vector line from any Point x1,y1

to any Point x2,y2 in any color (string format #RRGGBB) by using div-tags.

regards

Stefan

###############code starts here#########################

<html>

<head>

<title>Vector Line Demo</title>

</head>

<body>

<script language="javascript">

function DrawLinHor( x, y, size, color){

var str;

if (x>=0 && y>=0 && size>0){

str = '<div style="position:absolute; left:' + x + 'px; top:' + y + 'px;

width:' + size + 'px; height:1px;background-color:' + color + '"><table

height=1 width=' + size + '></table></div>\n';

} else {

str = '';

}

document.write(str);

}

function DrawLinVert( x, y, size, color){

var str;

if (x>=0 && y>=0 && size>0){

str = '<div style="position:absolute; left:' + x + 'px; top:' + y + 'px;

width:1px; height:' + size + 'px;background-color:' + color + '"><table

height=' + size + ' width=1></table></div>\n';

} else {

str = '';

}

document.write(str);

}

function DrawLine( x1, y1, x2, y2, color ){

deltax=Math.abs(x2-x1);

deltay=Math.abs(y2-y1);

if (deltax>=deltay){

if (y2<y1) {

help=x1;

x1=x2;

x2=help;

help=y1;

y1=y2;

y2=help;

}

deltax=x2-x1;

deltay=y2-y1;

dstep=deltax/(deltay+1);

x=x1;

if (dstep<0){

x=x+dstep;

}

for (y=y1;y<=y2;y++){

size=((x+dstep)-(x));

if (dstep<0) {

DrawLinHor( (x)-(dstep)+(size),(y),Math.abs(size),color );

} else {

DrawLinHor( (x),(y),Math.abs(size),color );

}

x=x+dstep;

}

}

else {

if (x2<x1) {

help=x1;

x1=x2;

x2=help;

help=y1;

y1=y2;

y2=help;

}

deltax=x2-x1;

deltay=y2-y1;

dstep=deltay/(deltax+1);

y=y1;

if (dstep<0){

y=y+dstep;

}

for (x=x1;x<=x2;x++){

size=((y+dstep)-(y))

if (dstep<0){

DrawLinVert( (x),(y)-(dstep)+(size),Math.abs(size),color );

} else {

DrawLinVert( (x),(y),Math.abs(size),color );

}

y=y+dstep;

}

}

}

DrawLine(100,150,50,250,"#FFFFFF");

</script>

</body>

</html>

###############code ends here#########################