Javascript 在画布上移动多个元素，并清除矩形

我有一个问题，比如我有2个对象，我用键盘事件做了一些移动的东西。现在的问题是，我不知道什么时候清除画布，这样我就可以保留它们的多个实例，也可以单独移动它们

const canvas = document.getElementById('canvas-game');
const context = canvas.getContext('2d');

// Set Canvas To Whole Screen
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;

// Player
class Player {
  constructor(xPosition = 0, yPosition = 0, height = 25, width = 25) {
    this.xPosition = xPosition;
    this.yPosition = yPosition;
    this.height = height;
    this.width = width;
    this.moveEvents = this.moveEvents.bind(this);
  }

  draw() {

    // this.clear();

    let { xPosition, yPosition, height, width} = this;

    context.beginPath();
    context.rect(xPosition, yPosition, height, width);
    context.closePath();    
    context.fill();

    // Bind Events
    this.initEvents();
  }

  initEvents() {
    canvas.addEventListener('keydown', this.moveEvents);
  }

  clear() {
    context.clearRect(0, 0, canvas.height, canvas.width);
  }

  moveEvents(event) {
    let keyPressed = event.keyCode;

    if (keyPressed === 38 || keyPressed === 87) {
        this.yPosition -= 5;
    } else if (keyPressed === 40 || keyPressed === 83)  {
        this.yPosition += 5;
    } else if (keyPressed === 37 || keyPressed === 65)  {
        this.xPosition -= 5;
    }  else if (keyPressed === 39 || keyPressed === 68)  {
        this.xPosition += 5;
    }

    this.draw();
  }

}

// Enemy
class Enemy extends Player {
  constructor() {
    super();
  }
}

function update(...components) {
  components.forEach((item) => {    
    item.draw();
  });
}

function init() {
  let player = new Player(100, 100);
  let player2 = new Player(200, 200);

  update(player, player2);
}


init();

它按原样工作，但在更新时会留下痕迹。非常感谢

此处演示：

将

清除

功能移出

播放器

类（并进入与

更新

相同的上下文），因为它不应负责清除全局

画布

在玩家的抽签调用之前，在

更新

功能中调用

清除

，例如：

function update(...components) {
  clear();
  components.forEach((item) => {
    item.draw();
  });
}

将

moveEvents

函数中的

draw

调用替换为全局

update

函数，因为您希望在每次移动后重新绘制整个场景（因为需要清除整个画布）

---

为什么

this.clear（）

在

draw

函数中被注释掉了？@Haykokorkyun我不知道该把this.clear（）放在哪里，所以两个形状都会移动，不会留下痕迹。看起来它在正确的位置……它不像我想要的那样工作，我只想看到黑色的矩形，而不是正在绘制的黑色线条，只是意识到，除了初始化代码时，您不调用更新方法，让我更新描述以考虑到这一点…无论我做什么，其中一个将消失，并且不再出现。