# Floating Above Paint

**URL:** <https://discourse.processing.org/t/floating-above-paint/8601>\
**Category:** Coding Questions\
**Created:** [February 21, 2019, 6:01pm UTC](https://discourse.processing.org/t/floating-above-paint/8601 "2019-02-21T18:01:35Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![stevenoneilsteven](https://avatars.discourse-cdn.com/v4/letter/s/e19adc/32.png) [@stevenoneilsteven](https://discourse.processing.org/u/stevenoneilsteven)\
**Post date:** [February 21, 2019, 6:01pm UTC](https://discourse.processing.org/t/floating-above-paint/8601/1 "2019-02-21T18:01:35Z")

</div>

Hi all,

How do you arrange text to float above everything else on the canvas.

Even above the mouse painting.

S

---

<div class="post-metadata">

**Author:** ![figraham](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/figraham/32/4161_2.png) [@figraham](https://discourse.processing.org/u/figraham)\
**Post date:** [February 21, 2019, 7:50pm UTC](https://discourse.processing.org/t/floating-above-paint/8601/2 "2019-02-21T19:50:48Z")

</div>

You’ll have to put the text last in the draw() loop. This is because when stepping through the program whatever is last will be on top. Like:

```auto
void setup() {
  size(400, 400);
  background(51);
}

void draw() {
  fill(0);
  ellipse(mouseX, mouseY, 10, 10);
  fill(255);
  text("Hello world!", width/2, height/2);
}

```

You may notice that the text doesn’t look super great this is because it’s being redrawn every time through draw. You can solve this by using [PGraphics](https://processing.org/reference/PGraphics.html). Which can be used like layers in photoshop. Here’s an example:

```auto
PGraphics painting;
PGraphics txt;

void setup() {
  size(400, 400);
  // setup graphics
  painting = createGraphics(width, height);
  txt = createGraphics(width, height);
  // draw text on txt graphics
  txt.beginDraw();
  txt.fill(255);
  txt.text("Hello World!", width/2, height/2);
  txt.endDraw();
}

void draw() {
  background(51);
  // use mouse position to paint on painting graphics
  painting.beginDraw();
  painting.fill(0);
  painting.ellipse(mouseX, mouseY, 10, 10);
  painting.endDraw();
  // the PGraphics are invisable unless you draw them using image()
  image(painting, 0, 0);
  image(txt, 0, 0);
}

```

Hope that helps and best of luck!