Html2canvas: 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
})