Is it possible to detect clicks on different parts in a canvas element?

Suppose within a开发者_如何学Go canvas element I have a circle and a rectangle on a canvas and I want to use clicks on both to do different stuff. Is it possible to differentiate between these two clicks?

---

Another way of doing it is by having a shadow (i.e. not displayed) canvas. In this canvas you draw masks of the shapes from the real canvas in various colours.

You then check the pixel colour in the shadow canvas, and can work out which object was clicked in the 'real' one.

---

The event that is passed to the onClick call back contains pageX and pageY members that are set to the location of the click. See more at this blog post.

---

Yes it is but I don't think there is any existing functionality to do so. Basically you would want to keep track of the shapes that you have drawn (generally by keeping track of their vertex coordinates) and attach a click event to the canvas that you are talking about. Once the click event is fired then find the x and y coordinates of the mouse relative to the top-left corner of the canvas and then iterate through your array of shapes and check for intersection. The implementation of this is similar to ray-tracing, but is much easier to do since you're only talking about 2 dimensions.

Check this article for point in polygon calculation information: http://en.wikipedia.org/wiki/Point_in_polygon

---

I have made tutorials on getting objects to be selectable on Canvas, if you're looking for how to get started.