How to save an HTML element with filters to an image

Question

So I'm making a web editor, and to shape objects I use this CSS property: -webkit-mask-image. After that, I need to save it as an image (png or jpeg doesn't matter yet). For this I am using html2canvas. But here's the problem, when saving the image, -webkit-mask-image is not applied (because it is not supported by this library) and I just get a black square. Who knows how to solve this problem? In my case, the main thing for me is to keep the HTML code as a picture and that all elements are displayed as needed. I asked a question in Russian Stack Overflow, but I never received an answer.

JS:

function downloadimage() {
    let container = $("starmap_photo");

    html2canvas(container, {allowTaint: false}).then(function (canvas) {
        let link = document.createElement("a");
        document.body.appendChild(link);
        link.download = "image.png";
        link.href = canvas.toDataURL();
        link.target = '_blank';
        link.click();
    })
}

HTML:

<div id="starmap_photo">
    <div id="map">
         <div class="starmap_element" id="starmap_stroke"></div>
         <div class="starmap_element" id="starmap"></div>
         <div class="starmap_element" id="starmap_background"></div>
         <div class="starmap_element" id="edging"></div>
    </div>
    <div spellcheck="false" class="text_map disable_selection" id="main_text">Your phrase</div>
    <div spellcheck="false" class="text_map disable_selection" id="place_text">Your place</div>
    <div class="hidden" id="frame"></div>
</div>

Maybe this can be done on the server side by passing the necessary data, I hope there is a solution