When we use the TextArea Element tag, text does not print as shown in the display. It goes in one line rather than printing according to the row and col value from the text area element.

[arpit3210]

  const handleDownload = () => {
    if (!cardRef.current) return;

    html2canvas(cardRef.current, {
      onclone: (doc) => {
        const cardElement = doc.querySelector(".rounded-card"); // Add a class to the card container
        if (cardElement) {
          // Apply rounded border to the cloned card container
          cardElement.style.borderRadius = "0px"; // Adjust the radius as needed
        }
      },
    }).then((canvas) => {
      const image = canvas.toDataURL("image/png");

      // Optionally, you can trigger a download
      const downloadLink = document.createElement("a");
      downloadLink.href = image;
      downloadLink.download = "rounded_birthday_card.png";
      document.body.appendChild(downloadLink);
      downloadLink.click();
      document.body.removeChild(downloadLink);
    });
  };

        <div>
                              <textarea
                                placeholder="Type something here..."
                                value={formData.greeting}
                                className=" font-semibold   outline-none w-full h-full relative"
                                name=""
                                id=""
                                cols="30"
                                rows="9"
                              onChange={handleTextareaChangeforbr}
                                maxLength={150} // Change 150 to the maximum number of characters you want to allow
                                onInput={(e) => {
                                  const inputValue = e.target.value;
                                  const restrictedCharsRegex = /[^a-zA-Z0-9\s]/g; // Define the regex to allow only letters, numbers, and spaces

                                  if (inputValue.match(restrictedCharsRegex)) {
                                    // If the input contains characters other than letters, numbers, or spaces
                                    e.target.value = inputValue.replace(restrictedCharsRegex, ''); // Remove those characters
                                  }

                                  // Combine initial value and user input to calculate remaining characters
                                  const totalChars = 150; // Maximum number of characters allowed
                                  const usedChars = formData.greeting ? formData.greeting.length : 0; // Length of initial value
                                  const remainingChars = totalChars - usedChars - inputValue.length; // Calculate remaining characters
                                  document.getElementById('charCount').innerText = `${remainingChars}`;
                                }}
                              >

                              </textarea>
                              <div className="text-sm bg-yellow-500 p-1 rounded-full inline text-white" id="charCount">150</div>
                            </div>