Clearing ctx.fillStyle nach einem gefüllten Rechteck

Question

Clearing ctx.fillStyle Zeichnung nach einem gefüllten Rechteck zeichnet nicht funktioniert ...

Ich habe versucht:

• ctx.globalCompositeOperation = 'destination-out';
• ctx.clearRect(0, 0, canvas.width, canvas.height); des Clearing Leinwand selbst
• ctx.fillStyle = "rgba(255, 255, 255, 1)"; es weiß
• ctx.fillStyle = null; Vielleicht funktioniert es nulling Einstellung ...

Aber ich habe kein anderes Ergebnis als das Zurückziehen des vorherigen Werts und nicht des neuen Wertes.

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

Answer 1

Verwenden ctx.fillRect() stattdessen sehen aktualisiert Geige: https://jsfiddle.net/q9ub0r9z/2/

Answer 2

Sie verwenden .fillRect Funktion anstelle von .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); 
}