调整大小（或滚动）后的鼠标坐标

Canvas 应用程序通常严重依赖用户与鼠标的交互，但是当调整窗口大小时，画布所依赖的鼠标事件坐标可能会更改，因为调整大小会导致画布在相对于窗口的不同位置偏移。因此，响应式设计要求在调整窗口大小时重新计算画布偏移位置 - 并且还在滚动窗口时重新计算。

此代码侦听窗口大小调整事件并重新计算鼠标事件处理程序中使用的偏移量：

// variables holding the current canvas offset position
//    relative to the window
var offsetX,offsetY;

// a function to recalculate the canvas offsets
function reOffset(){
    var BB=canvas.getBoundingClientRect();
    offsetX=BB.left;
    offsetY=BB.top;        
}

// listen for window resizing (and scrolling) events
//     and then recalculate the canvas offsets
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }

// example usage of the offsets in a mouse handler
function handleMouseUp(e){
    // use offsetX & offsetY to get the correct mouse position
    mouseX=parseInt(e.clientX-offsetX);
    mouseY=parseInt(e.clientY-offsetY);
    // ...
}