canvasでマスクをかける

デモ：http://mo49.tokyo/qiita/20160504/mask.html

パスでマスクをかける

マスクをかけたい画像の直前に clip()を書けば、
その部分だけにマスクをかけられる。
（枠にはマスクがかかっていない）

index.js

// パスでマスク
// 枠
ctx.drawImage(imgAry[0], 0, 0, canvas.width, canvas.height);

// 円
ctx.beginPath();
ctx.arc(150, 150, 100, 0, Math.PI * 2, false);
ctx.clip();

// 背景
ctx.drawImage(imgAry[1], 0, 0, canvas.width, canvas.height);

clip() メソッド

画像でマスクをかける

ctx.globalCompositeOperation = 'destination-in';を記述した直後の画像で合成する。
canvas全体に影響を与えるので、一部だけにマスクをかけたい場合は、
もう一枚canvasを用意する必要がある。

index.js

// 画像でマスク
ctx.drawImage(imgAry[1], 0, 0, canvas.width, canvas.height);
ctx.drawImage(imgAry[0], 0, 0, canvas.width, canvas.height);

ctx.globalCompositeOperation = 'destination-in';
ctx.drawImage(imgAry[2], 50, 50, 200, 200);

globalCompositeOperation プロパティ