Clip images inside shapes with "source-in"
suggest changecontext.globalCompositeOperation = "source-in";
source-in
compositing clips new drawings inside an existing shape.
Note: Any part of the new drawing that falls outside the existing drawing is erased.
context.drawImage(oval,0,0);
context.globalCompositeOperation='source-in'; // picture clipped inside oval
context.drawImage(picture,0,0);
![](/essential/htmlcanvas/img/b5114656a1a6649539d66b5bf6443c169bb005b9.png)
Found a mistake? Have a question or improvement idea?
Let me know.
Table Of Contents