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 ~

Javascript canvas html5

Mar.04,2021

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

Previous: How can bootstrap-treeview uncheck the status when clicking on the same node?

Next: Webpack Packaging has been configured vue-loader package still reports an error You may need an appropriate loader. when packaged

Canvas draws a line chart of a smooth curve
write a line chart with native JS, right-angled ones can be written, but now you need to change into a smooth curve, similar to: the inflection point is still at a right angle, is there any god who can provide the next solution ...

Javascript canvas html5

Feb.26,2021