why there is a White space on the top on html2canvas?

Question

There is a white space on my html2canvas and I am not sure what is going on. This is my code so far.

function doFunction() {

  html2canvas(document.querySelector("#capture"), ).then(canvas => {
    $("body").append(canvas);
  });
}

$("button").click(function() {
  doFunction();
});

div {
  box-sizing: border-box;
  font-family: 'ABeeZee', sans-serif;
}

body {
  background-color: red;
}

#capture {
  width: 900px;
  height: 900px;
  background-color: aqua;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<div id="capture">
  Hello
</div>
<button type="button">Click Me!</button>

This is the appended canvas. Notice there is a white space on the top. How can I remove it?

Answer 1

GitHub Issue

You should check the document scroll, i face the same issue when page scroll is active or when page is scrolled down.

Try adding

{
    scrollX: 0,
    scrollY: -window.scrollY
}

to the html2canvas options

Answer 2

Following code worked for me

html2canvas(element , {
    scrollX: -window.scrollX,
    scrollY: -window.scrollY,
    windowWidth: document.documentElement.offsetWidth,
    windowHeight: document.documentElement.offsetHeight
})

Answer 3

I had a similar issue and through some trials I realised that by scrolling to the top of the page before generating the pdf solved it.

So I added this line to scroll to the top of the page before generating the pdf and it worked:

window.scrollTo(0,0);

Answer 4

try adding this to your style css

*{
    margin:0;
    padding:0;
}

Also try to clear your browser cache, this would be the problem in most cases. If that doesn't work try to remove all your css styles and add them back one by one to see when and how it is being caused.