Pulizia del Canva Canvas HTML5

Utilizzo di clearRect() in HTML5 Canvas, la funzione 2D del contesto clearRect() serve per cancellare un rettangolo sul canvas. Il rettangolo cancellato diventa trasparente.

Esempio online

La funzione 2D del contesto clearRect() serve per cancellare un rettangolo sul canvas. Il rettangolo cancellato diventa trasparente. Ecco un esempio di codice:

<canvas id="ex1" width="500" height="150" style="border: 1px solid #cccccc;">　　　　
HTML5 Canvas non supportato　　　　
</canvas>　　　　
<script>　　　　
var canvas = document.getElementById("ex1");　　　　
var context = canvas.getContext("2d");　　　　
context.fillStyle = "#ff0000";　　　　
context.fillRect(10, 10, 100, 100);　　　　
context.strokeStyle = "#0000ff";　　　　
context.strokeRect(30, 20, 120, 110);　　　　
context.clearRect(50, 30, 110, 35);　　　　　　　　　
</script>

Notare ora come vengono cancellati i rettangoli rossi e blu.
Come descritto in precedenza, l'area cancellata diventa trasparente. Se l'elemento canvas è posizionato sopra un altro elemento, il contenuto di quell'elemento sarà visibile attraverso l'area cancellata.

clearRect(x, y, width, height)

Come nel disegno del rettangolo, i 4 parametri passati a clearRect() rappresentano l'angolo in alto a sinistra del rettangolo da cancellare, nonché la larghezza e l'altezza del rettangolo da cancellare.
Questo è un esempio più chiaro:

var x = 50;
var y = 30;
var width = 110;
var height = 25;
context.clearRect(x, y, width, height);