Extra white space on the left and lost part on the right

[DavidDiao]

Bug reports:

https://jsfiddle.net/8dwmbwke/

The width of extra and lost part seems always 8px
It happends when the picture height > browser height (document.body.clientHeight ?) and margin is 0 auto
And if picture width > browser width, it became normal again

(I'm not good at English, so there may be strange places in my expression)

Specifications:

• html2canvas version tested with: Newest version
• Browser & version: Chrome 63.0.3239.132 (32bit)
• Operating system: Windows 7 Ultimate

[niklasvh]

Thanks for the detailed info, without really debugging too much it sounds that it is an issue with scrollbars showing up / not showing up and changing the width of the document, offsetting centering. Will try and work out a fix for it asap

[des4hosting]

I am having the same issue and indeed it looks like it is related to scrollbars. In chrome I can hide the scrollbars using webkit and it works fine but not the case for other browsers.

My workaround is to hide scrollbars before rendering

I add the below class to the "html" element

.hide-scrollbar {
	overflow: -moz-hidden-unscrollable;
	overflow: hidden;
}

Then remove it after rendering

$("html").addClass("hide-scrollbar"); //hide scrollbar because it is showing left white padding
html2canvas($(".artwork")[0]).then(function(canvas) {
	var dataURL = canvas.toDataURL();
	$(".renderedimg img").attr("src",dataURL);
});
$("html").removeClass("hide-scrollbar");

[andersborgabiro]

Confirmed. In my case always 7px (Chrome for Windows). Padding adds to this.

As I don't use jQuery I did this instead:

                document.documentElement.classList.add("hide-scrollbar");
                document.documentElement.classList.remove("hide-scrollbar");

But a real solution would of course be preferred and appreciated.

Regarding options, this gave the best result (width previously set for the wrapping div):

                        {
                            logging: true,
                            allowTaint: false,
                            backgroundColor: "#ffffff",
                            scale: 1
                        }

If I didn't use "scale: 1" it became scaled up when using scaled text in Windows. Pretty much needed on a high-res laptop screen.

If interesting I can post my use case.

[WebBlockChainDev]

I use the newest version with the following settings and i still get the scroll bar padding problem, without scrollbar it works perfect, in a screen size with scrollbar it has a padding which cuts the img.

backgroundColor: null,
scrollX: 0,
scrollY: -window.scrollY,
scale: 1

[k-gintaras]

One of my solutions.
html2canvas(element, {
width: $(element).width(), //problem is that canvas is slightly larger than element, so you need to set it here
})

[ahmedfeyzi]

I solved all possible problems as follows..

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

[Muneem]

I have tried almost all solutions but still not working.

[okumo]

I am having the same issue right here

[saikun0293]

I solved all possible problems as follows..

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

windowHeight: element.scrollHeight worked for me

[newdragon88]

windowHeight: element.scrollHeight > not working...
Still no solution.. anyone can help me???

[thevinaysomawat]

windowWidth: document.documentElement.offsetWidth,

worked for me!

[ayagaidi]

I solved all possible problems as follows..

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

this fix my issue

[mohitWebcontxt]

after download image showing some white space from right and bottom

[drew-thorson]

@mohitWebcontxt this seems to have fixed that issue with the whitespace on the same edges for me on mobile devices.

html2canvas(element, {
  width: element.clientWidth,
  height: element.clientHeight,
})

after download image showing some white space from right and bottom