Drawing on screen after region clicked processing

Processing Coding Questions
1

I’m trying to make it so that when the user clicks the pencil icon in the program they are allowed to draw until the pencil has been clicked again. ive not added in a toggle yet but my current problem is that i get the desired behaviour in the mouse region which i specified but nowhere else on the screen, also please excuse my code its devolved a lot while playing with it, however by running it in its currrent state you should see what bug im talking about.

thanks

PImage[] img = new PImage[3];
boolean drawPencil = false;
boolean draw = false;


void setup() {
  size(960, 720);
    for (int i = 0; i < img.length; i++)
    img[i] = loadImage("image"+i+".png");
  //an array of images that sorts and load them into our program
 
  image(img[0],0,0);
  img[0].resize(width, height);
  // set the desired image to screen size
}

void mousePressed() {
  if (mouseX > 772 && mouseX < 864 && mouseY > 1 && mouseY < 74) {
        drawPencil = true;
        draw = true;
        // if the user clicks the pencil icon they will begin to draw
  }
}
void mouseReleased()
{
draw = false;
}
void draw() {
    if (draw) {
       stroke(255);
    line(mouseX, mouseY, pmouseX, pmouseY);
    }        
  if (key == 'w'||key == 'W') {
  image(img[0],0,0);
  img[0].resize(width, height);
  
  println(drawPencil);
  }


}
2

The if-clause could be directly before this