[Javascript]Canvasの画像重ね合わせとglobalCompositeOperationプロパティ

このサイトがすごく参考になったのでメモ
http://honttoni.blog74.fc2.com/blog-entry-193.html

globalCompositeOperationプロパティ

今回使用したのはdestination-atop。

1. 表示したい画像を書き込む
2. globalCompositeOperationを設定する
3. 重ねる画像を書き込む

結果：重ねる画像の透過になっていない部分を象って表示したい画像が表示される。

簡単に書くとこんな感じ。

var imageWidth:number = 画像の幅;
var imageHeight:number = 画像の高さ;
var img = new Image();
$(img).off("load").on("load", (event:Event)=>{
    var mask = new Image();
    $(mask).off("load").on("load", (event:Event)=>{
        var ctag: HTMLCanvasElement = <HTMLCanvasElement>document.createElement('canvas');
        var ctx = ctag.getContext("2d");
        ctx.clearRect(0, 0, imageWidth, imageHeight);
        ctx.drawImage(img, 0, 0, imageWidth, imageHeight);
        ctx.globalCompositeOperation = "destination-atop";
        ctx.drawImage(mask, 0, 0, imageWidth, imageHeight);
        ctx.restore();
    });
    mask.src = "重ねる画像のurl";
});
img.src = "表示したい画像のurl";