Textarea screenshot using Html2Canvas

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

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
  });
}