# Change background color when mousePressed

**URL:** <https://discourse.processing.org/t/change-background-color-when-mousepressed/36660>\
**Category:** Coding Questions\
**Created:** [April 30, 2022, 7:23pm UTC](https://discourse.processing.org/t/change-background-color-when-mousepressed/36660 "2022-04-30T19:23:25Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![luciaromancanivell](https://avatars.discourse-cdn.com/v4/letter/l/8edcca/32.png) [@luciaromancanivell](https://discourse.processing.org/u/luciaromancanivell)\
**Post date:** [April 30, 2022, 7:23pm UTC](https://discourse.processing.org/t/change-background-color-when-mousepressed/36660/1 "2022-04-30T19:23:25Z")

</div>

Hello, I am trying to make the background change when pressing each circle here, but I cannot get it to work, it is always white, any help? The circles are supposed to grow and be black when rolling over and the background change to different colors when clicking on each…

Thank you!

```auto
var x = 300;
var y = 200;
var d = 20;
var d2 = 20;
var d3 = 20;
var c = 'white';

function setup() {
  createCanvas(600, 400);
}

function draw() {
  ellipseMode(CENTER);
  background ('c');

  if (dist(mouseX, mouseY, x, y) < d/2) {
     fill(0);
     d=35;
  } else {
     fill(180);
     d=20;
  }  
  ellipse(x, y, d, d);    

  if (dist(mouseX, mouseY, x-100, y) < d2/2) {
     fill(0);
     d2=35;
  } else {
     fill(180);
     d2=20;
  }    
  ellipse(x-100, y, d2, d2);

  if (dist(mouseX, mouseY, x+100, y) < d3/2) {
     fill(0);
     d3=35;
  } else {
     fill(180);
     d3=20;     
  }   
  ellipse(x+100, y, d3, d3);
}

function mousePressed() {
  background ('c');
  let r = dist(mouseX, mouseY, x,y);
  if (r < 20) {
  c='yellow';
  }

 let s= dist(mouseX, mouseY, x-100,y);
  if (s < 20) {
  c='blue';
  }
  
 let t= dist(mouseX, mouseY, x+100,y);
  if (t < 20) {
  c='red';
  }
}

```

---

<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:** [April 30, 2022, 7:48pm UTC](https://discourse.processing.org/t/change-background-color-when-mousepressed/36660/2 "2022-04-30T19:48:11Z")

</div>

> [@luciaromancanivell](#):
>
> `background ('c');`

Try this without the ’ ’

At start of draw() mainly background (c);