# Add text above rect

**URL:** <https://discourse.processing.org/t/add-text-above-rect/34034>\
**Category:** Coding Questions\
**Created:** [December 10, 2021, 2:49pm UTC](https://discourse.processing.org/t/add-text-above-rect/34034 "2021-12-10T14:49:36Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![MoonAlien822](https://avatars.discourse-cdn.com/v4/letter/m/65b543/32.png) [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)\
**Post date:** [December 10, 2021, 2:49pm UTC](https://discourse.processing.org/t/add-text-above-rect/34034/1 "2021-12-10T14:49:36Z")

</div>

I tried to add text on top of the rects in the shop, but the text appeared behind the rects, why is this?

```auto
int clicks = 0;
color cookie;
color black;
color white;

PImage home;

boolean shop= false;

void setup() {
  rectMode(CORNER);
  size(660, 660);
  background(100);

  home= loadImage("home.png");

  cookie = color(132, 86, 60, 255);
  black = color(0, 0, 0, 255);
  white = color(255, 255, 255, 255);
  textAlign(LEFT);
  textSize(30);
}

void draw() {
  rectMode(CORNER);
  background(100);
  if (!shop) {
    fill(cookie);
    ellipse(width / 2, height / 2, height / 3, height / 3);

    fill(0);
    textSize(30);
    text("clicks " + clicks, 20, 30);

    rect(10, height/2+15, 60, 60);
    fill(255);
    textSize(25);
    text("shop", 10, height/2+55);
  }

  if (shop) {
    fill(0);
    rectMode(CORNERS);
    imageMode(CORNERS);
    image(home, width/2-12, 2, width/2+13, 25);
    filter(INVERT);
    fill(38, 208, 213);
    rect(10, 10, width/2-11, height/3-10);
    rect(10, height/3+11, width/2-11, height/3+height/3-10);
    rect(10, height/3+height/3+11, width/2-11, height/3+height/3+height/3-10);

    fill(213, 38, 208);
    rect(width/2+12, 10, width-10, height/3-10);
    rect(width/2+12, height/3+11, width-10, height/3+height/3-10);
    rect(width/2+12, height/3+height/3+11, width-10, height/3+height/3+height/3-10);
  }
}

void mousePressed() {
  if (!shop) {
    if (get(mouseX, mouseY) == cookie) {
      clicks++;
    }

    if (get(mouseX, mouseY) == black) {
      shop=true;
    }
  }

  if (shop) {
    if (get(mouseX, mouseY) == white) {
      shop=false;
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [December 10, 2021, 10:22pm UTC](https://discourse.processing.org/t/add-text-above-rect/34034/2 "2021-12-10T22:22:29Z")

</div>

Hi @MoonAlien822,

> [@MoonAlien822](#):
>
> I tried to add text on top of the rects in the shop

Which text are you talking about? The `Shop` and `Clicks` texts?

Because right now if the `shop` variable is `true` then you are not entering your first condition that is displaying the text so it doesn’t work 😉

---

<div class="post-metadata">

**Author:** ![MoonAlien822](https://avatars.discourse-cdn.com/v4/letter/m/65b543/32.png) [@MoonAlien822](https://discourse.processing.org/u/MoonAlien822)\
**Post date:** [December 11, 2021, 5:02pm UTC](https://discourse.processing.org/t/add-text-above-rect/34034/3 "2021-12-11T17:02:26Z")

</div>

> [@MoonAlien822](#):
>
> ```auto
> if (shop) {
> fill(0);
> rectMode(CORNERS);
> imageMode(CORNERS);
> image(home, width/2-12, 2, width/2+13, 25);
> filter(INVERT);
> fill(38, 208, 213);
> rect(10, 10, width/2-11, height/3-10);
> rect(10, height/3+11, width/2-11, height/3+height/3-10);
> rect(10, height/3+height/3+11, width/2-11, height/3+height/3+height/3-10);
> 
> fill(213, 38, 208);
> rect(width/2+12, 10, width-10, height/3-10);
> rect(width/2+12, height/3+11, width-10, height/3+height/3-10);
> rect(width/2+12, height/3+height/3+11, width-10, height/3+height/3+height/3-10);
> }
> 
> ```

I am talking about all the rects in here

---

<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:** [December 11, 2021, 6:13pm UTC](https://discourse.processing.org/t/add-text-above-rect/34034/4 "2021-12-11T18:13:26Z")

</div>

> [@MoonAlien822](#):
>
> I tried to add text on top of the rects in the shop, but the text appeared behind the rects, why is this?

first draw rects THEN draw text with different fill

also add 33 to y value in text() command, since y is the baseline for the text output

example:

```auto

int clicks = 0;
color cookie;
color black;
color white;

PImage home;

boolean shop= true;

void setup() {
  rectMode(CORNER);
  size(660, 660);
  background(100);

  home= loadImage("home.png");

  cookie = color(132, 86, 60, 255);
  black = color(0, 0, 0, 255);
  white = color(255, 255, 255, 255);
  textAlign(LEFT);
  textSize(30);
}

void draw() {
  rectMode(CORNER);
  background(100);
  if (!shop) {
    fill(cookie);
    ellipse(width / 2, height / 2, height / 3, height / 3);

    fill(0);
    textSize(30);
    text("clicks " + clicks, 20, 30);

    rect(10, height/2+15, 60, 60);
    fill(255);
    textSize(25);
    text("shop", 10, height/2+55);
  }

  if (shop) {
    fill(0);
    rectMode(CORNERS);
    imageMode(CORNERS);
    // image(home, width/2-12, 2, width/2+13, 25);
    filter(INVERT);
    fill(38, 208, 213);
    rect(10, 10, width/2-11, height/3-10);
    rect(10, height/3+11, width/2-11, height/3+height/3-10);
    rect(10, height/3+height/3+11, width/2-11, height/3+height/3+height/3-10);

    fill(213, 38, 208);
    rect(width/2+12, 10, width-10, height/3-10);
    rect(width/2+12, height/3+11, width-10, height/3+height/3-10);
    rect(width/2+12, height/3+height/3+11, width-10, height/3+height/3+height/3-10);

    fill(255);
    text("Here", 
      width/2+12 + 33, height/3+height/3+11 + 33 );
  }
}

void mousePressed() {
  if (!shop) {
    if (get(mouseX, mouseY) == cookie) {
      clicks++;
    }

    if (get(mouseX, mouseY) == black) {
      shop=true;
    }
  }

  if (shop) {
    if (get(mouseX, mouseY) == white) {
      shop=false;
    }
  }
}

```

* * *

Please consider using a grid / array / class for this

makes your life easier