Javascript 如何制作对象'；s X和Y位置响应HTML画布'；s的宽度和高度？

我正在使用HTML5画布构建一个简单的游戏

游戏在画布内有多个矩形

问题是我使用X和Y坐标来控制矩形；游戏在我的显示器上运行得很好，但是如果我使用较小的显示器，对象可以移动到“地图”之外。如果我使用更大的显示器，我可以看到更多的“地图”

我怎样才能使它具有响应性

下面是我用来创建画布的部分代码：

    this.canvas.width = document.body.clientWidth - 15;
    this.canvas.height = 700;
    this.context = this.canvas.getContext("2d");

这几乎就是矩形在游戏循环中的运动：

    cursor.x += 1;

---

确保设置画布宽度和高度，使其不能大于屏幕大小

然后，每次移动矩形时，添加一个检查以查看矩形是否仍在视口中

比如：

if (cursor.x + 1 < this.canvas.width) {
  cursor.x += 1;
}

if（cursor.x+1