When you draw the canvas element, you just draw the bitmap in immediate mode .
The elements (shapes, lines, images) that are drawn have no representation, except for the pixels that they use and their colors.
Therefore, to get the click event on the canvas element (shape), you need to capture the click events on the canvas HTML element and use some math to determine which element was clicked, provided that you store the elements' width / height and x / y offset.
To add a click event to your canvas element, use ...
canvas.addEventListener('click', function() { }, false);
To determine which item was clicked ...
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 .
This code attaches the click event to the canvas element, and then pushes one form (called element in my code) into the elements array. You can add as much as you want.
The goal of creating an array of objects is that we can later request their properties. After all the elements have been transferred to the array, we scroll and visualize each based on their properties.
When the click event is fired, the code goes through the elements and determines whether there was a click on any of the elements in the elements array. If so, it fires alert() , which can be easily changed to do something like deleting an array element, in which case you will need a separate rendering function to update the canvas .
For completeness, why your attempts did not work ...
elem.onClick = alert("hello world"); // displays alert without clicking
This sets the return value of alert() to the onClick elem property. It immediately calls alert() .
elem.onClick = alert('hello world'); // displays alert without clicking
In JavaScript, the characters ' and " semantically identical, the lexer probably uses ['"] for quotes.
elem.onClick = "alert('hello world!')"; // does nothing, even with clicking
You assign a string to the onClick elem property.
elem.onClick = function() { alert('hello world!'); };
JavaScript is case sensitive. The onClick property is an archaic method for binding event handlers. It only allows you to bind one event to a property, and the event may be lost when serializing HTML.
elem.onClick = function() { alert("hello world!"); };
Again, ' === " .