Insere texto com quebra de linha na IMAGEM

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Enviar Imagem</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <style>
    #imageContainer {
      position: relative;
      display: inline-block;
    }
    #textOverlay {
      position: absolute;
      bottom: 10px;
      right: 10px;
      color: white;
      font-size: 18px;
      text-shadow: 2px 2px 2px black;
      background-color: rgba(0, 0, 0, 0.5);
      padding: 10px;
      border-radius: 5px;
      white-space: pre-wrap; /* Para manter quebras de linha */
    }
  </style>
</head>
<body>
  <div class="container mt-5">
    <form id="imageForm" enctype="multipart/form-data">
      <div class="form-group">
        <label for="image">Selecione uma imagem:</label>
        <input type="file" class="form-control-file" id="image" accept="image/*" required>
      </div>
      <div class="form-group">
        <label for="caption">Insira o texto desejado:</label>
        <textarea class="form-control" id="caption" rows="3"></textarea>
      </div>
      <button type="submit" class="btn btn-primary">Enviar</button>
    </form>
  </div>

  <script>
    document.getElementById('imageForm').addEventListener('submit', function(event) {
      event.preventDefault();
      const fileInput = document.getElementById('image');
      const file = fileInput.files[0];
      const caption = document.getElementById('caption').value.trim(); // Obter texto do textarea e remover espaços em branco extras

      if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
          const imageData = e.target.result;
          const image = new Image();
          image.src = imageData;

          image.onload = function() {
            const canvas = document.createElement('canvas');
            const context = canvas.getContext('2d');
            canvas.width = image.width;
            canvas.height = image.height;
            context.drawImage(image, 0, 0);

            context.fillStyle = 'white';
            context.font = '18px Arial';
            context.textAlign = 'right';
            context.textBaseline = 'bottom';

            const lines = caption.split('\n').reverse(); // Invertendo a ordem das linhas
            const lineHeight = 25;
            lines.forEach((line, index) => {
              context.fillText(line, canvas.width - 10, canvas.height - 10 - (index * lineHeight));
            });

            const imageWithText = canvas.toDataURL('image/png');
            const link = document.createElement('a');
            link.href = imageWithText;
            link.download = 'image_with_text.png';
            link.click();
          };

        }
        reader.readAsDataURL(file);
      }
    });
  </script>
</body>
</html>