On render in Html2Canvas, the page is scrolled to the top

Question

I am using the html2canvas library, using the following code:

html2canvas(document.body, {
   onrendered: function(canvas) {
      document.body.appendChild(canvas);
   }
});

When onrendered is fired, the page is automatically scrolled to the top. Is there anyway we can maintain our scroll position and not be automatically taken to the top of the page?

Answer 1

I took a look into the html2canvas.js and saw the following line:

_html2canvas.Parse = function (images, options) {
    window.scroll(0,0);

After commenting window.scroll(0,0) out, it worked fine for me on my local testing. Seems like that behaviour was intended by the author.

Of course you could also save your current scroll position into a variable when firing the code. The way you may do it depends on how you execute html2canvas. If it's a button like on the demo page, you would add an event listener to that button:

var scrollPos;
document.querySelector("screenshotButton").addEventListener("click",function() {
    scrollPos = document.body.scrollTop;
    html2canvas(document.body, {
       onrendered: function(canvas) {
          document.body.appendChild(canvas);
          window.scrollTo(0,scrollPos);
       }
    });
 });

Answer 2

You should be able to adjust the scrollY position, relative to the current pageYOffset, try this

html2canvas(document.body, { scrollY: (window.pageYOffset * -1) })