At this point, you might have noticed that the order in which functions are called matter. Style setting functions such as fill(), stroke(), and strokeWeight() must be called before drawing a shape and will be active for subsequent shapes until the functions are called again to change the styles.

Additionally, the functions placed inside the draw() function will be executed from the top-down. When drawing shapes in the p5.js sketch, the last shape in the draw() function will be drawn on top of previously drawn shapes.

When the draw() function loops again, the last set styles will be used for the shape functions called at the beginning of the loop. Take a look at the code below:

function draw(){
  // After the first loop, this rectangle will have purple fill color
  rect(width / 2, height / 2, 100, 100);

  fill('purple');
  ellipse(100, 300, 50, 50);
}

The first time the above draw() loop runs, the fill color of the rectangle will be white by default and the ellipse’s fill color will be set to 'purple'. The second time the draw() loop runs, the rectangle’s fill color will also be purple because the set styles carry over until they are explicitly changed with style functions. To make sure the rectangle has a different fill color than the ellipse, the fill() function will have to be called before the rect() function.

function draw(){
  // Now the rectangle will have red fill color
  fill(255, 0, 0);
  rect(width / 2, height / 2, 100, 100);

  fill('purple');
  ellipse(100, 300, 50, 50);
}