在画布边框处停止画布中的图像

Question

我正在尝试用 JS 编写一个小游戏并发现了 Canvas。

我在 Canvas 上绘制了一张图片，它比 Canvas bigger 并且在 WASD 上它应该移动 但是当它碰到画布的边界时它应该停止。 在顶部和左侧这可行，但我不知道如何实现逻辑以在右侧或底部停止。

这是我的 Js 和 Html：

JavaScript：

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

const overlay = document.querySelector('.overlay');

// canvas.width = window.innerWidth;
// canvas.height = window.innerHeight;

const border = new Image();
border.src = './stoneBorder.png'

let borderX = 24;
let borderY = 32;
const borderPixelSize = 8;
const borderSpeed = 2;
const keys = [];


border.onload = () => {
    ctx.drawImage(border, - borderX * borderPixelSize, - borderY * borderPixelSize);

    overlay.style.backgroundImage = "url('biggerCanvasWithoutTransparentOverlay.png')"
}

document.addEventListener('keydown', (ev) => {

    keys[ev.keyCode] = true;

    if (keys[87] || keys[38]) up(); // W | ArrowUp
    if (keys[65] || keys[37]) left();// A | ArrowLeft
    if (keys[83] || keys[40]) down();// S | ArrowDown
    if (keys[68] || keys[39]) right();// D | ArrowRight
})

document.addEventListener('keyup', (ev) => {
    keys[ev.keyCode] = false;
});

function up() {
    ctx.clearRect(0, 0, canvas.width,canvas.height);
    if (borderY > borderSpeed % borderPixelSize) borderY -= borderSpeed;
    ctx.drawImage(border, - borderX * borderPixelSize, - borderY * borderPixelSize);
}

function left() {
    ctx.clearRect(0, 0, canvas.width,canvas.height);
    if (borderX >= borderSpeed) borderX -= borderSpeed;
    ctx.drawImage(border, - borderX * borderPixelSize, - borderY * borderPixelSize);
}

function down() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    borderY += borderSpeed;
    ctx.drawImage(border, -borderX * borderPixelSize, -borderY * borderPixelSize);
}

function right() {
    ctx.clearRect(0, 0, canvas.width,canvas.height);
    borderX += borderSpeed;
    ctx.drawImage(border, - borderX * borderPixelSize, - borderY * borderPixelSize);
}

HTML：

// to fit in the background Image
<canvas width="1280" height="752"></canvas>