スタートページ＞ Javascript＞ CANVAS

globalCompositeOperation　画像の重なり

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