drawing on screen after region clicked processing - processing

Question

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);
}
}

Answer 1

Way better post than the last. I think I now get what you want. I coded you a short example so you can get the hang of it. Here's what it will do:
PImage img;
boolean canDraw;
void setup() {
size(960, 720);
background(255);
img = loadImage("pencil.png");
}
void draw() {
if (canDraw) {
fill(color(0, 128, 0));
} else {
fill(color(128, 0, 0));
}
rect(800, 1, 100, 100);
image(img, 800, 1, 100, 100);
if (canDraw && mousePressed) {
stroke(0);
line(mouseX, mouseY, pmouseX, pmouseY);
}
}
void mouseClicked() {
if (mouseX > 800 && mouseX < 800+img.width && mouseY > 1 && mouseY < 1+img.height) {
canDraw = !canDraw;
}
}
I'll hang around in case you want to ask questions about this. Have fun!