MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

CanvasRenderingContext2D.clearRect()

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

El método CanvasRenderingContext2D.clearRect() del API Canvas 2D convierte todos los pixeles en el rectangulo definido por el punto de inicio (x, y) y tamaño (width, height) a negro transparente, borrando cualquier contenido dibujado anteriormente.
 

Syntaxis

HTML Content

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

Parametros

x
El eje  de la coordenada para el punto de inicio del rectangulo.
y
El eje  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>

JavaScript

var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); c

tx.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); 

// clear the whole canvas 
// ctx.clearRect(0, 0, canvas.width, canvas.height);

  

Edite el código de abajo y vea sus cambios actualizados en vivo en el canvas:

Especificaciones

Especificación Estado Comentario
WHATWG HTML Living Standard
The definition of 'CanvasRenderingContext2D.clearRect' in that specification.
Living Standard  
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);

Compatibilidad con exploradores

Caracteristica Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Soporte Básico (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)
Caracteristica Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte Basico (Yes) (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)

Vea También

Etiquetas y colaboradores del documento

 Colaboradores en esta página: andrpueb
 Última actualización por: andrpueb,