title: HTML2Canvas does not render full div, only what is visible on screen?
body: <p>I'm trying to use <a href="https://github.com/niklasvh/html2canvas" rel="noreferrer">HTML2Canvas</a> to render the contents of a div. Here is the code: </p>
  
  <pre><code>var htmlSource = $('#potenzial-page')[0];
  
  $('#btn').on("click", function() {          
  
      html2canvas(htmlSource).then(function(canvas) {
          var img = canvas.toDataURL();
          window.open(img);
      });
  
  });
  </code></pre>
  
  <p>I'm using v5 beta 3. </p>
  
  <p>When this code runs, it only renders what is visible on the screen. The <code>#potenzial-page</code> div is essentially the entire page, minus the header and footer. All content in this div is visible by scrolling (there are some hidden elements, but I do not want the hidden elements visible in the image.) </p>
  
  <p>I cannot find what's wrong or why it won't save the entire div. I should also note that it appears the image is as tall as the div but only partially visible. </p>
  
  <p>To give an example of what I mean, here is a comparison:  </p>
  
  <p><a href="https://i.stack.imgur.com/FJ0rz.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/FJ0rz.jpg" alt="enter image description here"></a></p>
  
  <p>The left is how HTML2Canvas should render the div. The right shows how it renders when it runs the code above. The right image is what's visible in my browsers screen.</p>
  
  <p>I did try adding the <code>height</code> option but it doesn't make a difference.</p>
  
  <p><strong><em>UPDATE</em></strong></p>
  
  <p>If I scroll to the very top of the page <em>then</em> run the script it will render the entire div as it should. </p>
  
  <p>How do I render the div without having to scroll to the top?</p>