<html>
<head>
<script src="wz_jsgraphics.js"></script>
<style>
#xxx {
        position: absolute;
        width: 200px;
        height: 150px;
        background: #E80;
}
</style>
</head>
<body>
<div id="xxx"></div>
<pre id="output">
i       x0/y0   x1/y1   d
</pre>
<script type="text/javascript">
var offsetX, offsetY;
var jg = new jsGraphics("xxx");
var canvas = jg.cnv;
var output = document.getElementById('output').firstChild;
var lastX = 0, lastY = 0;
var x,y;
var lastDistance = 0;
var i = 0;

offsetX = 400;
offsetY = 100;
canvas.style.left = offsetX + "px";
canvas.style.top  = offsetY + "px";

function MOVE(e)
{
        x = e.pageX-offsetX;
        y = e.pageY-offsetY;
        lastDistance = Math.sqrt( (lastX-x)*(lastX-x)
                      +(lastY-y)*(lastY-y) );
        jg.clear()
        jg.drawLine(lastX,lastY,x,y);
        jg.drawString("distance: " + lastDistance, 0,0);
        jg.paint();
        
}
function DOWN(e)
{
        lastX = e.pageX-offsetX;
        lastY = e.pageY-offsetY;
        document.onmousemove = MOVE;
}
function UP(e)
{
        document.onmousemove = null;
        if (lastDistance < 3)
                return true;
        i++;
        output.appendData(
                i + "\t" + lastX + "/" + lastY
                  + "\t" + x     + "/" + y
                  + "\t" + lastDistance + "\n");
        lastDistance = 0;
}

canvas.onmousedown = DOWN;
document.onmouseup = UP;
jg.drawString("click and drag me...", 0,0);
jg.paint();

</script>
</body>