How can I show the multiple lines with textarea when I capture the Image with Html2Canvas?

[chaklasiyanikunj]

I read many blocks and many articles. But not able to find any solution for when I capture the image with html2canvas line need to show multiple lines.

Currently, lines cut off when I capture the Image using html2canvas. Here, My example:

//Html File Code
<div class="textarea-content" id="main-container">
  <textarea class="w-100 h-100 text-dark" rows="10" id="text-area">
A paragraph is defined as “a group of sentences or a single sentence that forms a unit” (Lunsford and Connors 116). Length and appearance do not determine whether a section in a paper is a paragraph. For instance, in some styles of writing, particularly journalistic styles, a paragraph can be just one sentence long.</textarea>
</div>

<button class="btn btn-primary" (click)="generatePDF()">PDF</button>

//Css File Code
p {
  font-family: Lato;
}

.textarea-content {
  overflow-y: auto;
  white-space: pre-wrap;
  color: #fff;
}
/* 
width: 400px;
height: 200px; 
*/

//TS File Code
  generatePDF() {
    let myPdf = document.getElementById('main-container');
    html2canvas(myPdf)
      .then((myPdfCanvas) => {
        var doc = new jsPDF('p', 'mm', 'a4');
        var myPdfImage = myPdfCanvas.toDataURL('image/png');
        doc.addImage(myPdfImage, 'PNG', 10, 10, 100, 50);
        return doc;
      })
      .then((doc) => doc.save('postres.pdf'));
  }

Can anyone guide me on how to show multiple lines when I capture the image with Canvas?

[fyyyyy]

Tried with all versions, it wont work Use div contenteditable instead of a textarea: https://stackoverflow.com/a/54566101

[fyyyyy]

https://jsfiddle.net/dkwnfh6v/