Le clip canevas HTML5 chevauche le clip précédent

Question

J'ai ce problème étrange où la configuration de plusieurs rectangles de clip en HTML5 provoque le saignement/le chevauchement du dessin dans les zones de clip précédentes, même si chacune est contenue dans un ctx.save() - ctx .restaurer().

Voici l'exemple de code:

var c=document.getElementById("myCanvas2"); 
var ctx=c.getContext("2d"); 

// 1st clip 
ctx.save(); 
ctx.rect(20,20,100,100); 
ctx.stroke(); 
ctx.clip(); 
// draw red rectangle after 1st clip() 
ctx.fillStyle="red"; 
ctx.fillRect(0,0,300,140); 
ctx.restore(); 

// 2nd clip 
ctx.save(); 
ctx.rect(140,20,100,100); 
ctx.stroke(); 
ctx.clip(); 
// draw blue rectangle after 2nd clip 
ctx.fillStyle="blue"; 
ctx.fillRect(0,0,300,140); 
ctx.restore(); 

Et jsFiddle: http://jsfiddle.net/4eXw9/1/

Y at-il un moyen d'arrêter un appel clip de saignement/chevauchement des clips précédents?

Answer 1

Il vous manque un beginPath() sur le deuxième clip:

// 2nd clip 
ctx.save(); 
ctx.beginPath() 
ctx.rect(140,20,100,100); 
ctx.stroke(); 
ctx.clip(); 

Modified fiddle

Ce qui se passe est que votre nouvelle rect est fusionnée avec la première depuis caressant/remplissage ne voit pas clairement le chemin - donc les deux sont caressés/remplis à nouveau. Pour effacer le chemin, vous devez l'effacer explicitement en utilisant beginPath(). Comme le chemin est également la base pour clip() ..