I have a function in my JS that gets the user's mouse click on the canvas.

Now lets say I have a random shape on my canvas (really its a PNG image which is rectangular) but i don't want to include any alpha space.

My issue lies with lets say i click some where and it involves a pixel of one of the images. The first issue is how do you work out the pixel location is an object on the map (and not the grass tiles behind).

Secondly if i clicked said image, if each image contains its own unique information how do you process the click to load the correct data.

Note I don't use libraries I personally prefer the raw method. Relying on libraries doesn't teach me much I find.