Detect which canvas rectangle is clicked

Question

I have a canvas in html:

<canvas id="canvas" width="450" height="450"></canvas>

That I made nine equally sized squares in. I would like to see what square I have clicked as an alert function. How would I do that?

Full Code is here: https://jsfiddle.net/ckd6g1ac/1/

Sorry, I do not have any code relevant to my problem in the JSFiddle, but I have no clue on how to start writing it.

Thanks!

http://stackoverflow.com/questions/9880279/how-do-i-add-a-simple-onclick-event-handler-to-a-canvas-element - this should help... so, some math... :) — sinisake, Aug 23 '15 at 16:22
Damn, marked as duplicate. I can still share this working fiddle: https://jsfiddle.net/ckd6g1ac/8/ — Sebastian Simon, Aug 23 '15 at 16:31
@Xufox thanks a lot man, you are the only one who provided an answer to this question. — Harshul Sahni, Aug 23 '15 at 16:46
Ok, I’ve rewritten the answer (it was short, fortunately). — Sebastian Simon, Aug 23 '15 at 16:51

Sebastian Simon · Accepted Answer · 2015-12-14T17:07:18.833

This is your onclick function:

$("#canvas").click(function(e) {
  var yNames = ['upper', 'middle', 'lower'],
    xNames = ['left', 'middle', 'right'];
  alert(('The '
    + yNames[Math.floor((e.offsetY * 3) / canvas.height)] + '-'
    + xNames[Math.floor((e.offsetX * 3) / canvas.width)] + ' box was clicked.')
      .replace('middle-middle', 'middle'));
});

Also you had a semantic error in your loop: it should be i<9 instead of 1<9.

offsetX and offsetY were used because these measure the offset from the element itself, which means that it doesn’t matter where the canvas is on the page.

Working JSFiddle.

Detect which canvas rectangle is clicked

1 Answers1