[ Canvas mouseover arc ]

I have a simply question - is there and option to detect the mouseover event on canvas arc? I want to make arc with radius 10, and when the mouseover "do something". I tried to do something like that:

context.arc(100,200,10,0,2*Math.PI);
canvas.addEventListener('mouseover', function(e) {
    if(e.clientX == 100 && e.clientY == 200 ){
        alert('omg');
    };
});

...but it will show only when the mouse will be exactly on x=100, y=200 position (and I'm not ever sure if it will work)... I don't want to use KinectJS. Is there any other way to do this?

Answer 1

I don't know how complex your scene is. Provided you have just that arc there on the canvas, you could use color picking (getPixel) on mouse over and compare the color against the arc color.

If the scene is more complex and you have multiple shapes with same colors, you could maintain another, hidden canvas in which you draw the shapes in specific colors (separate color per object). Then perform the color picking check against that canvas.