объясните, как реализовать этот сценарий в моей анимации

У меня есть анимация, которую я создаю, это сделано с анимацией adobe, и графика в порядке, но код не работает, или я просто не понимаю, как это работает.

Этот код добавляет элементы управления панорамированием, масштабированием и центрированием по заданной карте. Проблема в том, что моя карта намного больше, чем на холсте, и если я панорамирую или увеличиваю ее слишком много, границы карты попадают в сцену и хотя и раскрывают фон сцены, на которую я не хочу. Мне нужна сцена, чтобы действовать как маска и сделать карту видимой, но не позволять ей выйти за пределы границ карты.

Есть ли простой способ адаптировать код ниже к тому, что мне нужно?

var that = this;
var clickedX;
var clickedY;
var isDragging = false;
var friction = 0.85;
var speedX = 0;
var speedY = 0;
var mapOriginalX = this.map.x;
var mapOriginalY = this.map.y;
var mapNudge = 5;
var minScale = 0.3;
var maxScale = 3;
console.log(this.map.x);
console.log(this.map.y);
console.log(stage.x);
console.log(stage.y);

function onMouseWheel(e)
{
    var delta;

    if (e == window.event)
        delta = -10 / window.event.wheelDeltaY;
    else
        delta = e.detail / 30;

    var zoomFactor = delta; 
    scaleMap(zoomFactor);   
}

function mouseDown(e)
{
    clickedX = stage.mouseX;
    clickedY = stage.mouseY;
    isDragging = true;  
}

function stageMouseUp(e)
{
    isDragging = false;
}

function update(e)
{   
    if (isDragging)
    {
        speedX = stage.mouseX - clickedX;
        speedY = stage.mouseY - clickedY;
    }   

    speedX *= friction;
    speedY *= friction;

    that.map.x += speedX;
    that.map.y += speedY;

    clickedX = stage.mouseX;
    clickedY = stage.mouseY;
}

function resetMap()
{
    that.map.x = mapOriginalX;
    that.map.y = mapOriginalY;
    that.map.scaleX = that.map.scaleY = 1;
}

function zoomMap(e)
{
    if (e.currentTarget == that.plusButton)
        scaleMap(-0.1);
    if (e.currentTarget == that.minusButton)
        scaleMap(0.1);
}

function moveMap(e)
{
    if (e.currentTarget == that.upButton)
        speedY -= mapNudge;
    else if (e.currentTarget == that.rightButton)
        speedX += mapNudge;
    else if (e.currentTarget == that.downButton)
        speedY += mapNudge;
    else if (e.currentTarget == that.leftButton)
        speedX -= mapNudge;
}

function scaleMap(amount)
{
    var map = that.map;

    map.scaleX -= amount;
    map.scaleY = map.scaleX;

    if (map.scaleX < minScale)
        map.scaleX = map.scaleY = minScale;
    else if (map.scaleX > maxScale)
        map.scaleX = map.scaleY = maxScale;
}

// listeners
this.map.on("mousedown", mouseDown.bind(this));
this.resetButton.on("click", resetMap.bind(this));
this.plusButton.on("click", zoomMap.bind(this));
this.minusButton.on("click", zoomMap.bind(this));
this.upButton.on("click", moveMap.bind(this));
this.rightButton.on("click", moveMap.bind(this));
this.downButton.on("click", moveMap.bind(this));
this.leftButton.on("click", moveMap.bind(this));
stage.on("stagemouseup", stageMouseUp.bind(this));
document.getElementById('canvas').addEventListener('mousewheel', onMouseWheel.bind(this));
document.getElementById('canvas').addEventListener('DOMMouseScroll', onMouseWheel.bind(this));
createjs.Ticker.addEventListener("tick", update.bind(this));

resetMap();