# I want to clear these buttons from the canvas any tips? (processing 3+)

**URL:** <https://discourse.processing.org/t/i-want-to-clear-these-buttons-from-the-canvas-any-tips-processing-3/16962>\
**Category:** Coding Questions\
**Created:** [January 8, 2020, 5:17pm UTC](https://discourse.processing.org/t/i-want-to-clear-these-buttons-from-the-canvas-any-tips-processing-3/16962 "2020-01-08T17:17:53Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![NinjaKittens](https://avatars.discourse-cdn.com/v4/letter/n/97f17d/32.png) [@NinjaKittens](https://discourse.processing.org/u/NinjaKittens)\
**Post date:** [January 8, 2020, 5:17pm UTC](https://discourse.processing.org/t/i-want-to-clear-these-buttons-from-the-canvas-any-tips-processing-3/16962/1 "2020-01-08T17:17:53Z")

</div>

This is the code that I have so far:

```auto
PImage a;
PImage b;

void setup()
{
size(1000,1000);
background(100,255,110);
a = loadImage("https://www.openprocessing.org/sketch/813047/files/Screenshot_2019-12-19_at_84649_AM.png");
b = loadImage("https://www.openprocessing.org/sketch/813047/files/Screenshot%202020-01-07%20at%209.02.14%20AM.png");
noStroke();
}
void draw()
{
image(a,500,530,100,50);
image(b,400,400,400,50);
}

void draw() {
 if (mousePressed && (mouseButton == RIGHT)) {
	 fill(0,255,00);
	 rect(0,0,1000,1000);
 }
 else if (mousePressed && (mouseButton == LEFT)) {
	fill(255,0,0);
	rect(0,0,1000,1000);
	 }
	image(b,400,400,400,50);
	image(a,500,530,100,50);
 }

```

I did look at other forms that used boolean. It did work but it automaticly cleared. I want it to clear when I click the images.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 8, 2020, 7:04pm UTC](https://discourse.processing.org/t/i-want-to-clear-these-buttons-from-the-canvas-any-tips-processing-3/16962/2 "2020-01-08T19:04:39Z")

</div>

Normally draw() starts with background and then you draw what you want to draw

Also, have one boolean variable per image; initially true

When image clicked, set the corresponding variable to false

Also, when you show the images in draw():

```auto

if(showImg1)
  image(a.....

if(showImg2)
  image(b.....

```

**Remark**

It’s faster to use resize on the images in setup instead of using image() command with 5 parameters.

Welcome to the forum!

Good to have you here!

Regards, Chrisir

---

<div class="post-metadata">

**Author:** ![NinjaKittens](https://avatars.discourse-cdn.com/v4/letter/n/97f17d/32.png) [@NinjaKittens](https://discourse.processing.org/u/NinjaKittens)\
**Post date:** [January 9, 2020, 4:47pm UTC](https://discourse.processing.org/t/i-want-to-clear-these-buttons-from-the-canvas-any-tips-processing-3/16962/3 "2020-01-09T16:47:14Z")

</div>

I added the boolean to my code but it did nothing. Could you tell me what happened? Thanks

```auto
PImage a;
boolean c = true;
PImage b;
boolean d = true;

void setup() {
size(1000,1000);
background(100,255,210); //background color
a = loadImage("https://www.openprocessing.org/sketch/813047/files/Screenshot%202020-01-08%20at%209.48.03%20AM.png"); //img link
b = loadImage("https://www.openprocessing.org/sketch/813047/files/Screenshot%202020-01-08%20at%209.44.31%20AM.png");
noStroke();
}
void draw() {
image(a,500,530,100,50); //loads in img
image(b,400,400,400,50);
}

void draw() {
 if(mousePressed && (mouseButton == RIGHT)) {
	 fill(0,255,00);
	 rect(0,0,1000,1000);
	 c = false;
 }
	 else if (mousePressed && (mouseButton == LEFT)) {
		 fill(255,0,0);
		 rect(0,0,1000,1000);
		 d = false;
		 }
		image(b,400,400,400,50);
		image(a,500,530,100,50);
	 }

```

Thanks for the help.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 9, 2020, 5:00pm UTC](https://discourse.processing.org/t/i-want-to-clear-these-buttons-from-the-canvas-any-tips-processing-3/16962/4 "2020-01-09T17:00:00Z")

</div>

> [@Chrisir](#):
>
> if(showImg1)  
> image(a…  
> if(showImg2)  
> image(b…

You forgot the if-clauses to evaluate c and d.

Please choose better names like

- imgA and flagA etc.

---

<div class="post-metadata">

**Author:** ![NinjaKittens](https://avatars.discourse-cdn.com/v4/letter/n/97f17d/32.png) [@NinjaKittens](https://discourse.processing.org/u/NinjaKittens)\
**Post date:** [January 9, 2020, 5:02pm UTC](https://discourse.processing.org/t/i-want-to-clear-these-buttons-from-the-canvas-any-tips-processing-3/16962/5 "2020-01-09T17:02:04Z")

</div>

I realized that. This was what I came up with. but it still does not work.

```auto
boolean c = true;
boolean d = true;

void draw() {
if (!c) {
 if(mousePressed && (mouseButton == RIGHT)) {
	 fill(0,255,00);
	 rect(0,0,1000,1000);
 }
	image(a,500,530,100,50);
	image(b,400,400,400,50);
}
if (!d) {
	if (mousePressed && (mouseButton == LEFT)) {
		 fill(255,0,0);
		 rect(0,0,1000,1000);
		 }
	image(a,500,530,100,50);
	image(b,400,400,400,50);
	}
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 9, 2020, 5:12pm UTC](https://discourse.processing.org/t/i-want-to-clear-these-buttons-from-the-canvas-any-tips-processing-3/16962/6 "2020-01-09T17:12:21Z")

</div>

> [@Chrisir](#):
>
> if(showImg1)  
> image(a…  
> if(showImg2)  
> image(b…

do it like this please

---

<div class="post-metadata">

**Author:** ![NinjaKittens](https://avatars.discourse-cdn.com/v4/letter/n/97f17d/32.png) [@NinjaKittens](https://discourse.processing.org/u/NinjaKittens)\
**Post date:** [January 9, 2020, 5:19pm UTC](https://discourse.processing.org/t/i-want-to-clear-these-buttons-from-the-canvas-any-tips-processing-3/16962/7 "2020-01-09T17:19:35Z")

</div>

Like this?

```auto
boolean flagA = true;

void draw() {
if (!flagA) {
 if(mousePressed && (mouseButton == RIGHT)) {
	 if(show imgA) {
		 image(imgA,500,530,100,50);
		 image(imgB,400,400,400,50);
	 }
 }
}
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 9, 2020, 5:27pm UTC](https://discourse.processing.org/t/i-want-to-clear-these-buttons-from-the-canvas-any-tips-processing-3/16962/8 "2020-01-09T17:27:11Z")

</div>

No.

“flagA” is the same as “show img A”

And you don’t want to have `if (!flagA) {` before the entire content of `draw()`.

you just want to say

```auto
if(show imgA) {
    image(imgA,500,530,100,50);
}

```

**Remark**

Also, since imgA and imgB must work **independently**

```auto
if(flagA) {
     image(imgA,500,530,100,50);
}

if(flagB) {
    image(imgB,400,400,400,50);
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 9, 2020, 5:36pm UTC](https://discourse.processing.org/t/i-want-to-clear-these-buttons-from-the-canvas-any-tips-processing-3/16962/9 "2020-01-09T17:36:46Z")

</div>

in this version, `mousePressed() ` is used as a function instead of a variable `mousePressed` - same name but without the brackets, see reference

Also, the usage of c and d is clear.

**Question is**

- why do you use images in the first place and not use text() command?

- Also, if you want to make a Quiz, you don’t want to hide the images.

- Also, you don’t want to check _left_ and _right_ button, but you want check if the mouse has been pressed on (inside) a screen button

screen buttons:

- “I dare (I want to play)” and
- “I leave”

Chrisir

Version to switch off images, like in your code :

```auto

PImage a, b;

boolean c = true;
boolean d = true;

void setup() {
  size(1000, 1000);

  background(100, 255, 210); //background color
  a = loadImage("https://www.openprocessing.org/sketch/813047/files/Screenshot%202020-01-08%20at%209.48.03%20AM.png"); //img link
  b = loadImage("https://www.openprocessing.org/sketch/813047/files/Screenshot%202020-01-08%20at%209.44.31%20AM.png"); //
}

void draw() {
  background(100, 255, 210); //background color

  if (c)
    image(a, 500, 530, 100, 50);
  if (d)
    image(b, 400, 400, 400, 50);
}

void mousePressed() {
  if (mouseButton == LEFT) {
    c=false;
  }

  if (mouseButton == RIGHT) {
    d=false;
  }
}//
//

```

---

<div class="post-metadata">

**Author:** ![NinjaKittens](https://avatars.discourse-cdn.com/v4/letter/n/97f17d/32.png) [@NinjaKittens](https://discourse.processing.org/u/NinjaKittens)\
**Post date:** [January 9, 2020, 5:44pm UTC](https://discourse.processing.org/t/i-want-to-clear-these-buttons-from-the-canvas-any-tips-processing-3/16962/10 "2020-01-09T17:44:02Z")

</div>

Thank you for the help.

---

<div class="post-metadata">

**Author:** ![Waboqueox](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/waboqueox/32/5643_2.png) [@Waboqueox](https://discourse.processing.org/u/Waboqueox)\
**Post date:** [January 10, 2020, 8:25am UTC](https://discourse.processing.org/t/i-want-to-clear-these-buttons-from-the-canvas-any-tips-processing-3/16962/11 "2020-01-10T08:25:15Z")

</div>

How kll says:

> [@A key that when clicked will increase the speed of the square](https://discourse.processing.org/t/a-key-that-when-clicked-will-increase-the-speed-of-the-square/16939/2):
>
> please format your code posting by pasting it into the
> 
> ```auto
> </> code button
> 
> ```
> 
> of the editor header menu ( context name: Preformatted text )  
> it looks like
> 
> ```auto
> type or paste code here
> 
> ```
> 
> also can use the ``` manually above and below your code.
> 
> thank you.

😃