compensation ctx.fillStyle après avoir dessiné un rectangle rempli

Question

Clearing ctx.fillStyle après avoir dessiné un rectangle rempli ne fonctionne pas ...

J'ai essayé:

• ctx.globalCompositeOperation = 'destination-out';
• ctx.clearRect(0, 0, canvas.width, canvas.height); Effacement de la toile elle-même
• ctx.fillStyle = "rgba(255, 255, 255, 1)"; Réglage à blanc
• ctx.fillStyle = null; Peut-être il annulant travailler ...

Mais je n'ai obtenu aucun résultat autre que redessiner sa valeur précédente et pas la nouvelle.

jsFiddle: https://jsfiddle.net/q9ub0r9z/1/

Answer 1

Utilisez plutôt ctx.fillRect(), voir violon mise à jour: https://jsfiddle.net/q9ub0r9z/2/

Answer 2

Vous utilisez la fonction .fillRect au lieu de .rect

function showRed(){ 
    ctx.fillStyle = "rgba(255,0,0,1)"; 
    ctx.fillRect(0,0, 200, 200); 
} 
function showGreen(){ 
    ctx.fillStyle = "rgba(0,255,0,1)"; 
    ctx.fillRect(200,0, 200, 200); 

} 
function showBlue(){ 
    ctx.fillStyle = "rgba(0,0,255,1)"; 
    ctx.rect(200,200, 200, 200); 
} 
function showBlack(){ 
    ctx.fillStyle = "rgba(0,0,0,1)"; 
    ctx.rect(200,200, 400, 400); 
}