Nsryjdtyk

I am following this guide:
https://www.w3schools.com/graphics/game_intro.asp

I'm trying to make it so when my component hits an object the image changes.
Right now, I have it set so both the images are exactly on top of each other. When they hit an object hide the top one, but it's not disappearing.

     `function component(width, height, color, x, y, type) {

         this.type = type;

          if(type == "image" || type =="background") {

             this.image = new Image();

              this.image.src = color;

       }

            this.width = width;

            this.height = height;

            this.speedX = 0;

            this.speedY = 0;

            this.x = x;

            this.y = y;

            this.gravity = 0.05;

            this.gravitySpeed = 0;

         //draws the component

            this.update = function() {

            ctx = myGameArea.context;

               //accounting for the the component being the score and 

           the data being text.

           if(this.type == 'text'){

             ctx.font = this.width + ' ' + this.height;

             ctx.fillStyle = color;

             ctx.fillText(this.text, this.x, this.y);

                 } else if(type =='image' || type == 'background') {

                      ctx.drawImage(this.image, this.x, this.y, 

         this.width, this.height);

         if(type == 'background') {

            ctx.drawImage(this.image, this.x + this.width, this.y, 

           this.width, this.height)

               }

                  } else { //if it's not text draw the face icon.

                ctx.fillStyle = color;

              ctx.fillRect(this.x, this.y, this.width, this.height);

               }

                }

`
This is what I'm trying to use to make the image disappear

        function changeImage() {

         for(let z=0; z < myObstacles.length; z++){

         if(myGamePiece1.crashWith(myObstacles[z])){

             myGamePiece1.fillStyle = 'rgba(255,0,0,0)';



             }

               }

              }

And I'm calling this function here:

     function updateGameArea() {

       var x,height,gap, minHeight, maxHeight, minGap, maxGap;

        for(i = 0; i < myObstacles.length; i ++) {

         if(myGamePiece.crashWith(myObstacles[i])) {

           changeImage();

            myGameArea.stop();

here is the github
https://github.com/dhuang6/html-game--flappy-bird

Thank you for assisting me!