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 => {
$("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?
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:
window.scrollTo(0,0);
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
*{
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.
try this css
*{
padding:0;
margin:0;
}
