let x,y;

function setup() {

  createCanvas(400, 400);

  // extraCanvas = createGraphics(400,400);

  background(0);

}

​

let r = 200, g = 120, b = 200;

function draw() {

  // if you need animation => draw background over and over

  x = random(200,208);

  y = random(200,208);

  strokeWeight(4);

  stroke(200,200,200);

  fill(255,0,0);

  // color pickers

  rect(0,0,40,20); // color rect 1

  fill(0,200,0);

  rect(60,0,40,20); // rect 2

  fill(0,0,200);

  rect(120,0,40,20); // rect 3

  fill(200,100,200);

  rect(180,0,40,20); // rect 4

  fill(100,80,240);

  rect(240,0,40,20); // rect 5

  fill(200,200,200);

  rect(300,0,40,20); // rect 6 

  // draw eraser

  stroke(0,0,0);

  strokeWeight(1);

  // line(305,4,331,4);

  rect(307,5,25,12);

  rect(305,5,20,12);

  strokeWeight(0);

  fill(r,g,b);

  // circle(x,y,20);

  if(mouseIsPressed) {

    if(mouseX <= 40 && mouseX >= 0 && mouseY >= 0 && mouseY <= 20) {

      r = 200;

      g = 0;

      b = 0;

}

    else if(mouseX <= 100 && mouseX >= 60 && mouseY >= 0 && mouseY <= 20) {

      r = 0;

      g = 200;

      b = 0;

}

    else if(mouseX <= 160 && mouseX >= 120 && mouseY >= 0 && mouseY <= 20) {

      r = 0;

      g = 0;

      b = 200;

}

        else if(mouseX <= 220 && mouseX >= 180 && mouseY >= 0 && mouseY <= 20) {

      r = 200;

      g = 100;

      b = 200;

}

        else if(mouseX <= 280 && mouseX >= 240 && mouseY >= 0 && mouseY <= 20) {

      r = 100;

      g = 80;

      b = 240;

}

        else if(mouseX <= 340 && mouseX >= 300 && mouseY >= 0 && mouseY <= 20) {

      r = 0;

      g = 0;

      b = 0;

}

    circle(mouseX,mouseY,20);

  }

}