-webkit-mask-image is not working html2canvas render

I am trying to do template poster editor. I would like to add a image to my canvas while masking it. It works well, i can mask every photo that i want but when i try to render it, added image is rendered without any mask-image. How can i fix it?

This is my canvas

enter image description here

This is the result
enter image description here

Code:

function capture() {
         $('#target').html2canvas({
            onrendered: function (canvas) {


               var a = document.createElement('a');
               a.href = canvas.toDataURL("image/jpeg", 1.0);
               name = document.getElementById("konukAdi").value
               name = name.replace(/s/g, '')

               extname = document.getElementById("boyut-secimi").value
               a.download = name + extname + '.jpg';

               a.click();

            }
         });
      }
top: 16.12%;
    left: 55.9%;
    -webkit-mask-size: contain;
    -webkit-mask-image: url(/poster/images/masks/tercih.png)!important;
    z-index: 15;
    overflow: hidden;
    width: 620px;
    height: auto;
    position: absolute;
<img src="" id="id_1" class="konukImg" onclick="dragImage(this);" style="mask-image: url(/poster/images/masks/tercih.png) !important; top:16.12%;left:55.9%; -webkit-mask-size:contain;-webkit-mask-image: url(/poster/images/masks/tercih.png)!important; ;z-index : 15;overflow : hidden; width:620px;height:auto; position : absolute;">