Mousemove with Canvas

by Nofiden Noble

HTML

<canvas width="300" height="225"></canvas>

<span class="first">Move the mouse over the div.</span>
<span></span>

CSS

canvas { background:gray; border:2px groove; }
span { display:block; }

JavaScript

var canvas = $('canvas');
canvas.mousemove(function(e){
    var pageCrds = '('+ e.pageX +', '+ e.pageY +')',
        clientCrds = '('+ e.clientX +', '+ e.clientY +')';
    
    $('span:first').text('(e.pageX, e.pageY) - '+ pageCrds);    
    $('span:last').text('(e.clientX, e.clientY) - '+ clientCrds);
    
});