I want to use toDataURL to download specific div image

 <div class="webtoonImage">
    </div> <!--side display webtoon-->

But because my div have filter drop-shadow as an outline border. So that why the toDataURL didn't capture it.

.container {
  display: grid;
  filter: drop-shadow(1px 0px 0px black) 
    drop-shadow(-1px 0px 0px black)
    drop-shadow(0px 1px 0px black) 
    drop-shadow(0px -1px 0px black)
    drop-shadow(1px 1px 0px black);
}

I was wonder is it possible to save the image with the drop-shadow outline border?

Here is the video link of the problems: video link demonstate problem

Explain problme in image form: When I click download button:

This is how the image div is downloaded

There is no border outline , the dataURL didn't capture the drop-shadow outline border

The drop-shadow is at the .container class

This is when I turn off the drop-shadow

Here is the toDataURL function to donwload the .div .webtoonImage:

function downloadWebtoonDesktop() {
    html2canvas(document.querySelector(".webtoonImage")).then(function(canvas) {
        // document.body.appendChild(canvas);
        console.log("hello")
        var dataURL = canvas.toDataURL("image/png");
        let downloadLink = document.createElement('a');
      downloadLink.setAttribute('download', 'DiamondWebtoonLayout-Episode-.png');
      let url = dataURL.replace(/^data:image\/png/,'data:application/octet-stream');
      downloadLink.setAttribute('href', url);
      downloadLink.click();
        // document.querySelector("#theimage9").src = theimage9; 
    });
}

[UNSOLVED] codepen link