# Display text on image

**URL:** <https://discourse.processing.org/t/display-text-on-image/18731>\
**Category:** Coding Questions\
**Created:** [March 17, 2020, 10:44am UTC](https://discourse.processing.org/t/display-text-on-image/18731 "2020-03-17T10:44:00Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ej8000](https://avatars.discourse-cdn.com/v4/letter/e/a8b319/32.png) [@ej8000](https://discourse.processing.org/u/ej8000)\
**Post date:** [March 17, 2020, 10:44am UTC](https://discourse.processing.org/t/display-text-on-image/18731/1 "2020-03-17T10:44:00Z")

</div>

how can I write text on Image or shape ,and become(the image and the text) one unit,so when i drag the image,also the text within it is dragged.

---

<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:** [March 17, 2020, 11:50am UTC](https://discourse.processing.org/t/display-text-on-image/18731/2 "2020-03-17T11:50:27Z")

</div>

Just display the image make a small offset with translate() and display the text()

When you use another translate before image() both will be moved as one item

Alternatively make an PGraphics pg containing the image and the text. Then just move the pg

---

<div class="post-metadata">

**Author:** ![ej8000](https://avatars.discourse-cdn.com/v4/letter/e/a8b319/32.png) [@ej8000](https://discourse.processing.org/u/ej8000)\
**Post date:** [March 17, 2020, 1:11pm UTC](https://discourse.processing.org/t/display-text-on-image/18731/3 "2020-03-17T13:11:35Z")

</div>

Thank u v.much 💛 💛 💛

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [March 17, 2020, 1:50pm UTC](https://discourse.processing.org/t/display-text-on-image/18731/4 "2020-03-17T13:50:32Z")

</div>

Hello,

Welcome to the Processing forum.

There are examples in the Processing IDE (File \> Examples…)

Using this one:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/fa57de01340aece3d00e018665c0791e1bba5a36.png)

Add to setup:

```auto
textSize(24);

```

Add a line to display text _after_ the image:

```auto
text("Space: The final frontier.", width-400, 50);

```

And voila!

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/df2c94f63f2a77a4db6718b6d30fd92512565c31.jpeg)

References:

> **[Typography](https://processing.org/tutorials/typography/)**
>
> Working with typefaces and text.

> **[Strings and Drawing Text](https://processing.org/tutorials/text/)**
>
> Learn how use the String class and display text onscreen.

> **[text() / Reference](https://processing.org/reference/text_.html)**
>
> Draws text to the screen. Displays the information specified in the first parameter on the screen in the position specified by the additional parameters. A default font will be used unless a font is s…

> **[textSize() / Reference](https://processing.org/reference/textSize_.html)**
>
> Sets the current font size. This size will be used in all subsequent calls to the text() function. Font size is measured in units of pixels.

> [@Blurry Text Solution](https://discourse.processing.org/t/blurry-text-solution/11293):
>
> I was using different text sizes in a recent project and was getting blurry fonts. I solve this issue by setting the largest text size in setup() and problem solved! Here is the code I used to test this: /\* Project: Blurry Text Author: GLV Date: 2019-05-15 Version: 01 \*/ void settings() { size(1024, 768, P3D); } void setup() { textSize(128); // Set to largest text size used to prevent blurring of text } void draw() { background(0); text24(); t…

`:)`