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

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

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

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.

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

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

I solved all possible problems as follows..

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