document.write("<div id=marker-1 class=draggable>X1</div>");
  document.write("<div id=marker-2 class=draggable>X2</div>");
  </script>
  
  <div id=xboard>
    <style type="text/css">
    canvas {
      border: 1px solid black;
  /*
      left:120px; top:0px; width: 90%; height: 100%;
      position: absolute; z-index:1;
      background: silver; color: black;
  */
    }
    </style>
    <script language="javascript">
    function transform_event_coord(e) {
      return {x: e.clientX - 10, y: e.clientY - 10};
      //return {x: e.mouseX - 10, y: e.mouseY - 10};
    }
    var drawing = false;
    var lastpos = {x:-1,y:-1};
  
    function on_mousedown(e) {
      drawing = true;
      lastpos = transform_event_coord(e);
    }
    function on_mousemove(e) {
      if (!drawing)
        return;
    
      var pos = transform_event_coord(e);
    
      var canvas = document.getElementById("board");
      var ctx = canvas.getContext("2d");
    
      ctx.strokeStyle = "rgba(200,0,0,0.6)";
      ctx.lineWidth = 1.0;
      //ctx.lineJoin = "round";
      ctx.beginPath();
      ctx.moveTo(lastpos.x, lastpos.y);
      ctx.lineTo(pos.x, pos.y);
      ctx.closePath();
      ctx.stroke();
        
      lastpos = pos;
    }
    function on_mouseup(e) {
      drawing = false;
    }
    function init() {
      var canvas = document.getElementById("board");
      var ctx = canvas.getContext("2d");
    
      addEventListener("mousedown", on_mousedown, false);
      addEventListener("mousemove", on_mousemove, false);
      addEventListener("mouseup", on_mouseup, false);
    }
    </script>
  <canvas id="board"></canvas>
  </div>  
  
  </body>
  </html>