Когда вы рисуете canvasэлемент, вы просто рисуете растровое изображение в непосредственном режиме .

Эти элементы (формы, линия, изображения) , которые нарисованы не имеют никакого представления , кроме пикселей , которые они используют , и их цвет.

Поэтому, чтобы получить событие щелчка по canvas элементу (фигуре), вам нужно захватить события щелчка по canvasэлементу HTML и использовать некоторую математику, чтобы определить, какой элемент был нажат, при условии, что вы сохраняете ширину / высоту элементов и смещение по оси x / y. ,

Чтобы добавить clickсобытие к вашему canvasэлементу, используйте ...

canvas.addEventListener('click', function() { }, false);

Чтобы определить, какой элемент был нажат ...

var elem = document.getElementById('myCanvas'),
    elemLeft = elem.offsetLeft,
    elemTop = elem.offsetTop,
    context = elem.getContext('2d'),
    elements = [];

// Add event listener for `click` events.
elem.addEventListener('click', function(event) {
    var x = event.pageX - elemLeft,
        y = event.pageY - elemTop;

    // Collision detection between clicked offset and element.
    elements.forEach(function(element) {
        if (y > element.top && y < element.top + element.height 
            && x > element.left && x < element.left + element.width) {
            alert('clicked an element');
        }
    });

}, false);

// Add element.
elements.push({
    colour: '#05EFFF',
    width: 150,
    height: 100,
    top: 20,
    left: 15
});

// Render elements.
elements.forEach(function(element) {
    context.fillStyle = element.colour;
    context.fillRect(element.left, element.top, element.width, element.height);
});​

jsFiddle .

Этот код присоединяет clickсобытие к canvasэлементу, а затем помещает одну фигуру ( elementв моем коде это называется ) в elementsмассив. Вы можете добавить столько, сколько хотите здесь.

Цель создания массива объектов состоит в том, чтобы мы могли запросить их свойства позже. После того, как все элементы были помещены в массив, мы перебираем и отображаем каждый из них на основе их свойств.

Когда clickсобытие инициируется, код проходит по элементам и определяет, был ли клик по любому из элементов в elementsмассиве. Если это так, он запускает оператор alert(), который можно легко изменить, чтобы сделать что-то, например, удалить элемент массива, и в этом случае вам потребуется отдельная функция рендеринга для обновления canvas.

Для полноты, почему ваши попытки не сработали ...

elem.onClick = alert("hello world"); // displays alert without clicking

Это присвоение возвращаемого значения alert()к onClickсвойству elem. Это сразу вызывает alert().

elem.onClick = alert('hello world');  // displays alert without clicking

В JavaScript, то 'и "семантический идентичны, лексические , вероятно , использует ['"]для котировок.

elem.onClick = "alert('hello world!')"; // does nothing, even with clicking

Вы присваиваете строку onClickсвойству elem.

elem.onClick = function() { alert('hello world!'); }; // does nothing

JavaScript чувствителен к регистру. onclickСвойство является архаичным способом прикрепления обработчиков событий. Это позволяет только одному событию быть присоединенным со свойством, и это событие может быть потеряно при сериализации HTML.

elem.onClick = function() { alert("hello world!"); }; // does nothing

Опять же , ' === ".