p5.js Shape Adjustments Leaving Previous Outlines Visible

Question

I am trying to simply adjust the shape of an object using a value derived from a slider on a screen using p5.js.

The issue I am having is that the outline of the previously drawn shapes remain, giving an after-trail effect.

I have tried the noStroke() modifier but that simply does not draw the shape. As well the noFill() gives an even weirder, yet still incorrect, behavoir.

Code Example: https://codepen.io/galleywest/pen/oejxyY

var slider

function setup() {
  createCanvas(600, 600)
  slider = createSlider(0, 50, 0)
}

function draw() {
  rect(10, 10, 80, 80, slider.value())
}

How can I mitigate this behavior?

Answer 1

You need to call the background() function to clear out old frames.

var slider

function setup() {
  createCanvas(600, 600)
  slider = createSlider(0, 50, 0)
}

function draw() {
  background(255, 0, 0); //draws a red background
  rect(10, 10, 80, 80, slider.value())
}

More info can be found in the reference .