Sprite making image disappear?

Ok so i have a program that draws 3 ghosts with random positions and draws a bag “sac.gif” that you can move around using the arrow keys on your keyboard on a 400 by 400 canvas. I’m trying to make it so that whenever the user moves the bag image over the ghost image, the one of three ghost images disappear while the other two stay in their positions and await until the bag image hovers over them and makes them disappear aswell. That is where the problem is… i’m not too sure how i would be able to make a function that checks if the bag and the ghost image are touching and removing the ghost image if it is. all help is appreciated.

window.requestAnimFrame = (function() {
  return window.requestAnimationFrame || 
    window.webkitRequestAnimationFrame || 
    window.mozRequestAnimationFrame || 
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame || 
    function(callback) {
      window.setTimeout(callback, 1000 / 60);

  };
})();

window.onload = function() {
var canvas = document.getElementById("canvas");
var contexte = canvas.getContext("2d");

var T_fleche_gauche = 37;
var T_fleche_droite = 39;
var T_fleche_haut = 38;
var T_fleche_bas = 40;

var player = {
    img: new Image();
  };
var x = 100;
  var y = 100;"
  var  w = 64;
  var  h = 64;
  var dx = 0;
  var dy = 0;

  player.img.src = "sac.gif"

  document.onkeydown = function(e) {
  toucheCourante = e.keyCode;

  if (toucheCourante == T_fleche_gauche) {
   dx = -1;
   dy = 0;
}
  if (toucheCourante == T_fleche_droite) {
       dx = 1;
       dy = 0;
    }
    if (toucheCourante == T_fleche_haut) {
       dy = -1;
       dx = 0;
    }
    if (toucheCourante == T_fleche_bas) {
       dy = 1;
      dx = 0;
    }
  }

function dessiner(x, y) {
      var random = function() {
      return {
        x: w + (Math.random() * (400 - (2*w))),
        y: h + (Math.random() * (400 - (2*h)))
      }
    };
  var points = [];
    for (var i = 0; i < x; i++) {
      points.push( random() );
    }
    return points;
  };
var ghost = {
    img: new Image(),
    };
ghost.img.src = "ghost.png";

function affiche(x,y) {
   for (var u of ghost.list) {
     contexte.drawImage(ghost.img, u.x, u.y, 50, 60);
   }
 }

  ghost.list  = dessiner(3, ghost);



    function draw() {
    contexte.save();
    contexte.clearRect(0, 0, 400, 400);
    contexte.translate(10+2*x,10+2*y);
    contexte.drawImage(player.img, x,y,70,90);
    contexte.restore();

    x = x+dx;
    y = y+dy;

    if (x > 125) x = -25;
    if (x < -25) x = 125;
    if (y > 125) y = -25;
    if (y < -25) y = 125;

    affiche();

    window.requestAnimFrame(function() {draw(dx,dy)});
  };

  draw(1,0);

};