Как точно рассчитать background-position div-фона

Question

Мне нужно вычислить свойство background-position для абсолютно позиционированного div.Перейдите по этому адресу: HTML Canvas

Перетащите изображение 800x600 на холст со своего рабочего стола и наведите курсор мыши.Вы можете видеть абсолютно позиционированное деление 100x100 px.Я сохраняю объекты на холсте как фоновое изображение для этого div.Однако что-то не так с моими расчетами для background-position.Вся идея состоит в том, чтобы показать увеличенную часть изображения в этом 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);
})