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

我需要计算绝对定位div的background position属性。请转到此URL：

将800x600图像从桌面放到画布上，然后将鼠标悬停。您可以看到一个绝对定位的100x100 px分区。我正在将画布上的对象保存为该分区的背景图像。但是，我对背景位置的计算有问题。整个想法是在这个div中显示图像的缩放部分。代码可以在scripts文件夹的“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);
})

---

我正在努力学习“从桌面将800x600图像放到画布上”的指导。也许一个已经有硬编码图像的例子会更好。@Beetroot Beetroot对不起，我的意思是将一个图像从桌面拖放到页面的画布上。放置硬编码图像会使目的无效。我正在以dataURL的形式阅读图像，并将此dataURL添加为div的背景图像。我认为混淆是我的，没有必要道歉。我以前从来没有遇到过这个功能——大概是HTML5画布上的一个功能吧？@Beetroot-Beetroot-Yes。我正在使用HTML文件读取器和拖放功能将图像加载到画布上。我已经走了这么远，但我不知道如何实时缩放内容。这是我第一次在这里没有得到任何答案。我想我得自己想想。好的，谢谢你的解释。尝试谷歌搜索“HTML5画布缩放”。排名前4的结果让您回到StackExchange。对不起，我帮不上什么忙了。