Background hides circles inside the for loop


I am trying to draw a set of circles using the for loop.

It works just fine, the problem is that the background (also inside the draw() function) makes the circle disappear.

When I move the background to the setup() it also work, but I wanted the background in the draw() function.

Here is the code and thanks

let x=0;

function setup() {
createCanvas(400, 400);

function draw() {



for(let i=0; i< 10; i++){
circle(x, height/2, 30);
x = x + 20;

The background() is not making the circle disappear… you are updating the x position each frame resulting in the circle moving to the right and off the canvas.

instead of x + x = 20, try something like x+=2 and you can see it animate.

Adding a fourth parameter to the background function will add transparency. The lower the number the more transparent it will be.

Yes, another solution is to put let x = 0 inside of the draw function.

You could even make the for loop look like this:

for(let x = 0; x < 10; x++){
   circle(x*20, height/2, 30);