I am trying to download the entire contents of a div including the overflow using html2canvas, but the image is always cropped.

Here is a fiddle link with example code: https://jsfiddle.net/50x2gfne/1/

function grab() {
    const captureElement = document.querySelector('#capture')
    html2canvas(captureElement)
        .then(canvas => {
            canvas.style.display = 'none'
            document.body.appendChild(canvas)
            return canvas
        })
        .then(canvas => {
            const image = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream')
            const a = document.createElement('a')
            a.setAttribute('download', 'my-image.png')
            a.setAttribute('href', image)
            a.click()
            canvas.remove()
        })
        capture.style.oveflow = 'scroll'
}

I have tried changing the width of the html and body to a wider size, setting the viewport wider, and changing the width of the canvas function.

I also tried the method in the following link for handling horizontal overflow with no luck: https://blog.logrocket.com/export-react-components-as-images-html2canvas/