Html2canvas why doesn't text in textarea wrap to a new line?

Question

css

It is necessary to make it possible to save the block as a picture, a kind of generator of a completed document for printing is planned.
I started looking for simple options - I came across "Html2canvas". Fits perfectly, but there was a problem.
Now on the test (locally) page there are only textarea and a button, no styles except for the background are registered.
In the screenshot above, the textarea, then the button and the canvas itself with the result.



Page code:

<div id="box"><textarea></textarea></div>
<button id="btnSave">btnSave</button>
<div id="img-out"></div>

Button click processing code:

$("#btnSave").click(function() { 
        html2canvas(
          $("#box")[0], 
          {
            allowTaint: true,
            backgroundColor: null
          }
        ).then(function(canvas) {
          $("#img-out").append(canvas);
        });
      });

I know about the property foreignObjectRendering: true - everything is ok with it, but the background elements of various blocks disappear (now, for example, I removed everything superfluous, but it is assumed that there are "decorative" elements in the form of frames and seals)

On https://html2canvas.hertzen.com/ at the bottom right there is a demonstration of work, you can take a screenshot of the entire page and see the result. I tried to add textarea to the content (via F12) on https://html2canvas.hertzen.com/ and see the result - there are no such problems there.

And I don’t understand what I’m doing wrong, I tried to set different CSS properties for the textarea, for example overflow-wrap , but it didn’t work.

Answer 1

Had the same problem.
Try the previous version.
It renders the textarea correctly.
https://cdnjs.cloudflare.com/ajax/libs/html2canvas...