# Wrong Text Rasterization Position on Mac

**URL:** <https://discourse.processing.org/t/wrong-text-rasterization-position-on-mac/46507>\
**Category:** Libraries\
**Created:** [June 5, 2025, 8:55am UTC](https://discourse.processing.org/t/wrong-text-rasterization-position-on-mac/46507 "2025-06-05T08:55:21Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![nurlanpie](https://avatars.discourse-cdn.com/v4/letter/n/df788c/32.png) [@nurlanpie](https://discourse.processing.org/u/nurlanpie)\
**Post date:** [June 5, 2025, 8:55am UTC](https://discourse.processing.org/t/wrong-text-rasterization-position-on-mac/46507/1 "2025-06-05T08:55:21Z")

</div>

I wrote a sketch that is supposed to rasterize text placed on a `PGraphics` object and display it centered on the canvas. However, in practice, the rasterized text appears in the bottom right corner instead of the center.

 ![Снимок экрана 2025-06-05 в 15.53.17](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/0/1/011b7c5cb021fa3c4ea632655e708d0f2009e6ea.png)

I double-checked: the text without the rasterization effect is perfectly centered.  
Interestingly, the exact same code works as expected on Windows, but shows this misalignment issue on macOS, which leads me to believe it might be OS-related.

Could someone help me figure out what’s causing this and how to fix it?

Code:

```processing
import controlP5.*;

ControlP5 cp5;
PImage img;
int res = 50;
int levels = 5;
PGraphics pg;

void setup() {
  size(600, 600);
  cp5 = new ControlP5(this);
  colorMode(HSB, 360, 100, 100);
  noStroke();
  imageMode(CENTER);

  cp5.addSlider("res")
    .setPosition(20, 20)
    .setRange(5, 100)
    .setValue(res)
    .setSize(200, 20);

  cp5.addSlider("levels")
    .setPosition(20, 50)
    .setRange(2, 10)
    .setValue(levels)
    .setNumberOfTickMarks(10)
    .setSize(200, 20);
    
    
  pg = createGraphics(600, 600);
}

void draw() {
  background(360);

  res = int(cp5.getController("res").getValue());
  levels = int(cp5.getController("levels").getValue());

  int step = width / res;
  
  pg.beginDraw();
  pg.pushMatrix();
  pg.translate(width/2, height/2);
  pg.colorMode(HSB, 360, 100, 100);
  pg.background(200);
  pg.fill(0);
  pg.textAlign(CENTER, CENTER);
  pg.textSize(32);
  pg.text("Tec Inter", 0, 0);
  pg.popMatrix();
  pg.endDraw();

  img = pg.get();

  for (int y = 0; y < height; y += step) {
    for (int x = 0; x < width; x += step) {
      color c = img.get(x, y);
      float b = brightness(c);
      if (b < 100) {
        fill(0);
        float r = width/res;
        r = map(b, 100, 0, r/levels, r);
        ellipse(x + step / 2, y + step / 2, r, r);
      }
    }
  }
  
  //image(pg,width/2,height/2);
}

void keyPressed() {
  if (key == ' ') {
    saveFrame("raster_output_####.png");
  }
}

```

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [June 5, 2025, 3:50pm UTC](https://discourse.processing.org/t/wrong-text-rasterization-position-on-mac/46507/2 "2025-06-05T15:50:58Z")

</div>

The problem appears to be the macs hires display change the beginning of your setup function to

```auto
void setup() {
  size(600, 600);
  pixelDensity(1);

```

Also I suggest that you avoid creating the text image in the `draw()` method because this is done every frame i.e. 60 times a second. Rather create once in the `setup` method and just use it in `draw`

EDIT: Not a perfect solution since it very much depends on the font size. Try 160 instead of 32

---

<div class="post-metadata">

**Author:** ![nurlanpie](https://avatars.discourse-cdn.com/v4/letter/n/df788c/32.png) [@nurlanpie](https://discourse.processing.org/u/nurlanpie)\
**Post date:** [June 6, 2025, 4:51am UTC](https://discourse.processing.org/t/wrong-text-rasterization-position-on-mac/46507/3 "2025-06-06T04:51:14Z")

</div>

Thanks so much! It works now