Combined use of globalCompositeOperation and putImageData () in H5 canvas

get the target image from the background canvas through the getImageData () method, which is square. Now you want to make the square into a jigsaw puzzle

.
                //s r
                ctx_ceng.beginPath();
                ctx_ceng.moveTo(0, cY);
                ctx_ceng.lineTo(s/2-r,cY);
                ctx_ceng.arc(s/2,cY,25,Math.PI,2*Math.PI);
                ctx_ceng.lineTo(s,cY);
                ctx_ceng.lineTo(s,cY+150);
                ctx_ceng.lineTo(s,cY+150);
                ctx_ceng.arc(s/2,cY+s,25,2*Math.PI,Math.PI,true);
                ctx_ceng.lineTo(0,cY+150);
                ctx_ceng.closePath();
                ctx_ceng.stroke();
                ctx_ceng.fillStyle = "green";
                ctx_ceng.fill();
                //
                ctx_ceng.globalCompositeOperation="source-in";//
              
                ctx_ceng.beginPath();
                ctx_ceng.putImageData(imgData, 0,cY-r);//

what can I do to fill the captured image only in the green part? Ask the great god for advice ~

Mar.04,2021

solved, you should use ctx_ceng.globalCompositeOperation= "destination-in";

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1bdc293-3081f.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1bdc293-3081f.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?