The text truncates and doesn't show in multiline

[ShahramZahoor]

When I fillText on an image taken by camera the text truncates and doesn't show in multiline. Is there anyway we can do that ?
img.addEventListener('load', async () => {
canvas.width = width;
canvas.height = (width / img.width) * img.height;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

    const text = `Serial Number 4 | This is a dummy text | 21 Jun 2024, 12:22am`;
    const fontSize = 20;
    ctx.font = `${fontSize}px Arial`;

    // Calculate text position
    const textX = canvas.width / 2;
    const textY = canvas.height - 20;

    // Draw text with dual stroke
    ctx.textAlign = 'center';
    ctx.textBaseline = 'center';

    // Draw outer stroke
    ctx.lineWidth = 6;
    ctx.strokeStyle = 'black';
    ctx.strokeText(text, textX, textY);

    // Draw inner stroke
    ctx.lineWidth = 3;
    ctx.strokeStyle = 'white';
    ctx.strokeText(text, textX, textY);

    // Draw the actual text
    ctx.fillStyle = 'black';
    ctx.fillText(text, textX, textY);
  });

  canvas.toDataURL().then((data) => {
    setImageUri(data.replace(/^"|"$/g, ``));
  });

[iddan]

Can you validate this behaviour doesn't happen on a regular HTML canvas as well?