Galera, estou apanhando um pouco para Javascript rs, preciso fazer uma função para que quando eu clique numa imagem ela meio que desapareça, mas nao estou conseguindo, segue abaixo o meu trecho de código
 
<html>	
      <head>
            <script type="text/javascript">
			  var x, y;
              var ctx;
			  var m=[];
			  var v=[]
			  var i, j;		
			  var apagar1 = document.getElementById("i1");
			  
                 function inicio()
				{
				 
                  var c=document.getElementById("cnv")
                  ctx=c.getContext("2d");
				
				fundo();
				
				 for(i=0;i<20;i++)
			{
			 m[i]=[];
			 v[i]=[];
			}
			
			
			
			for(i=0;i<20;i++){
				for(j=0;j<20;j++){		
				 m[0][0]=document.getElementById("i1");
			     m[0][1]=document.getElementById("i2");
			     m[0][2]=document.getElementById("i3");		
                 		
					
					}}
					
					num1();
					
					}
				  
				 
				
				 
				
				 
				
				
		        function fundo()
		        {
		         ctx.fillStyle="#000000";
                 ctx.fillRect(0,0,1300,600);
				}
				
				function num1(){
				ctx.drawImage(m[0][0],100,100);
			    ctx.drawImage(m[0][1],200,200);
				ctx.drawImage(m[0][2],600,525);}	  
              </script> 
      </head>
	  
	  
	  
	  
	<body onload="inicio()">
		<canvas id="cnv" width="1300" height="600" style="border: solid 1px black; margin: 0px auto; display: block;">
		Navegador sem suporte 
			  <img src="link da img 1" id="i1">
			  <img src="link da img 2" id="i2">
			  <img src="link da img 3" id="i3">
		</canvas>	
	</body>
</html>
	Posso utilizar somente Javascript, se puderem me ajudar eu ficaria muito agradecido, estou meio que desesperado kkkk