Adding listener on canvas points

Question

Hey I have a simple triangle in canvas, and I would like to add listener to each triangle's point, so that if user click each point an action will happen. I would like to know if such procedure is possible in canvas, if not what my alternatives? so my main question is as follows:

1. Can I add a listener on canvas single points? if not what are my alternatives?

Update:

I have tried my luck and succeed in adding click event on the all canvas and then get current points of mouse click,but my solution isn't final and very not precious.

Can I create an area around each point which is clicked so the user will not have to be precious in his clicks?

http://codepen.io/Barak/pen/VadQYm

 $(function(){ var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var triangle = [{ x: 58, y: 845 }, { x: 984, y: 845 }, { x: 521, y: 41 }]; drawTriangle(triangle); function drawTriangle(t) { ctx.beginPath(); ctx.moveTo(t[0].x, t[0].y); ctx.lineTo(t[1].x, t[1].y); ctx.lineTo(t[2].x, t[2].y); ctx.closePath(); ctx.strokeStyle = 'black'; ctx.lineWidth = 2; ctx.stroke(); } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="canvas-wrapper"> <canvas id="canvas" width=1024 height=980></canvas> </div> 

Answer 1

There is no single point you could attach an event to in your canvas - it is just a drawing Api - a container for your Image (See W3School for further reference).

But if you have the coordinates, of course you can always detect the clicked position in your Canvas.

I made you a fiddle , to show the possible solution.

canvas.addEventListener("mousedown", doMouseDown, false);
function doMouseDown(e) {
for (i = 0; i < triangle.length; ++i) {
  if ((e.x  triangle[i].x) && (e.y === triangle[i].y)) {
    console.log('you hit an edge!');
  }
 }
}

Update:

If you want to create a tolerance, you have to define the plus and the minus of the actual position you want to accept. A simple and not elegant way could be the following:

function tolerance(number){
//define the tolerance here
var tolerance = 15;
//all the accepted numbers within the tolerance will be in this array
var numberArray=[];

for(i=0;i<(tolerance)*2;++i){
    if(i >= tolerance){
        if(i!=tolerance){
            numberArray[i] = numberArray[i-1]-1;
        }else{
            numberArray[i] = number -1;
        }
    }else{
        if(i!=0){
            numberArray[i] = numberArray[i-1]+1;
        }else{
            numberArray[i] = number +1;
        }
    }
}
//don't forget to put the actual number in the array
numberArray.push(number);
return numberArray;
}

You can now change the doMouseDown function to look something like this:

function doMouseDown(e) {
for (k = 0; k < triangle.length; ++k) {
    if ((tolerance(triangle[k].x).indexOf(e.x)!=-1) && (tolerance(triangle[k].y).indexOf(e.y)!=-1)) {
        console.log('you hit an edge!');
    }
  }
}