onclick事件删除图像纯javascript

Question

我已将下面的代码放在一起，这会产生从画布的顶部到底部移动的x个错误。

我的下一个目标是让bug（图像）在点击时淡出。任何帮助将不胜感激

我已经找到了一些关于元素的淡出效果的例子，但是因为我在JavaScript中只有一个变量来保存图像我需要在图像上执行效果

提前致谢

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();


};