# PGraphics text is pixelated

**URL:** <https://discourse.processing.org/t/pgraphics-text-is-pixelated/586>\
**Category:** Processing\
**Created:** [June 1, 2018, 1:55am UTC](https://discourse.processing.org/t/pgraphics-text-is-pixelated/586 "2018-06-01T01:55:07Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![VansiusProductions](https://avatars.discourse-cdn.com/v4/letter/v/4da419/32.png) [@VansiusProductions](https://discourse.processing.org/u/VansiusProductions)\
**Post date:** [June 1, 2018, 1:55am UTC](https://discourse.processing.org/t/pgraphics-text-is-pixelated/586/1 "2018-06-01T01:55:08Z")

</div>

Hi,

When I use PGraphics.text() the text is very pixelated and low quality, below is a comparison of PApplet.text() and PGraphics.text() using the same .ttf and same font size:

[Click me](https://i.imgur.com/aRP65S5.png)

Why is this happening?

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [June 1, 2018, 1:57am UTC](https://discourse.processing.org/t/pgraphics-text-is-pixelated/586/2 "2018-06-01T01:57:15Z")

</div>

Can you please post a simple [MCVE](https://stackoverflow.com/help/mcve) so we can see the problem?

---

<div class="post-metadata">

**Author:** ![VansiusProductions](https://avatars.discourse-cdn.com/v4/letter/v/4da419/32.png) [@VansiusProductions](https://discourse.processing.org/u/VansiusProductions)\
**Post date:** [June 1, 2018, 2:45am UTC](https://discourse.processing.org/t/pgraphics-text-is-pixelated/586/3 "2018-06-01T02:45:32Z")

</div>

OK

```auto
PFont font;
PGraphics pg;
int size = 14;

void setup() {
 size(800,800); 
 font = createFont("https://github.com/JotJunior/PHP-Boleto-ZF2/blob/master/public/assets/fonts/arial.ttf?raw=true",128);
 pg = createGraphics(800,800);
 textFont(font);
}

void draw() {
  background(0);
  textSize(size);
  text("TEST",20,100);
  pg.beginDraw();
  pg.textFont(font,size);
  pg.text("TEST",20,400);
  pg.endDraw();
  image(pg.get(0,0,800,800),0,0);
  pg.clear();
  text(size,600,40);
}

void mouseWheel(MouseEvent e) {
    size -= e.getCount();
}

```

Scroll to change the font size. My issue occurs at smaller font sizes (e.g 12 , 14). I included .get() because I used it in my original code to get part of the PGraphics image.

---

<div class="post-metadata">

**Author:** ![colouredmirrorball](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/colouredmirrorball/32/234_2.png) [@colouredmirrorball](https://discourse.processing.org/u/colouredmirrorball)\
**Post date:** [June 1, 2018, 11:53am UTC](https://discourse.processing.org/t/pgraphics-text-is-pixelated/586/4 "2018-06-01T11:53:02Z")

</div>

I think the issue is that you are calling `pg.clear();` outside the `pg.beginDraw()` and `pg.endDraw()` block. Try moving this line to directly after `pg.beginDraw();`.

---

<div class="post-metadata">

**Author:** ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)\
**Post date:** [June 1, 2018, 12:34pm UTC](https://discourse.processing.org/t/pgraphics-text-is-pixelated/586/5 "2018-06-01T12:34:28Z")

</div>

You seem to be using textSize() in one place and textFont() in the other. From recollection these don’t always behave the same. At least try with the same functions.

You should also use the version of image() that has 9 parameters to specify the region you want rather than using pg.get().

---

<div class="post-metadata">

**Author:** ![VansiusProductions](https://avatars.discourse-cdn.com/v4/letter/v/4da419/32.png) [@VansiusProductions](https://discourse.processing.org/u/VansiusProductions)\
**Post date:** [June 1, 2018, 8:13pm UTC](https://discourse.processing.org/t/pgraphics-text-is-pixelated/586/6 "2018-06-01T20:13:01Z")

</div>

@colouredmirrorball did that and the problem still persists.

@neilcsmith in my original code I tried using either textFont for both or textSize for both but there seems to be no difference. using the image() with 9 parameters (with uv coordinates) didn’t work either. My temporary solution was to draw the text twice so it’s much more clearer, and adjusting the fill alpha if it’s too bright. [Well it works](https://i.imgur.com/0ipPQht.png) 😛

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [June 4, 2018, 1:03am UTC](https://discourse.processing.org/t/pgraphics-text-is-pixelated/586/7 "2018-06-04T01:03:20Z")

</div>

> [@VansiusProductions](#):
>
> textFont for both or textSize

Some related past discussions on the old forum:

- [https://forum.processing.org/two/discussion/21206/scaling-text](https://forum.processing.org/two/discussion/21206/scaling-text)
- [Scale Text to Screen width - Processing 2.x and 3.x Forum](https://forum.processing.org/two/discussion/comment/85497/#Comment_85497)