p5.js Старые кадры не удаляются

Question

Использование javascript framework под названием p5, я пытаюсь анимировать круг, который перемещается по экрану, однако старые кадры не удаляются, и это приводит к тому, что строка отображается на холсте.

var xPos = 0; 
 

 
function setup() { 
 
    createCanvas(400, 200) 
 
    background(123); 
 
} 
 

 
function draw() { 
 
    ellipse(xPos, height/2, 30, 30); //Draws the circle 
 
    fill(255); 
 
    xPos++; //Moves the circle a pixel over 
 
    if(xPos > width){xPos = 0;} //resets the circle when it reaches the edge of the canvas 
 
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.5/p5.js"></script>

Answer 1

Это потому, что вы только вызовите функцию background() один раз, в самом начале программы.

Затем каждый раз, когда вызывается функция draw(), вы рисуете еще один круг - без удаления каких-либо старых кадров.

Если вы хотите очистить старые кадры в каждом кадре, просто вызовите функцию background() в начале вашей функции draw().