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?

Hello, I am facing the same issue. Did any solution work? – Bhumi Sukhadiya Oct 08 '19 at 06:52 — Bhumi Sukhadiya, Oct 08 '19 at 06:52
@BhumiSukhadiya Tried everything, but still facing it.. – Kubadev Nov 25 '20 at 09:17 — Kubadev, Nov 25 '20 at 09:17

score 27 · Accepted Answer · answered Dec 31 '19 at 04:37

27

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

answered Dec 31 '19 at 04:37

Fazlur Rahman

386
6
7

4

This option given by @Fazlur-rahman is option in html2canvas like below, html2canvas(data, { allowTaint: true , scrollX:0, scrollY: -window.scrollY }).then(canvas => {}); – solairaja Jun 05 '20 at 17:07
1

Thanks you save my day :) – Dafy Jul 21 '20 at 09:13
1

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. – Clarkey Nov 05 '20 at 13:21
Well I had to use -window.scrollY as well. Thanks for the answer (whether it's your or from the thread). – Dror Bar Jan 19 '21 at 16:50
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 });` – Jay Feb 23 '21 at 11:52
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... – Chris Jun 26 '21 at 10:35

score 3 · Answer 2 · answered Oct 21 '20 at 08:13

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

answered Oct 21 '20 at 08:13

SamHeyman

207
3
13

1

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. – Clarkey Nov 05 '20 at 13:20

score 3 · Answer 3 · answered Feb 19 '21 at 07:53

3

Following code worked for me

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

answered Feb 19 '21 at 07:53

Kinjal Pathak

371
2
9

score 1 · Answer 4 · answered Sep 14 '19 at 15:41

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.

score 1 · Answer 5 · edited Oct 21 '20 at 11:22

1

try this css

*{
     padding:0;
      margin:0;
}

edited Oct 21 '20 at 11:22

gorokizu

2,538
2
20
26

answered Oct 21 '20 at 08:21

013_Hardik Bhanderi

11
1

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

5 Answers5

Linked