Comment faire une telle forme dans un canevas HTML5?

Question

Je me demande comment vous allez créer une forme similaire à celle ci-dessous dans HTML5 Canvas. C'est plus ou moins un cercle recadré je suppose, même si mon besoin le rendrait une synchro différente.

http://img826.imageshack.us/img826/5198/98359410.jpg

context.fillStyle = "#000"; 
context.beginPath(); 
context.arc(200,200,100,0,Math.PI*2,true); 
context.closePath(); 
context.fill(); 

maintenant pour recadrer l'booger, je suis perplexe. Quelqu'un pourrait-il me prêter un coup de main? Merci!

Answer 1

context.globalCompositeOperation = 'destination-in'; 

context.fillRect(200, 220, 200, 100); //Or something similar 

destination-in moyens, par MDC: La teneur en toile existante est conservée à la fois où le nouveau chevauchement de contenu en toile forme et existante. Tout le reste est rendu transparent.

Ou conversly

context.fillRect(200, 220, 200, 100); 

context.globalCompositeOperation = 'source-in'; 

//Draw arc... 

source-in signifie: La nouvelle forme est dessinée seulement lorsque les deux la nouvelle forme et le recouvrement de la toile de destination. Tout le reste est rendu transparent

Ces deux méthodes vont finir par perturber tout autre contenu déjà attirée sur toile, si cela est un problème, utilisez clip

context.save(); 
context.beginPath(); 

//Draw rectangular path 
context.moveTo(200, 220); 
context.lineTo(400, 220); 
context.lineTo(400, 320); 
context.lineTo(200, 320); 
context.lineTo(200, 220); 

//Use current path as clipping region 
context.clip(); 

//Draw arc... 

//Restore original clipping region, likely the full canvas area 
context.restore()