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

p5.js Beginners
1

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

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!

2

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

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

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