Textarea is aligned centered but document.getElementById("test").value; is not

Question

I'm trying to aligned the text centered display from the text input by using document.getElementById("test").value

but display is still aligned left

Also, in the initial display textToPoints are not in the same place with the text(image 1) but would be fixed after typing something in the input (image 2) which is kinda confusing, could that be fixed I want the initial display be aligned too

enter image description hereimage 1

enter image description hereimage 2

function newText() {
  let msg = document.getElementById("test").value;
  
  let x = width/2;
  let y = height/2;
  
  density = 0.25;

  let points = font.textToPoints(msg, x,y, 200, {
    sampleFactor: density,
    simplifyThreshold: 0,
  });
  let t = frameCount;

  ptSize = 90 * sin(t * 0.025);

  for (let i = 0; i < points.length; i++) {
    noStroke();
    fill(0, 0, 0);
    ellipse(points[i].x, points[i].y, ptSize);
  }

  fill(255, 0, 0);
  textFont(font);
  textSize(200);
  textLeading(200);
  text(msg, x, y, 980, 1080);
}

textarea {
  text-align:center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
<div class="justified">
<p>Write something down</p>
<textarea id="test" name="test" rows="4" cols="50" oninput="newText()">
    can't
    stop
    eating
    pizza!</textarea>
</div>