Как сделать точное наведение на изображение?
 

Пытаюсь сделать игру для детей, типа "Зоопарк" или что-то такое.
Пишу на javascript с библиотекой Pixi.js.
Добавляю объекты - спрайты (картинки формата png), банан в данном случае, вот так:

const banan = PIXI.Sprite.from('images/banan.png')
Картинка сделана в фотошопе, это банан а вокруг него прозрачные пиксели.
Добавляю для него события

banan.on('pointerdown', onButtonDown);
banan.on('pointerup', onButtonUp);
banan.on('pointerupoutside', onButtonUp);
banan.on('pointerover', onButtonOver);
banan.on('pointerout', onButtonOut);
app.stage.addChild(banan);

дальше функции, которые позволят вызывать делать что-либо при наведении на картинку, их я не привожу сдесь.

Проблема в том, что событие pointerover срабатывает уже когда курсор наводится на прозрачные пиксели в изображении банана, а нужно чтобы срабатывало точно при наведении на картинку банана.
Подскажите как это реализовать?

Нет опыта с Pixi.js, но может быть можно:
- в обработчике события получить координаты события;
- получить информацию о пикселе, на котором произошло событие;
- проверить прозрачность этого пикселя.
Если прозрачность вас устраивает, обрабатывать событие, иначе игнорировать.

Leha777, hitArea