Как узнать, какое имя / идентификатор объекта внутри элемента холста щелкают?

Question

У меня есть два изображения внутри элемента <canvas>.

var ctx = document.getElementById('canvas').getContext('2d');

var img1 = new Image();
img1.src = 'cloud.jpg';
img1.name = "Image 1";
img1.onload = function() {
    ctx.drawImage(img1, 0, 0);
};

var img2 = new Image();
img2.src = 'eleph.png';
img2.name = "Image 2";
img2.onload = function() {
    ctx.drawImage(img2, 250, 250);
};

Теперь, когда пользователь щелкает внутри холста, я хочу узнать, какой объект был нажат. Например, оповещение img1.name или img2.name, когда пользователь щелкает соответствующее изображение внутри холста.

Пожалуйста, дайте несколько указаний, как это сделать. Спасибо!

Answer 1

Прежде всего, вы должны хранить в некоторой переменной положение и размер каждого изображения.После этого добавьте обработчик onclick к элементу canvas, который перебирает коллекцию позиций изображения, проверяя, какая из них находится под мышью при событии click.