Moving canvas doesn't work after scrolling page

Question

I am working with canvas and after I load an image, I need to let users move the image inside the canvas.

I followed this tutorial. The problem is that after you scroll the page, the image itself is not clickable anymore.

Here is my fiddle and code

/*
get canvas element
 */
var $jqueryCanvas = $('#canvas');

/*
init all variables
 */
var canvas = document.getElementById('canvas'),
    canvasContext = canvas.getContext('2d'),
    canvasOffset = $jqueryCanvas.offset(),
    offsetX = canvasOffset.left,
    offsetY = canvasOffset.top,
    startX,
    startY,
    isDown = false,
    pi2 = Math.PI * 2,
    resizerRadius = 8,
    rr = resizerRadius * resizerRadius,
    draggingResizer = {x: 0,  y: 0},
    imageX = 0,
    imageY = 0,
    imageWidth,
    imageHeight,
    imageRight,
    imageBottom,
    draggingImage = false;

var userImage = new Image();

userImage.onload = function () {

    oImageWidth = userImage.width;
    oImageHeight = userImage.height;

    imageWidth = oImageWidth;
    imageHeight = oImageHeight;

    imageRight = imageX + imageWidth;
    imageBottom = imageY + imageHeight;

    drawImage();

};

userImage.src = 'https://c2.staticflickr.com/8/7301/11186264136_7860190995_n.jpg';

function drawImage(clearCanvas, withTransparency, opacity) {

    var toClear = clearCanvas || true;
    var hasOpacity = withTransparency || false;
    var imageOpacity = opacity || 0.5;

    /*
        clear canvas
    */
    if ( toClear )
        canvasContext.clearRect(0, 0, canvas.width, canvas.height);

    /*
        draw image
    */
    if ( hasOpacity )
        canvasContext.globalAlpha = imageOpacity;

    canvasContext.drawImage(userImage, 0, 0, imageWidth, imageHeight, imageX, imageY, imageWidth, imageHeight);
    canvasContext.globalAlpha = 1;

}

function hitImage(x, y) {

    return ( x > imageX && x < (imageX + imageWidth) && y > imageY && y < (imageY + imageHeight) );

}

function handleMouseDown(e) {

    startX = parseInt(e.clientX - offsetX);
    startY = parseInt(e.clientY - offsetY);

    isImageHit = hitImage(startX, startY);
    draggingImage = isImageHit;

    drawImage(true, true);

}

function handleMouseUp(e) {

    draggingResizer = -1;
    draggingImage = false;
    drawImage(false, true);

}

function handleMouseOut(e) {

    handleMouseUp(e);

}

function handleMouseMove(e) {

    if ( !draggingImage ) return;

    imageClick = false;

    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);

    var dx = mouseX - startX;
    var dy = mouseY - startY;

    imageX += dx;
    imageY += dy;
    imageRight += dx;
    imageBottom += dy;

    startX = mouseX;
    startY = mouseY;

    drawImage(true, true);

}

$jqueryCanvas.mousedown(function (e) { handleMouseDown(e); });
$jqueryCanvas.mousemove(function (e) { handleMouseMove(e); });
$jqueryCanvas.mouseup(function (e) { handleMouseUp(e); });
$jqueryCanvas.mouseout(function (e) { handleMouseOut(e); });

Here is a screenshot of the problem As you notice, I narrowed the result tab to simulate a long page. If you ar at the top, it works normally and you can move the image. But if you scroll just so the image is still visible, it's not moveable anymore.

This problem is also present in the tutorial I followed.

As far as I understand, the problem is with the function hitImage() where it checks if I click on the image itself.

Unfortunately I cannot replicate my webpage 100%, but when I scroll even 50px, I cannot move the image anymore, even if the whole canvas is in the viewport 100%.

Is there anything that can be done to solve this ?

Thanks

Quick edit I just noticed that once you scroll, you can still move the image, but you have to grab within its initial position. It's like the image gets stuck in the initial position and when you click an area it doesn't know that the image has moved because the page has scrolled.