HTML5 - Canvas

onload = init;
var canvas;
var ctx;
var mx = my = 0;
var px = py = 0;
var cx = cy = 0;
function init() {
canvas = document.getElementById('canvas');
dom.event.addEventListener(document, 'mousemove', updatemouse);
if (canvas && canvas.getContext) {
ctx = canvas.getContext('2d');
setInterval(draw, 50);
}
var elm = canvas;
while(elm){
cx += elm.offsetLeft;
cy += elm.offsetTop;
elm = elm.offsetParent;
}
}


function draw() {
px += (mx - px) / 4;
py += (my - py) / 4;
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.beginPath();
ctx.arc(px,py,10,0,Math.PI * 2, true);
ctx.fillStyle = "#ff0000";
ctx.fill();
}


function updatemouse(e) {
if (e.pageX) {
mx = e.pageX - cx;
my = e.pageY - cy;
} else {
var stage = document[ 'CSS1Compat' == document.compatMode ? 'documentElement' : 'body'];
mx = e.clientX + stage.scrollLeft - cx;
my = e.clientY + stage.scrollTop - cy;
}
document.getElementById('extra').innerHTML = mx + " : " + my;
}