通常、Canvas を使用してあるシェイプを別のシェイプから切り取るには、globalCompositeOperation オプション「xor」を使用しました。
var c2 = document.getElementById('canvas').getContext('2d');
c2.globalCompositeOperation = "xor";
c2.fillRect(0, 0, 200, 200);
c2.fillRect(170, 0, 30, 30); // shape 2 is cut out from shape 1
ただし、fillStyle のアルファ値が 1 未満の場合、またはコンテキストの globalAlpha が 1 未満の場合、「切り取られた」形状は完全に見えなくなります。
具体的には、アルファが 0.5 より大きく 1 より小さい場合、より軽いバージョンの形状が表示されます。アルファが 0.5 の場合、カットアウトはまったく表示されません。alpha が <0.5 の場合、逆の結果が得られます: 切り抜かれるはずの形状は、実際には最初の形状よりも暗いです。
これはhttp://jsfiddle.net/N7aXY/2/で見ることができます。
アルファ値を変更して、さまざまな効果を確認できます。
背景形状のアルファが 1 未満の場合、形状を完全に切り取る方法はありますか?