SOURCE

    var cc=document.getElementById("c");
    var cxt=cc.getContext("2d");

    let img1= 'https://cdns.jsrun.top/res/gouzi/tu3.jpg'
    let img2= 'https://cdns.jsrun.top/res/gouzi/mask2.png'

    
    //destination-out destination-in source-out source-in
    cxt.globalCompositeOperation = 'source-out'
    loadImg(img2).then(img=>{
        cxt.drawImage(img,0,0);

       
    }).then(res=>{
       return loadImg(img1).then(img=>{
            cxt.drawImage(img,0,0);
        })
    }).then(res=>{

    })


  

    function loadImg(src){
        return new Promise(resolve=>{
            var img=new Image();
	        img.src=src;
            img.onload=function(){
                resolve(img)
            }
        })
    }

<canvas id="c" width="500" height="500"></canvas>