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(); 

Answer 1

내가 캔버스

Answer 2

live Demo

0,123,516에 세 번째 호를 그릴 수 있다고 생각

내가 한 일은 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(); 
​