Question

How would one detect a mouse click inside of an arc drawn in a HTML canvas element?

I am creating the arc like so:

ctx.beginPath();
ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
ctx.arc(250, 250, 0, 0, 0, true);
ctx.fill();

I did try to associate the context object for each arc that is drawn to then later use myArc.ctx.isPointInPath(mouseX, mouseY) – but that didn’t work – so I want to use basic trigonometry to figure out if the mouse click is inside the bounds or not.

Thanks in advance!

Answer 1

You should use

ctx.isPointInPath(x, y);

What I did was that I moved the beginPath, path “drawing” into a function, and I called it also for drawing, and also for determining if the mouse hit the shape or not.

function shape() {
    ctx.beginPath();
    ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
    ctx.arc(250, 250, 0, 0, 0, true);
}

function draw() {
    shape();
    ctx.fill();
}

function checkHit(x, y) {
    shape();
    return ctx.isPointInPath(x, y);
}

if you build your app like this, it will be easy to add other shapes as well