Draw rectangles with the mouse, background refresh

Processing Coding Questions
5 
PImage buff;
int startX;
int startY;
int endX;
int endY;
boolean drawing;
int strokeW = 2;
int f = 0;
Shape shape;
 
PGraphics shapeLayer; 
ArrayList<PGraphics> layersList = new ArrayList();
 
void setup() {
  size(525, 700);
  //buff = loadImage("buff.jpg");
  //background(buff);
}
 
void draw() {

  buff = loadImage("buff.jpg");
  background(buff);
  if (f==0)
  {
    if (mousePressed == true)
    {
  strokeWeight(strokeW);
  stroke(255,0,0);
  fill(255,0,0,30);
 
  for(int i = 0; i < layersList.size(); i++) {
    image(layersList.get(i), 0, 0);
  }
  if (drawing) {
    shape.createRectangle();
    
  }}}
  if (f==0)
  {
    if (mousePressed == false)
    
  { 
       int H1 = abs(10+endX-startX); 
       int H2 = abs(10+endY-startY); 

  for (int i=0; i<width; i+=H1) 
    {
      for (int j=0; j<height; j+=H2) 
    {
  PImage newImg = buff.get(startX, startY, H1, H2);
      fill(extractColorFromImage(newImg), 40);
      rect(startX, startY, endX, endY,4);
      noStroke();
    }
    }
  }}
}
void mouseClicked() 
{
  if (f == 0) 
  {
    f = 1;
  } 
  else 
  {
    f = 0;
  }
}  
void mousePressed() {
  startX = mouseX;
  startY = mouseY;
 
  shapeLayer = createGraphics(width, height);
  shapeLayer.beginDraw();
}  
 
void mouseDragged() {
  drawing = true;
  endX = constrain(mouseX, 0, 525);
  endY = constrain(mouseY, 0, 700); 
 
  shape = new Shape(startX, startY, endX, endY);
  shapeLayer.clear();
}
 
void mouseReleased() {
  drawing = false;
  shapeLayer.endDraw();
}  

class Shape {
  int startX;
  int startY;
  int endX;
  int endY;
 
  Shape(int x1, int y1, int x2, int y2) {
    startX = x1;
    startY = y1;
    endX = x2;
    endY = y2;
  }    
 
  void createRectangle() {
    shapeLayer.strokeWeight(strokeW);
    shapeLayer.rectMode(CORNERS);  
    rectMode(CORNERS);
    rect(startX, startY, endX, endY);

 
 
  }
 
}  
color extractColorFromImage(PImage buff) {
  buff.loadPixels();
  color r = 1, g = 1, b = 1;
 
  for (color c : buff.pixels) {
    r += c >> 020 & 255;
    g += c >> 010 & 255;
    b += c        & 255;
  }
 
  r /= buff.pixels.length;
  g /= buff.pixels.length;
  b /= buff.pixels.length;
 
  return color(r, g, b);
}

otherwise I tried with this code, I’m close to the goal, but in both of them I really do not understand where I have to change for the rectangle fill by the color average is all the time displayed…