title: I want to take a screenshot of a div using Html2canvas
body: <p>I am using the Html2canvas in order to take a screenshot of a div and display it in a new window. Here is my javascript function </p>
  
  <pre><code>function capture() {
  html2canvas(document.getElementById('screenshot'), {
  onrendered: function(canvas) {
  var img = canvas.toDataURL("image/png");    
  window.open(img);
  }}
  );
  }
  </code></pre>
  
  <p>The problem with this code is that it captures only half of the div as the following image shows: 
  <a href="https://i.stack.imgur.com/ZVHgi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZVHgi.png" alt="Form"></a></p>
  
  <p>I changed the ID of the element to be captured to 'table' so that I can screenshot the table only. But it seems like the screenshot takes only half of the targeted div (in terms of height).
  <a href="https://i.stack.imgur.com/2XbNm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2XbNm.png" alt="Table Only"></a></p>
  
  <p>Now when I select the whole body:</p>
  
  <pre><code>function capture() {
  html2canvas(document.body, {
  onrendered: function(canvas) {
  var img = canvas.toDataURL();
  window.open(img);
  }
  });
  </code></pre>
  
  <p>the result is as follows:
  <a href="https://i.stack.imgur.com/8g8wx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8g8wx.png" alt="Body"></a></p>