Как заставить фигуру двигаться с помощью keyIsDown (p5.js)

Поэтому я пытаюсь сделать перемещение фигуры на холсте с помощью p5.js. Тем не менее, все, что он делает, - это перерисовать одну и ту же форму в новой заданной позиции, не удаляя фигуру в старой позиции, оставляя след, а не полностью перемещая его так, как я хотел. Вы можете увидеть результат здесь.

Ниже приведен код для моего класса "Player" (форма, которую я хочу переместить):

function Player() {
    this.hp = 10;
    this.x = 230;
    this.y = 240;
    this.color = "red";
    this.r = 10;

    this.spawn = function(){
        fill(this.color);
        noStroke();
        rect(this.x, this.y, this.r*2, this.r*2);
    }
}

Это мой код в настройках и рисовании в p5.js:

var p1;

function setup() {
    createCanvas(500, 500);
    background("green");
    p1 = new Player();;
}

function draw() {
    p1.spawn();
    if (keyIsDown(LEFT_ARROW)) { 
        p1.x--;
    }
    if (keyIsDown(RIGHT_ARROW)) {
        p1.x++;
    }
    if (keyIsDown(UP_ARROW)) {
        p1.y--;
    }
    if (keyIsDown(DOWN_ARROW)) {
        p1.y++;
    }
}

Любая помощь будет принята с благодарностью. Спасибо!