canvas get coords

html5canvaseyeball project get location coords re mouse position even when scrolled.

by rob Davis

HTML

<script src="https://getfirebug.com/releases/lite/latest/firebug-lite.js"></script>
<body>
    <span class="mouse fixed"></span>
    <span class="other fixed"></span>
    <div id="maincont">
        <canvas id="main" class="absolute-positioning"></canvas>
    </div>
</body>

CSS

body {
    margin: 0px;
    padding: 0px;
    background-color:#ccc;
    color:#000;
}
#maincont {height:1000px;
    border:90px solid #ddd;
    left:8px;
    top:5px;
    position: absolute;}
.absolute-positioning { top:100px; left:100px; position: absolute; }
.fixed { position:fixed; z-index:1;}
.other { top:1em;}

JavaScript

var context = document.getElementById('main').getContext('2d');
var width = 100;
var height = 100;
var centerX = width/2;
var centerY = height/2;

function update(mx,my,cx,cy) {
    context.save();
    context.fillStyle='#eee';
    context.fillRect(0,0,width, height);
    context.restore();
    context.save();
    context.fillStyle='#ff0';
    context.fillRect(cx-10, cy-10, 20, 20);
    context.restore();

}

$(window).mousemove(function (event) {
    var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";
    var clientCoords = "( " + event.clientX + ", " + event.clientY + " )";
    update(event.pageX, event.pageY, centerX, centerY);
    $('.mouse').html(pageCoords + ' x ' + clientCoords);
    var x = getOffset( document.getElementById('main') ).left; 
    var y = getOffset( document.getElementById('main') ).top; 
    $('.other').html(x+' ' +y);

});

update(0,0);
function getOffset_1( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}
function getOffset_2( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        // chrome/safari
        if (false) {
            el = el.parentNode;
        } else {
            // firefox/IE
            el = el.offsetParent;
        }
    }
    return { top: _y, left: _x };
}
function getOffset_3(obj) {
 var obj2 = obj;
 var curtop = 0;
 var curleft = 0;
 if (document.getElementById || document.all) {
  do  {
   curleft += obj.offsetLeft-obj.scrollLeft;
   curtop += obj.offsetTop-obj.scrollTop;
   obj = obj.offsetParent;
   obj2 = obj2.parentNode;
   while (obj2!=obj) {
    curleft -= obj2.scrollLeft;
    curtop -= obj2.scrollTop;
    obj2 = obj2.parentNode;
 ...