detecting mouse click position in canvas tag has position off

[James Black]

When I click on word, I want to be able to move that word, on the
canvas, by tracking mousedrag.

Unfortunately, the farther I am from the left side the wider the error
in the x,y position I click, and what the application thinks I clicked.

This is obvious when it does begin to move, if you move to the right,
and see how much farther away the word is from the mouse.

Ideally the mouse should stay over the word.

I am not certain what it going wrong.

I have tested this on Firefox 1.5, and it works there, and it may work
in Safari 2 and Opera 9.

Any help would be appreciated. Thanx.

http://dante.acomp.usf.edu/annotation/syntaxtree.php

This is code I found at
http://www.howtocreate.co.uk/tutorials/javascript/eventinfo, and is
what I use to determine where the click is, and where the mouse is at,
when being dragged. I don't need to support older browsers, but, IE
may be helpful to support later, so I want to try to be cross-platform
friendly.

if( typeof( e.pageX ) == 'number' ) {
//most browsers
x1 = e.pageX;
y1 = e.pageY;
} else if( typeof( e.clientX ) == 'number' ) {
//Internet Explorer and older browsers
//other browsers provide this, but follow the pageX/Y branch
x1 = e.clientX;
y1 = e.clientY;
var badOldBrowser = ( window.navigator.userAgent.indexOf( 'Opera' )
+ 1 ) ||
( window.ScriptEngine && ScriptEngine().indexOf( 'InScript' ) + 1
) ||
( navigator.vendor == 'KDE' )
if( !badOldBrowser ) {
if( document.body && ( document.body.scrollLeft ||
document.body.scrollTop ) ) {
//IE 4, 5 & 6 (in non-standards compliant mode)
x1 += document.body.scrollLeft;
y1 += document.body.scrollTop;
} else if( document.documentElement && (
document.documentElement.scrollLeft ||
document.documentElement.scrollTop ) ) {
//IE 6 (in standards compliant mode)
x1 += document.documentElement.scrollLeft;
y1 += document.documentElement.scrollTop;
}
}
}