trying to erase the images generated by the soltar in java script
<p>i have this situation.
i am trying to do a simple drag and drop game in canvas.
so the problem is that i can't errase the images or change the visibilty tp hidden after i finish the drop.</p>

<pre><code>function iniciar() {

    origen = document.querySelectorAll('#barra &gt; img');
    for(var i=0; i&lt;origen.length; i++) {
        origen[i].addEventListener('dragstart', arrastrar);
        origen[i].addEventListener('dragend', finalizado);
    }

    origenDos = document.getElementById("lienzo");
    for(var i=0; i&lt;origenDos.length; i++) {
        origenDos[i].addEventListener('dragstart', arrastrar);
        origenDos[i].addEventListener('dragend', finalizado);
    }

    destino = document.getElementById("lienzo");

    destino.addEventListener('dragenter', entrando);
    destino.addEventListener('dragleave', saliendo);
    destino.addEventListener('dragover', function(e){e.preventDefault();});
    destino.addEventListener('drop', soltar);

    miLienzo = destino.getContext('2d');

    var imagen=new Image();
    imagen.src="imagenes/zombie1.png";
    miLienzo.drawImage(imagen, 0, 0);

    miLienzo.beginPath();
    miLienzo.arc(440,330,50,Math.PI*2,false);
    miLienzo.stroke();
    miLienzo.beginPath();
    miLienzo.arc(190,360,75,Math.PI*2,false);
    miLienzo.stroke();
    miLienzo.beginPath();
    miLienzo.arc(330,260,75,Math.PI*2,false);
    miLienzo.stroke();

}

function imagenS(e){
miImagen=e.target;
lienzo.drawImage(miImagen,0,0);

}



function arrastrar (e) {
    elemento = e.target;
    e.dataTransfer.setData('Text',elemento.getAttribute('id'));
    e.dataTransfer.setDragImage(e.target,32,32);
}

function soltar(e){

    e.preventDefault();
    var id=e.dataTransfer.getData("Text");
    var elemento=document.getElementById(id);

    var posx=e.pageX-destino.offsetLeft-32;
    var posy=e.pageY-destino.offsetTop-32;


    if (((((posx+32)-330)*((posx+32)-330) + ((posy+32)-260)*((posy+32)-260)) &lt; 5625 ) &amp;&amp; (elemento.id=="hacha")) {
        alert("escenario1:sobreviviste");

        destino.style.background= 'url('+'imagenes/fondo2.png'+')';

    visibilidad1=0;
    visibilidad2=1;
    visibilidad3=0;


    var imagen=new Image();
    imagen.src="imagenes/zombie2.png";
    miLienzo.globalAlpha=visibilidad2;
    miLienzo.drawImage(imagen, 0, 0);

    } else {
        alert("escenario1:estas muerto");
    }


    if (((((posx+32)-190)*((posx+32)-190) + ((posy+32)-360)*((posy+32)-360)) &lt; 5625 ) &amp;&amp; (elemento.id=="motor")) {
        alert("escenario2:sobreviviste");
        destino.style.background= 'url('+'imagenes/fondo3.png'+')';

    visibilidad1=0;
    visibilidad2=0;
    visibilidad3=1;

    var imagen=new Image();
    imagen.src="imagenes/zombie3.png";
    miLienzo.globalAlpha=visibilidad3;
    miLienzo.drawImage(imagen, 0, 0);



    } else {
        alert("escenario2:estas muerto");
    }

    if (((((posx+32)-440)*((posx+32)-440) + ((posy+32)-330)*((posy+32)-330)) &lt; 1963 ) &amp;&amp; (elemento.id=="sniper")) {
        alert("escenario3:sobreviviste");

        destino.style.background= 'url('+'imagenes/fondo1.png'+')';

    visibilidad1=1;
    visibilidad2=0;
    visibilidad3=0;

    var imagen=new Image();
    imagen.src="imagenes/zombie1.png";
    miLienzo.globalAlpha=visibilidad1;
    miLienzo.drawImage(imagen, 0, 0);



    } else {
        alert("escenario3:estas muerto");
    }



}

function finalizado (e) {
    e.preventDefault();


}

function entrando (e){
    e.preventDefault();

}

function saliendo (e) {
    e.preventDefault();

}

window.addEventListener("load", iniciar);
</code></pre>

<p>i would appreciate your help
thanks.</p>
