Html2canvas игнорирует -webkit-mask-image

Я делаю веб-редактор звездных карт, и для придания формы карты я использую это свойство СSS -webkit-mask-image. После этого мне нужно карту сохранить как картинку (png или jpeg пока не важно). Для этого я использую html2canvas. Но вот проблема, при сохранении картинки -webkit-mask-image не применяется (т.к. он не поддерживается этой библиотекой) и я получаю просто черный квадрат. Кто знает как можно решить эту проблему? В моем случае для меня главное сохранить HTML код картинкой и чтобы все элементы отображались как нужно.

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">Ваша фраза</div>
    <div spellcheck="false" class="text_map disable_selection" id="place_text">Ваше место</div>
    <div class="hidden" id="frame"></div>
</div>

Ответы (0 шт):