CanvasRenderingContext2D.clearRect()

HTML Content

void ctx.clearRect(x, y, width, height);

Parametros

x

El eje x  de la coordenada para el punto de inicio del rectangulo.

y

El eje y  de la coordenada para el punto de inicio del rectangulo.

width

El ancho del rectangulo.

heigth

el alto del rectangulo.

Notas de uso

Un problema común con clearRect es que puede parecer que no funciona cuando no se usan las trayectorias de dibujo (paths) de forma adecuada. No olvide llamar beginPath() antes de comenzar a dibujar el nuevo cuadro después de llamar clearRect.

Ejemplos

Usando el método clearRect

  Este es un simple fragmento (snippet) de código que usa el método clearRect.

HTML

<canvas id="canvas"></canvas>

Playable code

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code" style="height:140px;">
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(200,20);
ctx.lineTo(120,120);
ctx.closePath(); // draws last line of the triangle
ctx.stroke();

ctx.clearRect(10, 10, 100, 100);</textarea>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);