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 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
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 |
---|---|---|
HTML Living Standard La definición de 'CanvasRenderingContext2D.clearRect' en esta especificación. |
Living Standard |
Compatibilidad con exploradores
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
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
- The interface defining it,
CanvasRenderingContext2D
CanvasRenderingContext2D.fillRect()
CanvasRenderingContext2D.strokeRect()