Textarea screenshot using Html2Canvas

Question

I am using html2canvas library to take screenshots. This is my example.

It takes a sreenshot of the textarea when click the to image button.

Currently it is ignoring the scroller text and only taking the screenshot which is visible on the textarea. I want to take the screenshot of whole textarea text.

window.takeScreenShot = function() {
  html2canvas(document.getElementById("target"), {
    onrendered: function(canvas) {
      document.body.appendChild(canvas);
    },
    width: 320,
    height: 220
  });
}

Can anyone help me to solve this issue? Help would be really appreciated.

Thanks

Answer 1

Before you take the screenshot, set the textarea height to include everything. Then reset the height after (demo):

window.takeScreenShot = function() {
  var textarea = document.getElementById("target");
  textarea.style.height = textarea.scrollHeight + "px";
  html2canvas(textarea, {
    onrendered: function(canvas) {
      document.body.appendChild(canvas);
      textarea.style.height = "";
    },
    width: 320,
    height: textarea.offsetHeight
  });
}