My JavaScript code is encountering a strange glitch, and I'm not sure if it's related to my math calculations or the way my code is structured.
The concept behind my project involves left-clicking and dragging to scroll through a map displayed on a canvas. Everything works perfectly, except for one issue - when I try to scroll a second time after releasing the mouse, the map resets back to its original x0y0 offset.
This means that I can't continue scrolling because every time I mousedown again, the map jumps back to the starting position.
Here's how I've implemented it:
//this script is part of the init function triggered on body load
canvas.addEventListener("mousedown", detectMousePosition, false);
//relevant functions
function detectMousePosition(e){
mouseX = e.pageX;
mouseY = e.pageY;
canvas.addEventListener("mousemove", trackMovement, false);
}
function trackMovement(e){
canvas.addEventListener('mouseup',onMouseRelease,false);
offsetX = e.pageX - mouseX; //pixels to move the map along x-axis
offsetY = e.pageY - mouseY; //pixels to move the map along y-axis
}
function onMouseRelease(){
// once the mouse is released, stop moving the map
canvas.removeEventListener('mousemove',trackMovement,false);
}
Any suggestions on how to resolve this issue?