实例化一个新对象删除已经绘制的形状

Question

我正在编写一个 OOP html canvas pong 游戏，我的球拍代码是这样的

class Paddle extends Canvas {
    #width
    #height
    #y
    #index
    #x
    constructor(id,i) {
        super(id);
        this.#index=i;
        this.#y = 0;
        this.resize();
    }
    draw() {
        this.ctx.beginPath();
        this.ctx.rect(this.#x, this.#y, this.#width, this.#height);
        this.ctx.fill();
        this.ctx.closePath();
    }
    update() {
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        this.draw();
    }
    resize() {
        this._resize();
        this.#width = Math.pow(this.canvas.width, 1 / 2) * 2;
        this.#height = this.canvas.height / 4;
        if(this.#index === 0){
            console.log("left")
            this.#x=0;
        }else{
            console.log("right")
            this.#x=this.canvas.width - this.#width;
        }
        this.draw();
    }
    set y(value) {
        this.#y = value;
        this.update();
    }
}

当我实例化一个新的球拍对象时，它会绘制新的球拍并删除另一个球拍

可以发现问题：

setTimeout(function(){
    let rightPaddle = new Paddle('paddle',1);
},1000)
let leftPaddle = new Paddle('paddle',0);

关于导致问题的任何想法