Strange vertical offset after several renders

[pcla56]

I am using V1 rc 5, on ubuntu 16.04, and firefox 76.0.1 (64-bit).
I can successfully render my canvas, post the base64 string to my server, and then retrieve it for another page and it all works fine. My first attached screenshot shows the successfully created canvas.

However, after several (random) attempts the canvas slips down the page and gets truncated. Its as if something is remaining on the previous canvas? My next screenshot shows the effect:

I have spent days on this, trying to work out whether there are any js side effects, or modal creation problems and have run out of ideas!
I watch the console logging and without fail it "renders ok" (ie no errors. I can also see that the code correctly identifies differing heights and widths correctly.
I have also verified this behaviour on Chrome.
Please can someone have a look at this and possibly save my sanity?
Thx Paul
paul@vicjen.co.uk

[pcla56]

Dear Team - is there any chance someone can have a look at this?
Its such an elegant solution but I need it to be reliable please? Could it be something else happening in the browser that it causing the vertical shift?

[pcla56]

OK - clearly no-ones priority!
I have tried "removeContainer: true", but that didn't make any difference. The other thing I tried was defining my own canvas (so I could clean up the DOM) and make sure the next invocation was as clean as possible. But that didn't work either. The instructions are a little terse (or perhaps its just me) - when I specify my own canvas do I simply create an object or do I have to prepare it in some way (context?). Perhaps a few more pointers might help me to resolve. OR can you suggest a different tool I could use to create a canvas for my purposes? I dont think the native browser "scrrenshot" functions can be used from js? Well I'm no expert anyway .....

Helllllloooooooooooo.............

[saucylegs]

Happens to me as well

[Anubiso]

Can confirm,
happens in a cordova project, sometimes result is correct, sometimes there is a vertical offset.

[promotion-xu]

reset your scroll to the origin ,maybe could do this

[groenroos]

I had the same issue; resetting the scroll with window.scrollTo(0, 0) and/or temporarily setting the canvas to position: fixed before capture fixed this for me.

[pcla56]

Hi groenroos, I have tried the scrollTo option and its still not quite right. Could you explain a bit further about how you set the canvas to fixed please? There doesn't appear to be an option for that and I have tried creating my own canvas without success. I am so close and would be delighted to get this sorted!
Cheers

[groenroos]

@pcla56 Sure - it's quite simple. My code is something like so (where #stage is the container I want to turn into the canvas):

let stage = document.getElementById("stage");
stage.style.position = 'fixed';

setTimeout(function(){
	html2canvas(stage).then(function(canvas) {
		// ...

		canvas.toBlob(function(blob){
			// ...

			stage.style.position = 'static';
		});
	});
}, 1);

Essentially, I'm setting position: fixed in plain JS just prior to calling the plugin. I noticed I needed the 1ms timeout to wait for the browser to redraw before calling it.

Once I'm done with the canvas (converted to a file etc), I set the position back to static (or whatever it was before).

The side effect is of course that by setting the position to fixed, the page will reflow and elements might move around, but I found this to be a totally acceptable caveat in my use case.

Good luck!

[jeffy5]

@groenroos It works! Thank you very much. By the way, in some cases it is necessary to set stage.style.left = 0 and stage.style.top = 0.

[ahmedfeyzi]

I solved all possible problems as follows..

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

[Gigamick]

I solved all possible problems as follows..

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

Thank you X 100000

[pcla56]

Hi Team, I have been playing with this for a long time and almost have it working. The vertical offset is no longer a problem, and I finally fixed the canvas being truncated by inserting a 1s delay after rendering my bootstrap modal, before oding the html2canvas operation. My guess is the browser has to update the DOM completely to ensure it can try to render the canvas successfully. However, my last issue (and my initial post actually shows the problem) is that a jdenticon object (which we use for gender/ethnic neutrality) is getting distorted by html2canvas. I have tried both a svg and canvas construction for the graphic, and both seem to suffer the same result. I can live with it but would dearly like to get a better copy on my canvas. So the following images hopefully show the problem:
First the correctly rendered image

and then the squashed version

If anyone has any suggestions I would love to hear them please?
Thx Paul