html - globalCompositeOperation "destination-out" を使用した後、新しい形状を囲むアウトラインを取得するにはどうすればよいですか?

Question

青いアウトラインの円弧と、グローバル複合演算子「destination-out」を使用して円弧の一部を覆う円があり、その結果、円弧の一部が取り消されたり切り取られたりしますが、新しい形状の一部は失われませんアウトライン、形状のアウトラインを再確立する簡単な方法はありますか?

実際の例はここにあります: http://jsfiddle.net/NY2up/

var ctx = document.getElementById("display").getContext('2d');

ctx.beginPath();
ctx.arc(100, 100, 50, 0.0, 1.5, false);
ctx.lineTo(100, 100);
ctx.closePath();
ctx.fillStyle = 'red'
ctx.fill();
ctx.strokeStyle = 'blue';
ctx.lineWidth = 5;
ctx.stroke();

ctx.globalCompositeOperation = "destination-out";
ctx.beginPath();
ctx.arc(100, 100, 20, 0, Math.PI*2, true);
ctx.fill();
ctx.closePath();

</p>

Answer 1

ライブデモ

私がしたことは、効果を与えるためにglobalComposition背中をリセットsource-overし、スポット上で部分的な弧を描くことでした.

ctx.beginPath();
ctx.arc(100, 100, 50, 0.0, 1.5, false);
ctx.lineTo(100, 100);
ctx.closePath();
ctx.fillStyle = 'red'
ctx.fill();
ctx.strokeStyle = 'blue';
ctx.lineWidth = 5;
ctx.stroke();


ctx.globalCompositeOperation = "destination-out";
ctx.beginPath();
ctx.arc(100, 100, 20, 0, Math.PI*2, true);
ctx.fill();
ctx.closePath();

// reset the global comp and draw a partial arc with the proper radians.
ctx.globalCompositeOperation = "source-over";
ctx.beginPath();
ctx.arc(100, 100, 20, 1.61,-0.11, true);
ctx.stroke();
ctx.closePath();
​

Answer 2

3つ目の弧をキャンバスに描けると思います