# Text Not Centered in Canvas - Help Needed with p5.js

**URL:** <https://discourse.processing.org/t/text-not-centered-in-canvas-help-needed-with-p5-js/46207>\
**Category:** Beginners\
**Created:** [April 13, 2025, 8:56am UTC](https://discourse.processing.org/t/text-not-centered-in-canvas-help-needed-with-p5-js/46207 "2025-04-13T08:56:18Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![moracapaoladesign](https://avatars.discourse-cdn.com/v4/letter/m/5e9695/32.png) [@moracapaoladesign](https://discourse.processing.org/u/moracapaoladesign)\
**Post date:** [April 13, 2025, 8:56am UTC](https://discourse.processing.org/t/text-not-centered-in-canvas-help-needed-with-p5-js/46207/1 "2025-04-13T08:56:18Z")

</div>

Hello everyone,

I’m currently working on a p5.js project, and I’m having an issue with centering text on the canvas. Despite setting the text alignment to `CENTER` both horizontally and vertically, the text keeps appearing at the bottom of the canvas and is cut off.

Here’s the code I’m using:

javascript

CopyEdit

```auto
let currentFontIndex = 0;
const fonts = ['Arial', 'Times New Roman', 'Courier New', 'Georgia'];
let textContent = "For you can only know yourself when you strike an attitude: a statue: not alive. When one is alive, one lives and does not see himself. To know one's self is to die. The reason you spend so much time looking at yourself in that mirror, in all mirrors, is that you are not alive; you do not know how to live, you cannot, or you do not want to live.";

function setup() {
  createCanvas(windowWidth, windowHeight);
  textSize(24);
  textAlign(CENTER, CENTER);
}

function draw() {
  background(255);
  let x = width / 2;
  let y = height / 2;
  textFont(fonts[currentFontIndex]);
  text(textContent, x, y, width * 0.8, height * 0.8);
}

function mousePressed() {
  currentFontIndex = (currentFontIndex + 1) % fonts.length;
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

```

### Issue:

- The text is positioned at the bottom of the canvas.
- I can only see a portion of the text, as it’s being cut off.

I’ve tried adjusting the canvas size and the text alignment, but I’m still facing the issue. Does anyone know how to fix this? Any help would be greatly appreciated!

Thank you in advance!

---

<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:** [April 13, 2025, 9:14am UTC](https://discourse.processing.org/t/text-not-centered-in-canvas-help-needed-with-p5-js/46207/2 "2025-04-13T09:14:37Z")

</div>

> [@moracapaoladesign](#):
>
> `text(textContent, x, y, width * 0.8, height * 0.8)`

This is the problem the last 4 parameters represent the top-left corner (display coordinates), width and height of the text _ **area to fill** _ so for the whole screen it should be

```auto
text(textContent, 0, 0, width, height)

```

The `textAlign(...)` method controls how the text appears inside the text area specified in the call to `text(...)`