При клике на канву, нужно делать проверку, что кликнули в область одной из яблок. Для этого нужно при каждом клике для каждого яблока делать проверку, что mouseX > apple.x и mouseX < apple.x + apple.width, и также для Y - mouseY > apple.y и mouseY < apple.y + apple.height
UPD: смотрите. Для начала, нам нужно получить координаты мыши, но просто так извлечь координаты мыши из объекта события mousemove нельзя, нужно провести некоторые манипуляции.
1) Назначьте событие mousemove не на window, а непосредственно на сам холст, таким образом, можно будет получить координаты мыши, относительно канвы а не окна.
2) У вас канва расширяется на весь экран через css, а значит, и растягивается система координат, от чего кликая например на точку {10, 10} при увеличенной в два раза канве, координата получится {5, 5}. Поэтому, нужно либо менять ширину канвы через JS в атрибут width, либо использовать вот такую функцию
function getMouesPosition(e) {
var mouseX = e.offsetX * cvs.width / cvs.clientWidth | 0;
var mouseY = e.offsetY * cvs.height / cvs.clientHeight | 0;
return {x: mouseX, y: mouseY};
}
в нее нужно передать объект события mousemove. Она получит координаты точки, куда кликнула мышь во внутренней системе координат.
Теперь можно переделать метод food вот таким образом
// Этот метод удаляет нужный фрукт из списка, а также, добавляет очки.
function killFood(f) {
let pos = fruit.indexOf(f);
if (pos === -1) {
// already dead
return;
}
fruit.splice(pos, 1);
score += ~~Math.floor(Math.random()+ 17)
}
function food(e){
let mouse = getMouesPosition(e); // Получаем координаты мыши
// Пройдемся по каждому фрукту. Использую forEach, но вы можете и обычный for, только не забывайте обновить переменную индекса
fruit.forEach(f => {
if (mouse.x > f.x && mouse.y > f.y && mouse.x < f.x + apple.width && mouse.y < f.y + apple.height) {
killFood(f); // Удаляем фрукт
}
});
}
Работающий пример
https://jsfiddle.net/hzbxm5nk/ 
