刮刮卡（圖片合成）

定義： globalCompositeOperation 屬性，設定或返回如何將源影象

將 myCanvas 的背景圖設定為一張圖片，（刮開後顯示）

// 目標影象（已有的，外面一層即將被刮掉的那一影象）

pen.beginPath();

pen.fillStyle = "red";

pen.fillRect(100, 300, 100, 100);

// pen.globalCompositeOperation = "source-over";    / / 預設值

// pen.globalCompositeOperation = "source-atop";    // 

// pen.globalCompositeOperation = "source-in";    // 

// pen.globalCompositeOperation = "source-out";    // 

// pen.globalCompositeOperation = "desination-over";    // 預設值，目標影象在上

// pen.globalCompositeOperation = "desination-atop";    // 源影象以外的 目標影象 是透明的

// pen.globalCompositeOperation = "desination-in";         // 只有源影象以內的目標影象顯示，其他部分影象是透明的

pen.globalCompositeOperation = "desination-out";       // 只有源影象以外的目標影象顯示，其他部分影象是透明的

// 源影象（刮刮卡必須設定透明色，才能看見 myCanvas 的背景圖）

pen.beginPath();

pen.fillStyle = "blue";

pen.fillRect(300, 300, 100, 100);