Plusieurs régions cliquables sur le canevas HTML5?

Question

Je suis en train de déconner avec toile HTML5 et écrêtage. Je me demande comment je peux obtenir que l'utilisateur clique sur la toile, l'a fait découper un cercle, et puis répète. Donc, essentiellement, l'utilisateur peut cliquer plusieurs fois et il y aura plusieurs clips.

J'ai essayé quelques solutions qui étaient légèrement similaires à ce que je veux mais ça ne marche pas.

Voici le code de découpage:

context.save(); 

context.beginPath(); 
context.arc(mouseX,mouseY,50,50,Math.PI*2,true); 
context.globalCompositeOperation = 'destination-out'; 
context.clip(); 
context.closePath(); 
var img = new Image(); 
img.src = canvasSnowflake.toDataURL(); 

context.drawImage(canvasSnowflake, 0, 0); 

context.restore(); 

vous pouvez voir la chose entière en action ici: http://jsfiddle.net/cnbishop/8FzuB/. maintenant vous pouvez cliquer une fois et le clip fonctionne, mais vous pouvez obtenir un nouveau clip si vous cliquez à nouveau sur le canevas. Est-ce seulement possible?

Answer 1

Chaque fois que les clips de l'utilisateur, vous devrez enregistrer cette action en quelque sorte dans JS. La prochaine fois que l'utilisateur clique, vous récupérez l'écrêtage précédent, l'appliquez puis appliquez la nouvelle action de découpe.

Fondamentalement, vous devez réappliquer toutes les actions de découpage dans l'historique dans le même ordre que celui où elles ont été exécutées car Canvas ne peut pas "se souvenir" de son rendu précédent.

Ai-je bien interprété votre question?