p5.js: Why can’t I use my ‘brush’ while background() is called in the draw() function?

I’m creating a painting app using the p5.js editor, and I want to be able to customise both the background and draw using various brushes etc.

The problem is, when I include background(variable) into the draw() function, I can only change the background, but cannot draw.

When I remove it so that it is only included in the setup, I can draw once again, but cannot change the background colour.

Is there a way to include both, perhaps in different functions?

Any help would be greatly appreciated as I’ve been stuck on this for days!!

Here is my code:

let whiteB;
let redB;
let yellowB;
let blueB;
let blackB;
let greenB;
let pinkB;
let brownB;
let bucket;

let brushSize;

let rSlide, gSlide, bSlide;
let r, g, b;

let imgLego;
let imgPalette;
let fontHead;
let fontMid;
let fontSub;
let x;

let legohead;
let lucky;


function preload() {
  imgLego = loadImage("images/lego.png");
  imgBucket = loadImage("images/bucket.png");
  fontHead = loadFont("fonts/shizuru.ttf");
  fontMid = loadFont("fonts/concertOne.ttf");
  fontSub = loadFont("fonts/gloria.ttf");
  
}// close preload function

function setup() {
  
  background(255);
  createCanvas(1000, 600);
  noStroke();

  x = 10;
  
  // create the slider for the brush size
  brushSize = createSlider(1, 100, 20);

  // create the sliders for red, gree, blue values
  rSlide = createSlider(0, 255, 0);
  gSlide = createSlider(0, 255, 0);
  bSlide = createSlider(0, 255, 0);

  // position the sliders
  rSlide.position(x, x * 20);
  gSlide.position(x, x * 22);
  bSlide.position(x, x * 24);
  brushSize.position(x, x * 26);

  // variables to hold the colour (background)
  r = 255;
  g = 255;
  b = 255;
  
  // variables to hold the colour (random button)
  r1 = random(0,255);
  g1 = random(0,255);
  b1 = random(0,255);
  
  // color variables for fill bucket
  whiteB = color(255);
  redB = color(255,0,0);
  yellowB = color(246, 236, 54);
  blueB = color(0,0,255);
  blackB = color(0);
  greenB = color(0,170,35);
  pinkB = color(255,53,184);
  brownB = color(155,103,60);
  bucket = whiteB;

}

function draw() {
  
  background(bucket);
  noStroke();
  
  // yellow rectangle acting as margin
  fill(yellowB);
  rect(0, 0, 250, height)
  
  // poisition the text & value of slider
  textAlign(LEFT, TOP);
  fill(255);
  textFont(fontMid);
  textSize(15);
  text("red : " + rSlide.value(), x*2 + rSlide.width, x*20);
  text("green : " + gSlide.value(), x*2 + gSlide.width, x*22);
  text("blue : " + bSlide.value(), x*2 + bSlide.width, x*24);
  text("brush : " + brushSize.value(), x*2 + brushSize.width, x*26);

  // read the value of the slider and store it in a variable
  r = rSlide.value();
  g = gSlide.value();
  b = bSlide.value();
  
  // customise "background" text
  fill(0);
  textSize(20);
  text("BRUSH COLOR", 20, 175);
  
  // red "navbar"
  fill(redB)
  rect(0,0,1000,120,0,0,50,0);
  
  // customse "sketch" text
  fill(255)
  textFont(fontHead);
  textSize(40);
  text("SKETCH", 180, 10)
  
  // customse "random" text
  fill(0)
  textFont(fontSub);
  textSize(25);
  text("random", 850, 550);
  
  
  // images
  image(imgBucket, 930, 40, 40, 40);
  image(imgLego, 20, 15, 160, 90);
  
  //**lego block top right corner**//
  stroke(0);
  strokeWeight(3)
  // yellow block
  fill(246, 236, 54);
  rect(748,18,164,84,5)
  
  
  // paint buttons
  
  ellipseMode(CENTER);
  
  // white button
  fill(whiteB);
  ellipse(770,40,30);
  if (mouseX > 750 && mouseX < 790 && mouseY > 20 && mouseY < 60 && mouseIsPressed) { 
  bucket = whiteB;
  }
    
  // red button
  fill(redB);
  ellipse(810,40,30);
  if (mouseX > 790 && mouseX < 830 && mouseY > 20 && mouseY < 60 && mouseIsPressed) { 
  bucket = redB;
  }
    
  // yellow button
  fill(yellowB);
  ellipse(850,40,30);
  if (mouseX > 830 && mouseX < 870 && mouseY > 20 && mouseY < 60 && mouseIsPressed) { 
  bucket = yellowB;
  }
  
  // blue button
  fill(blueB);
  ellipse(890,40,30);
  if (mouseX > 870 && mouseX < 910 && mouseY > 20 && mouseY < 60 && mouseIsPressed) { 
  bucket = blueB;
  }
  
  // black button
  fill(blackB);
  ellipse(770,80,30);
  if (mouseX > 750 && mouseX < 790 && mouseY > 60 && mouseY < 100 && mouseIsPressed) { 
  bucket = blackB;
  }
  
  // green button
  fill(greenB);
  ellipse(810,80,30);
  if (mouseX > 790 && mouseX < 830 && mouseY > 60 && mouseY < 100 && mouseIsPressed) { 
  bucket = greenB;
  }
  
  // pink button
  fill(pinkB);
  ellipse(850,80,30);
  if (mouseX > 830 && mouseX < 870 && mouseY > 60 && mouseY < 100 && mouseIsPressed) { 
  bucket = pinkB;
  }
  
  // brown button
  fill(brownB);
  ellipse(890,80,30);
  if (mouseX > 870 && mouseX < 910 && mouseY > 60 && mouseY < 100 && mouseIsPressed) { 
  bucket = brownB;
  } 
  
} // close draw function


function mouseDragged() {
  stroke(r,g,b);
  strokeWeight(brushSize.value())
  line(mouseX, mouseY, pmouseX, pmouseY)
  
} // close mouseDragged function