Limpiar contenido de un Canvas en HTML5

27/Ago/2012 HTML5 5 Comentarios
Ejemplos de Artículos sobre HTML5

En multiples ejemplos hemos visto como poner contenido sobre un CANVAS de HTML5. En este caso vamos a aprender como podemos limpiar el contenido del CANVAS. Es decir, eliminar cualquier dibujo o trazo que hayamos insertado en él.

Así que para empezar necesitamos tener un elemento CANVAS con contenido. Podemos volcar lo siguiente:

Crear el CANVAS:


Su navegador no soporta en elemento CANVAS

El insertarle contenido:

var canvas = document.getElementById("micanvas");
var ctx = canvas.getContext("2d");

for (var x=0; x<=300; x=x+10){
	ctx.moveTo(x,0);
	ctx.lineTo(x,300);
}

for (var y=0; y<=300; y=y+10){
	ctx.moveTo(0,y);
	ctx.lineTo(300,y);
}

ctx.strokeStyle = "#f212aa";
ctx.stroke();

Hemos creado un elemento CANVAS y hemos dibujado líneas sobre él. Además hemos añadido un botón, con id "limpiar", que será el encargado de limpiar el contenido de nuestro CANVAS.

Para proceder a la limpieza del CANVAS solo tenemos que recurrir a un "pequeño truco", el cual consiste en asignar un nuevo ancho al elemento CANVAS. Pero, ¿cuál será el nuevo ancho? Pues exactamente el mismo ancho que tiene en ese momento. Si bien, por el acto de asignar el nuevo ancho se limpiará el contenido del CANVAS.

El código quedará de la siguiente forma:

var limpiar = document.getElementById("limpiar");
limpiar.addEventListener("click",function(){
	canvas.width=canvas.width;
},false);

Lo que hemos hecho ha sido dar el mismo valor de la propiedad width del CANVAS. Y ya tenemos en blanco, de nuevo, nuestro CANVAS.

5 comentarios en “Limpiar contenido de un Canvas en HTML5”

Víctor Cuervo

Juan Mogollón

juto lo que necesitaba

Víctor Cuervo

Víctor Cuervo

Nos alegra mucho oir eso. :-D :-D :-D

Víctor Cuervo

kazi

Buenas tardes y para eliminar solo una linea de canvas como lo harias…

Víctor Cuervo

neil

el método limpia todo UN CANVAS entero, pero puedes hacer una jugada, lo cual es separar cada cosa en un canvas diferente (puedes tener varios canvas uno encima de otro y transparante), asi cuando borres el contenido de un canvas especiífico, se borrará todo, pero para el usuarió parecerá q sólo se borró una cosa.

Víctor Cuervo

RiCarter

Muy bueno. Sencillo y efectivo 100%.

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*