## Draw line over an image

I needed a way to draw a straight line over an image, but I had difficulty in finding a way that I could understand. This is not the most efficient method, but it did fit my needs for instruction purposes. I thought others might find it a useful starting point should they need a simplified application with similar needs.

(Ignore the image or use your own.
It is useful in the design of a spectacle correction to minimize the magnification effects when the prescription differs significantly between the two eyes).

I would be interested in constructive comments.
Code:
```<html>
<title> Anisokonia Nomograph </title>

<script type="text/javascript">

var cx = 0;  var cy = 0;	// current mouse position
var xs = 0;  var ys = 0;	// position on first click (setPosFlag = -1)
var imgString =
'<img id="shape" height:"700px"  width="600px" src="http://www.nova.edu/hpd/otm/Optics/Anisokonia.jpg">';

function \$_(IDS) { return document.getElementById(IDS); }

// From: http://www.p01.org/releases/Drawing_lines_in_JavaScript/
function DrawLine() {
var Ax = xs;  var Ay = ys;
var Bx = cx;  var By = cy;

var bla = ""
var lineLength = Math.sqrt( (Ax-Bx)*(Ax-Bx)+(Ay-By)*(Ay-By) );
for( var i=0; i<lineLength; i++ ) {
bla += "<div style='position:absolute;left:"
+ Math.round( Ax+(Bx-Ax)*i/lineLength  ) +"px;top:"
+ Math.round( Ay+(By-Ay)*i/lineLength  )
+"px;width:2px;height:2px;background:#f00'></div>";
}
\$_('nomograph').innerHTML += bla;
}

var xpos = 0;  var ypos = 0;
function followMe(evt) {
var evt = (evt) ? evt : ((window.event) ? event : null);
xpos = evt.clientX;  cx = xpos;
ypos = evt.clientY;  cy = ypos;
if (setPosFlag == 0) {
\$_('nomograph').innerHTML = imgString;
DrawLine();
}
}
function setPos() {
switch (setPosFlag) {
case -1:
xs = xpos;  // \$_('SxPos').value = xpos;
ys = ypos;  // \$_('SyPos').value = ypos;
setPosFlag = 0;  break;
case 0:
\$_('nomograph').innerHTML = imgString;
DrawLine();
setPosFlag = -1;  break;
default: break;
}
}
document.onmousemove = followMe;
var setPosFlag = -1;

function ClearInfo() {
\$_('nomograph').innerHTML = imgString;
setPosFlag = -1;
}

</script>
<body>

<table border="1">
<tr><td>
<div id="nomograph" onclick="setPos()">
<img id="shape" height:"700px"  width="600px"
src="http://www.nova.edu/hpd/otm/Optics/Anisokonia.jpg">
</div>
</td><td>
<button onclick="ClearInfo()">Clear</button>
</td></tr>
</table>

</body>
</html>```