Javascript 画布：在图像末尾停止平移

我正在实现放大和平移画布的功能。我通过两个画布来实现这一点，一个用于绘图，另一个用于显示视口。我很难找到剪裁区域的限制

无论如何，这一切都是可行的，我只是在调用“放大”时将比例设置为高于1的某个值，这达到了预期的效果

我以与设置精灵工作表动画相同的方式平移画布，视口画布仅充当绘图画布顶部的剪裁区域

但是，我一直在为边界设置什么数字，以阻止画布向右和向下走得太远

下面是我如何实现pan的，只是为了更清楚一些：

//This only gets called when the canvas is zoomed in.    
viewPort.drawImage(canvas,translationX,translationY,viewPort.width,viewPort.height
                   ,0,0,viewPort.width,viewPort.height);

TranslationX从0开始，每次按右箭头键后，我都会增加一个值，我知道这不应该是任意数字，但现在我只是将它设置为4

无论如何，这一切都是可行的，但它脱离了画布的边缘，我很难确定停止平移的条件是什么，以下是我到目前为止得到的：

 if(canvas.width + translationX <= bCanvas.width)

      translationX += 4; //Pan right...

if（canvas.width+translationX