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?

Sulphonate

Hello, I am facing the same issue. Did any solution work? – Handicap

@BhumiSukhadiya Tried everything, but still facing it.. – Pandean

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

Lias

This option given by @Fazlur-rahman is option in html2canvas like below, html2canvas(data, { allowTaint: true , scrollX:0, scrollY: -window.scrollY }).then(canvas => {}); – Fragmental

Thanks you save my day :) – Mintun

I ahve the same issue as OP, however the solution here caused my page to appear scrolled and the whitespace was then at the bottom of my pdf. Setting both scrolls to 0 i.e. html2canvas(content, {scrollX: 0,scrollY: 0}) solved it for me. – Corydalis

Well I had to use -window.scrollY as well. Thanks for the answer (whether it's your or from the thread). – Rood

For me, I had a 1px vertical line at the end of my canvas and it was fixed by setting the backgroundColor option to the same background color as the content. html2canvas(content, { backgroundColor: myContentColor }); – Almswoman

Awesome! This worked for me, though I'm not sure what caused the problem in the first place... It didn't used to happen and then one day suddenly became a problem... – Graffito

Answer 2

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

Tejeda

I also had the same issue as you, however I solved it by doing html2canvas(content, {scrollX: 0,scrollY: 0}), so the user wouldnt lose their place on the page. – Corydalis

Answer 3

Following code worked for me

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

Acculturate

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.

Meson

Answer 5

try this css

*{
     padding:0;
      margin:0;
}

Polytechnic