Comment effacer une région de forme polygonale dans un élément canvas ?

Question

J'ai utilisé la fonction clearRect, mais je n'ai pas trouvé l'équivalent pour les polygones. J'ai naïvement essayé :

ctx.fillStyle = 'transparent';
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100,50);
ctx.lineTo(50, 100);
ctx.lineTo(0, 90);
ctx.closePath();
ctx.fill();

Mais cela ne fait que dessiner une région transparente et n'a aucun effet sur ce qui est déjà présent. Existe-t-il un moyen de nettoyer les régions des polygones à l'intérieur de l'élément canvas ?

Answer 1

Vous pouvez utiliser la composition avec l'opération définie à 'destination-out' pour cela :

ctx.globalCompositeOperation = 'destination-out';
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100,50);
ctx.lineTo(50, 100);
ctx.lineTo(0, 90);
ctx.closePath();
ctx.fill();

Exemple:

Essayez-le sur jsFiddle