HTML5 Limpar o Canvas

HTML5 Uso do clearRect() no Canvas2A função clearRect() do contexto D é usada para limpar o retângulo da tela. O retângulo limpo torna-se transparente.

Exemplo online

2A função clearRect() do contexto D é usada para limpar o retângulo da tela. O retângulo limpo torna-se transparente. Este é um exemplo de código:

<canvas id="ex1" width="500" height="150" style="border:　1px sólido #cccccc;">　　　　
HTML5　Canvas não suportado　　　　
</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>

Observe como é limpo o retângulo vermelho e azul.
Como mencionado anteriormente, a área limpa usando clearRect() torna-se transparente. Se o elemento canvas estiver colocado no topo de outro elemento, o conteúdo desse elemento será visível através da área limpa.

clearRect(x, y, width, height)

Assim como ao desenhar um retângulo, os parâmetros passados para4Os parâmetros do clearRect() representam o canto superior esquerdo do retângulo a ser limpo, bem como a largura e altura do retângulo a ser limpo.
Este é um exemplo mais claro:

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