使用 source-in 剪輯影象內部的影象

context.globalCompositeOperation = "source-in";

source-in 合成剪輯現有形狀內的新圖紙。

注意:新圖形的任何超出現有圖形的部分都將被刪除。

context.drawImage(oval,0,0);
context.globalCompositeOperation='source-in';  // picture clipped inside oval
context.drawImage(picture,0,0);

StackOverflow 文件