I'm coding a sort of UI-displayer for a game, and I want the UI to be downloaded when clicked on a button, i'm using html2canvas for that. The problem is, it shows some big offsets on the image when it gets downloaded.

Result:

Expected: (without the background, it doesn't matter).

Here is my code:

function DOWNLOAD() {
    var container = document.getElementById("DrawBox");; /* full page */
    window.scrollTo(0, 0);

    html2canvas(container, {
        allowTaint: true,
    }).then(function(canvas) {

        var link = document.createElement("a");
        document.body.appendChild(link);
        link.download = "html_image.jpg";
        link.href = canvas.toDataURL();
        console.log(container)
        link.target = '_blank';
        link.click();
    });
}

CSS drawbox code (it's a div in my code);

.drawBox {
    position: absolute;
    box - sizing: content - box;
    width: 100 % ;
    height: 500 px;
    margin - top: 20 px;
    width: 800 px;
    box - shadow: 0 0 6 px hsl(200 deg 100 % 80 % );
    margin - left: 200 px;
    text - shadow: 0 0 7 px hsl(200 deg 100 % 80 % );
    background - color: rgb(25, 63, 83, 0.1);
    opacity: 1;
    transition: 1 s;
}

All the created divs are placed in drawBox. Thanks in advance!