Html2canvas map container overlaps other elements

Question

Using html2canvas i'm downloading whole document.body as an image. Main problem is Leaflet map. When downloaded map container is bigger then it's displayed on browser, and overlaps other elements.

How page looks:

And how it look after download:

The code is simple html2canvas implementation:

html2canvas(document.body, {
            allowTaint: false,
            useCORS: true,
        }).then(function(canvas) {                

            Canvas2Image.saveAsJPEG(canvas);
        });

Answer 1

The solution was to setup foreignObjectRendering: true which allow to use ForeignObject rendering if the browser supports it. By default it was setup as false.

html2canvas(document.body, {
        allowTaint: false,
        useCORS: true,
        foreignObjectRendering: true
    }).then(function(canvas) {                

        Canvas2Image.saveAsJPEG(canvas);
    });