如何准确计算div背景的背景位置

Question

我需要为绝对定位的div计算背景位置属性。请转到此网址：HTML Canvas

从桌面上将800x600图像放在画布上并悬停鼠标。你可以看到绝对定位的100x100 px div。我将画布上的对象保存为此div的背景图像。但是，我对背景位置的计算出了问题。整个想法是在这个div中显示图像的缩放部分。可以在脚本文件夹中的“canvas_tut.js”中看到此代码。

    $(div).mousemove(function(e){    //div refers to the absolutely pos div.
    var x_pos = (e.pageX-50)+'px';  //calculating left and top values
    var y_pos = (e.pageY-50)+'px';
    $(div).css({'left':x_pos,'top':y_pos});
    var dataUrl = canvas.toDataURL();    // Saving canvas as image
    $(div).css('background-image','url('+dataUrl+')');
    var x_bg = '-'+Math.floor(e.pageX - canvas_offset.left)+'px';   //calculating background position
    var y_bg = '-'+Math.floor(e.pageY - canvas_offset.top)+'px';
    console.log(x_bg+' , '+y_bg);
    $(div).css('background-position',x_bg,y_bg);
})