onclick event to remove image pure javascript

Question

I have put together the code below which creates x number of bugs moving from the top to the bottom of my canvas.

My next aim is to make the bug (image) fade out when it is clicked on. Any help will be appreciated

I have found some examples of fadeout effect on elements however as i have a variable only within JavaScript which holds the images i need the effect to be executed on the image(s)

Thanks in advance

var canvas;
var context;
var imageBG;
var imageBug;
var timer;
var seconds;
var count;



window.onload = function () {
    canvas = document.getElementById('myCanvas');
    context = canvas.getContext('2d');

};


//Initialising game components
function onStart (){

//Start Button
startBtn.style.display = "none";

//Logo
play.style.display = "none";

seconds = 11
timer = document.getElementById('timer');

//if Start button pressed - following components are loaded

//-----Timer
/*function counter (){
    seconds -= 1;
    timer.innerText = "Time Remaining: " + seconds;

    /*if (seconds <= 0){

        clearInterval(count);
        timer.innerText = "GAME OVER";
    }
}

count = setInterval(counter, 1000); */


//-----Bugs falling


/*imageBug = new Image();

imageBug.onload = function (){
context.drawImage(imageBug, 0,0);
}
imageBug.src = 'https://i.imgur.com/uewNfQ7.png';
*/



//Creating Bug(s) with random x and y location
var noOfBugs = 7;
var bug = [];
for(var i =0; i < noOfBugs; i++){
var x = Math.floor(Math.random()*canvas.width);
var y = Math.floor(Math.random()*100);

bug[i] = new Bug(x,y);
}

imageBug = new Image();
imageBug.src = "imgs/redbug.png";

 function Bug (x,y){
    this.x = x;
    this.y =y;

    this.drop = function(){
    var dir = Math.floor(Math.random())*3;
    if(dir == 0){
        this.x = this.x;
    }



    this.y = this.y+1;
    if(this.y > canvas.height){
        this.y=0;
    }
 }

this.show = function (){
context.drawImage(imageBug, this.x, this.y)

}
}


function draw (){
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
for(var i=0; i<noOfBugs; i++){
    bug[i].show();
    bug[i].drop();
}
}

 function reload (){
    draw ();
    window.requestAnimationFrame(reload);
 }

 reload();


};

Answer 1

So, without canvas, just HTML elements you can do something like this:

<style>
  #map {
    width: 400px;
    height: 500px;
    position: relative;
    border: 1px solid #000;
    overflow: hidden;
  }
  #map img {
    position: absolute;
  }

</style>
<script>
var bugurl = 'https://static.wixstatic.com/media/84af8a_2fc726d5ca6145d1a6442a9a76edd580~mv2.jpg_srz_50_50_85_22_0.50_1.20_0.00_jpg_srz';
var heightBuffer = 100; // at least the height of the bug.  This will be the minimum height from the bottom of the map to the top of the bug
var widthBuffer = 100;
var interval = 10;  // 10 ms 
var fadeInterval = 30;
var pixelsPerDrop = 5;
var idCounter = 0;

function createBug() {
  var map = document.getElementById('map');
  var left = Math.floor( (map.clientWidth - widthBuffer) * Math.random())  ;
  var top =  Math.floor( (map.clientHeight  - heightBuffer) * Math.random()) ;
  var bug = '<img src="'+ bugurl +'" style="left: '+ left +';top:'+ top +'" id="bug_'+ ++idCounter +'" onclick="fade(this)"/>';
  map.innerHTML += bug;
  makeBugDrop(idCounter);
}
function makeBugDrop(id) {
  var bug = document.getElementById('bug_' + id);
  var map = document.getElementById('map');
  bug.style.top = (parseInt(bug.style.top) + 1) + 'px';
  if(parseInt(bug.style.top) < map.clientHeight) {
    setTimeout(function() {
      makeBugDrop(id)
    }, interval);
  }
  else {

  }
}
function fade(elm) {
  elm.style.opacity -= 0.01;
  if(elm.style.opacity > 0) {
    setTimeout(function() {
      fade(elm);
    }, fadeInterval);
  }
}
function createMultiple() {
  var items = 10;
  for(var i=0; i<items;i++) {
    createBug();
  }
}
</script>
<fieldset>
  <input type="button" value="create 1" onclick="createBug()"/>
  <input type="button" value="create 10" onclick="createMultiple()"/>
</fieldset>
<div id="map"><div>