Currently, I am working on incorporating a mini map onto my canvas that mirrors what is displayed on the main canvas. The main canvas includes zoom and pan functions. I have created a rectangular shape for the minimap to display the content of the canvas. However, when I pan or zoom in on the main canvas, the same actions are applied to the minimap as well.
Below is the draw method code which renders both the canvas and the minimap:
redraw();
context.save();
context.translate(canvas.width / 2, canvas.height / 2);
canvas.style.border = "red 1px solid";
object.mPosition = new Vector(0,0);
object.draw(context);
context.restore();
requestAnimationFrame(draw);
context.save();
context.beginPath();
context.lineWidth = 3;
context.strokeStyle="black";
context.scale(0.25,0.25);
context.rect(0,0,canvas.width,canvas.height);
context.fillStyle="white";
context.fillRect(0,0,canvas.width,canvas.height);
context.stroke();
context.clip();
context.translate(canvas.width / 2, canvas.height / 2);
object.draw(context);
context.closePath();
context.restore();
The following code demonstrates how panning is implemented:
function OnMouseMove(event) {
var mousePosition = new Vector(event.clientX, event.clientY);
if(leftMouseButton) {
context.translate(mousePosition.getX() - previousMousePosition.getX(), mousePosition.getY() - previousMousePosition.getY());
}
previousMousePosition = mousePosition;
}
I am seeking advice on how to restrict the panning behavior to only affect the main canvas and its contents, without applying it to the minimap. Is there a way to achieve this?