globalCompositeOperation は、キャンバスで前の画像(赤)と追加画像(青)に重なり合う領域があるとき、どの領域を表示するかの多様な方法を提供します。
● xycoordinate 環境では、下記の機能しか使えません。
ソースコードを示します。ア・イが表示方法を指定しています。
// 前の画像(赤)
drawRect(0,200, 150,50, "red", 1, "red");
// 画像合成形式の指定
ctx.globalCompositeOperation = "source-atop"; // ア
// 追加画像(青)
drawRect(50,150, 200,0, "black", 1, "blue");
// 標準に戻す
ctx.globalCompositeOperation = "source-over"; // イ