Borrar imagenes canvas

[refielt]

hola, espero que alguien tenga solucion a este problema,
tengo un lineso canvas donde por defecto pinto un mapa y luego adiciono le adiciono iconos, hasta ahi todo bien pero luego como hago para desactivar o borrar los iconos sin tener que borrar todo el mapa (tengamos en cuenta que todo se dibujar un mismo lienso canvas).

hay una forma para trabajar mediante capas o algo por el estilo en canvas?

ojo: no me vale borrar todo el mapa y pintarlo nuevamente, gracias.

[chwc]

esa misma pregunta tengo yo tambien. como se puede guardar en una variable una imagen y luego aplicarla ??

[ryugen]

El concepto de capas o objetos dentro de un canvas no existe.

Entonces, si redibujar todo el fondo no es una opcion. Me inclinaria por crear dos canvas, uno con el fondo y otro con los objetos delantes de el. Uno sobre el otro.

Prepare este ejemplo para que vean el concepto. http://jsfiddle.net/VBfty/

En el pueden ver un fondo invariable de color rojo, que no se redibuja. Y un cuadrado gris, que se va redibujando cada 1 segundo.

[Panino5001]

Bueno, no sé muy bien a qué llamamos redibujado. Fijate si esto te sirve aunque sea de mal ejemplo
http://jsfiddle.net/panino/by3NG/1/

[refielt]

ryugen, gracias pero si creo otro canvas sobre el canvas del mapa, blokeare los eventos de este, ejemplo: arrastre, zoom, consulta, etc.

Panino5001, se ve interesante tu ejemplo, pero tengo que verificar si borra tambien parte del fondo (que seria otra imagen), la idea es que no lo haga.

[ryugen]

Iniciado por refielt

ryugen, gracias pero si creo otro canvas sobre el canvas del mapa, blokeare los eventos de este, ejemplo: arrastre, zoom, consulta, etc.

Panino5001, se ve interesante tu ejemplo, pero tengo que verificar si borra tambien parte del fondo (que seria otra imagen), la idea es que no lo haga.

El ejemplo de Panino no borra el fondo, porque sobre cada acción guarda un snapshot de todo el lienzo del canvas, entonces al momento de deshacer no es que borra la imagen que se insertó sino que vuelve al estado anterior del canvas.

En cuanto a mi ejemplo puedes bindear los eventos sobre el foreground y si alguno de ellos tiene impacto en el fondo, simplemente los modificas con los datos del evento de foreground.

Sobre el ejemplo de Panino (del cual no se me habia ocurrido así) habría que chequear el rendimiento de guardar tantas instantaneas del lienzo cuando este esté cambiando muchas veces en el tiempo, o hasta cuando mantener el historial.
Sin embargo, es un concepto que abre todo otro abanico de posibilidades para investigar

[Panino5001]

En realidad no la borraría. Verás, lo que hace el ejemplo es tomar una "fotografía" del canvas cada vez que hay un cambio de estado para poder, con esa fotografía, volver al estado anterior. Cuando hablo de fotografía en realidad a lo que me refiero es a guardar, con el método toDataURL, el estado actual del canvas como imagen
Edito: me ganó ryugen y encima lo explicó meor

[refielt]

buena idea la de guardar una captura, pero ahora el problema es que el metodo toDataURL no me reconoce en ie8 (estoy haciendo un proyecto conpatible con canvas tambien para ie8)

[Panino5001]

Esta es otra manera de hacer lo mismo, sólo que tampoco funcionará en explorer 8:

Código PHP:

  <script type="text/javascript">
var c,ctx,cero,uno,dos,historial=[];
function _(x){return document.getElementById(x);}
function inicio(){
    c=document.getElementById('c');
    ctx=c.getContext('2d');
    ctx.fillStyle ="#F00";
    ctx.fillRect(0,0,300,300);
    
    cero=ctx.getImageData(0, 0, 300, 300);
    historial.push(cero);
}
function addSmile1(){
    ctx.drawImage(_('im1'),5,10);
    
    uno=ctx.getImageData(0, 0, 300, 300);
    historial.push(uno);
}
function addSmile2(){
    ctx.drawImage(_('im2'),100,100);
    
    dos=ctx.getImageData(0, 0, 300, 300);;
    historial.push(dos);
}
function revert(){
    historial.pop();
    if(historial.length){
        
        ctx.putImageData(historial.pop(), 0, 0);
        
    }else{
        inicio();
    }
}
onload=inicio;
</script> 
  

Para explorer 8 hay que seguir pensando...

[Panino5001]

Con http://code.google.com/p/flashcanvas/ parece funcionar en Explorer <9 la primera opción ;)