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>
<head>
<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>
</head>
<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>