Change the shape of an object while moving using Javascript processing.js library

Question

I am doing an online Javascript course in khan academy. I am doing a project on that course.

I want my object to change shape from eclipse to a rectangle and repeat it while moving. I wrote a code. But I cannot see the eclipse. The way it is moving is correct.

Following is what I wrote.

var xPos = 20;
var yPos = 20;

draw = function() {
    //variables change position
    xPos++;
    yPos++;

    //ellipse
    background(29, 40, 115);
    fill(255, 242, 0);
    ellipse(xPos, yPos, 10, 10);

    //rectangle
    background(29, 40, 115);
    fill(151, 76, 189);
    rect(xPos, yPos, 10, 10);
}

What is wrong here? I can only see a rectagle moving. Where is my ellipse? Please help me. I am a beginner

Answer 1

The background() instruction clears the sketch by setting every pixel in it to the same colour. You typically only call this once, as first instruction in draw(), because as you've discovered, it's not super useful to call it after you've already started drawing things.