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

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 => {

$("button").click(function() {
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">
<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?

enter image description here

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

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:


Following code worked for me

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

try adding this to your style css


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.

try this css


The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .
Read More:   How to copy watched javascript variable in Chrome?

Similar Posts