I am new using canvas and I created a simple script to draw irregular polygons in a canvas knowing the coordinates. Now I need to detect if an user clicks on one of those shapes and which one (each object has an ID). You can see my script working here.

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
var objetos = [];

// First Shape
objetos.push( {
  id:'First',
    coordinates: {
        p1: {
            x: 30,
            y: 10
        },
        p2: {
            x: 50,
            y: 50
        },
        p3: {
            x: 90,
            y: 90
        },
        p4: {
            x: 50,
            y: 90
        },
    }
});

// Second Shape
objetos.push( {
  id:'Two',
    coordinates: {
        p1: {
            x: 150,
            y: 20
        },
        p2: {
            x: 90,
            y: 50
        },
        p3: {
            x: 90,
            y: 30
        },
    }
});

// 3th Shape
objetos.push( {
  id:'Shape',
    coordinates: {
        p1: {
            x: 150,
            y: 120
        },
        p2: {
            x: 160,
            y: 120
        },
        p3: {
            x: 160,
            y: 50
        },
        p4: {
            x: 150,
            y: 50
        },
    }
});

// Read each object
for (var i in objetos){
    // Draw rhe shapes
    ctx.beginPath();
    var num = 0;
    for (var j in objetos[i].coordinates){

        if(num==0){
            ctx.moveTo(objetos[i].coordinates[j]['x'], objetos[i].coordinates[j]['y']);
        }else{
            ctx.lineTo(objetos[i].coordinates[j]['x'], objetos[i].coordinates[j]['y']);
        }
        num++;
    }
    ctx.closePath();
    ctx.lineWidth = 2;
    ctx.fillStyle = '#8ED6FF';
    ctx.fill();
    ctx.strokeStyle = 'blue';
    ctx.stroke();
}

NOTE: A cursor pointer on hover would be appreciated. =)

EDIT: Note I am using irregular shapes with no predefined number of points. Some scripts (like those on pages linked as "Possible duplication") using circles or regular polygons (certain number of sides with the same length do not solve my issue).

I am new using canvas and I created a simple script to draw irregular polygons in a canvas knowing the coordinates. Now I need to detect if an user clicks on one of those shapes and which one (each object has an ID). You can see my script working here.

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
var objetos = [];

// First Shape
objetos.push( {
  id:'First',
    coordinates: {
        p1: {
            x: 30,
            y: 10
        },
        p2: {
            x: 50,
            y: 50
        },
        p3: {
            x: 90,
            y: 90
        },
        p4: {
            x: 50,
            y: 90
        },
    }
});

// Second Shape
objetos.push( {
  id:'Two',
    coordinates: {
        p1: {
            x: 150,
            y: 20
        },
        p2: {
            x: 90,
            y: 50
        },
        p3: {
            x: 90,
            y: 30
        },
    }
});

// 3th Shape
objetos.push( {
  id:'Shape',
    coordinates: {
        p1: {
            x: 150,
            y: 120
        },
        p2: {
            x: 160,
            y: 120
        },
        p3: {
            x: 160,
            y: 50
        },
        p4: {
            x: 150,
            y: 50
        },
    }
});

// Read each object
for (var i in objetos){
    // Draw rhe shapes
    ctx.beginPath();
    var num = 0;
    for (var j in objetos[i].coordinates){

        if(num==0){
            ctx.moveTo(objetos[i].coordinates[j]['x'], objetos[i].coordinates[j]['y']);
        }else{
            ctx.lineTo(objetos[i].coordinates[j]['x'], objetos[i].coordinates[j]['y']);
        }
        num++;
    }
    ctx.closePath();
    ctx.lineWidth = 2;
    ctx.fillStyle = '#8ED6FF';
    ctx.fill();
    ctx.strokeStyle = 'blue';
    ctx.stroke();
}

NOTE: A cursor pointer on hover would be appreciated. =)

EDIT: Note I am using irregular shapes with no predefined number of points. Some scripts (like those on pages linked as "Possible duplication") using circles or regular polygons (certain number of sides with the same length do not solve my issue).

• javascript
• jquery
• html
• canvas

• Possible duplicate of javascript canvas detect click on shape – Kld Commented Jun 29, 2016 at 23:19
• @Kld Not duplicated, he use circles, I use irregular shapes, The circle foormula is not usefull at all for me. – Just a nice guy Commented Jun 29, 2016 at 23:30
• This one has what you want - stackoverflow./questions/2212604/… – Hugo Silva Commented Jun 29, 2016 at 23:32
• 3 ctx.isPointInPath() – Kaiido Commented Jun 30, 2016 at 0:27
• 1 context.isPointInPath works for most irregular polygons. If you have a self-crossing polygon then isPointInPath may give unexpected (but technically correct) results. – markE Commented Jun 30, 2016 at 3:37

4 Answers 4

.isPointInPath(x, y) & .isPointInStroke(x, y)

It returns true if the point (x, y) is in the path (a series of drawing instructions). A path can be instantiated by using the new keyword (see Path2D), or by using .beginPath() method. In this particular OP there are 3 separate paths and only the latest created path is recognized by .isPointInPath() and .isPointInStroke() (and probably other methods as well). Note: the structure of the objects in the objectos array (changed to paths array in this answer) has been simplified:

{
  id: "alpha",
  xy: [
    { x: 30, y: 10 },
    { x: 50, y: 50 }, 
    { x: 90, y: 90 }, 
    { x: 50, y: 90 }
  ]
};

After all 3 paths are defined by being drawn by the function draw(paths), the function points(paths) takes the paths array and finds the min/max values of x and y of each object in each xy array of each object of the paths array. These new values are then added to each object:

{
  id: "alpha",
  xy: [
    { x: 30, y: 10 },
    { x: 50, y: 50 }, 
    { x: 90, y: 90 }, 
    { x: 50, y: 90 }
  ],
  maxX: 90,
  minX: 30,
  maxY: 90,
  minY: 10
};

Those values are calculated in order to determine if the user clicked within those parameters. If so, it means that a polygon has been clicked.

 // Mouse click coordinates
 px = 50
 py = 70

 if (obj.maxX > px) {  // All 4 conditions must be met
   if (obj.minX < px) {
     if (obj.maxY > py) {
       if (obj.minY < py) {
          return obj.id

The object id will be returned and that will be used to find the index position (eg. idx) within the paths array. Once identified, that object/path will be added to the cache array and then redefined by draw(paths[idx]) which will make it the current path recognized by .isPointInPath() and .isPointInStroke().

This answer originally had only .isPointInPath() method but I noticed that while it was detecting the current path, it was using the paths bounding rectangle so it was detecting a path when the mouse cursor was a few pixels out of the paths borders. I added .isPointInStroke() which returns true when the mouse cursor is directly over a paths stroke line (aka border). Both are set on separate event handlers: handlePath() has .isPointInPath() and handleLine() has .isPointInStroke(). Together the paths are detected on and within their own borders perfectly.

Here's a Fiddle of the older version. Click a shape and it'll turn red, then click a few pixels outside and to the right of a shape and you'll see that it still reacts to the click.

This is a Fiddle of the current answer.

const cvs = document.getElementById("cvs");
const ctx = cvs.getContext("2d");

const ui = document.forms.ui;
const io = ui.elements;
const pX = io.ptX;
const pY = io.ptY;
const ID = io.pID;
const IN = io.pIN;

let paths = [];
let cache = [];
let px = 0;
let py = 0;
let idx = 0;

paths.push({
  id: "alpha",
  xy: [
    { x: 30, y: 10 },
    { x: 50, y: 50 }, 
    { x: 90, y: 90 }, 
    { x: 50, y: 90 }
  ]
});

paths.push({
  id: "beta",
  xy: [
    { x: 150, y: 20 }, 
    { x: 90,  y: 50 }, 
    { x: 90,  y: 30 }
  ]
});

paths.push({
  id: "gamma",
  xy: [
    { x: 150, y: 120 }, 
    { x: 160, y: 120 }, 
    { x: 160, y: 50 }, 
    { x: 150, y: 50 }
  ]
});

const points = (paths) => {
  return paths.map((obj) => {
    let oX = obj.xy.map((o) => o.x);
    let oY = obj.xy.map((o) => o.y);
    obj.maxX = Math.max(...oX);
    obj.minX = Math.min(...oX);
    obj.maxY = Math.max(...oY);
    obj.minY = Math.min(...oY);
    return obj;
  });
};

const draw = (paths) => {
  for (let i = 0; i < paths.length; i++) {
    ctx.beginPath();
    for (let j = 0; j < paths[i]?.xy.length; j++) {
      if (j === 0) {
        ctx.moveTo(paths[i].xy[j].x, paths[i].xy[j].y);
      } else {
        ctx.lineTo(paths[i].xy[j].x, paths[i].xy[j].y);
      }
    }
    ctx.closePath();
    ctx.lineWidth = 2;
    ctx.fillStyle = "#8ED6FF";
    ctx.fill();
    ctx.strokeStyle = "#0000FF";
    ctx.stroke();
  }
};

const handleLine = (e) => {
  px = e.clientX;
  py = e.clientY;
  pX.value = Math.round(px)
    .toString()
    .padStart(3, "0");
  pY.value = Math.round(py)
    .toString()
    .padStart(3, "0");
    
  const path = paths.find((obj) => {
    if (obj.maxX >= Math.round(px) && 
        obj.minX <= Math.round(px) && 
        obj.maxY >= Math.round(py) && 
        obj.minY <= Math.round(py))
    return obj;
  });
  ID.value = path?.id;
  if (!ID.value) return;
  idx = paths.indexOf(path);
  cache.pop();
  cache.push(paths[idx]);
  draw(cache);
  IN.value = ctx.isPointInStroke(px, py);
};
cvs.addEventListener("pointermove", handleLine);

const handlePath = (e) => {
  px = e.clientX;
  py = e.clientY;
  IN.value = ctx.isPointInPath(px, py);
  if (ctx.isPointInPath(px, py)) {
    ctx.fillStyle = "#FF0000";
    ctx.fill();
    cvs.style.cursor = "pointer";
  } else {
    ctx.fillStyle = "#8ED6FF";
    ctx.fill();
    cvs.style.cursor = "default";
    ID.value = "";
  }
};
cvs.addEventListener("mousemove", handlePath);

const handleClick = (e) => {
  px = e.clientX;
  py = e.clientY;
  IN.value = ctx.isPointInPath(px, py);
  if (ctx.isPointInPath(px, py)) {
    ctx.strokeStyle = "#00FF00";
    ctx.stroke();
  }
};
cvs.addEventListener("pointerdown", handleClick);

draw(paths);
paths = points(paths);

:root {
  font: 2ch/1.5 Consolas;
}

html,
body {
  margin: 0;
  padding: 0;
}

canvas {
  background-color: #ccc;
}

output {
  display: inline-block;
  width: 7.5rem;
  margin-left: 1rem;
}

#ptX::before {
  content: "pointX: ";
}

#ptY::before {
  content: "pointY: ";
}

#pID::before {
  content: "pathID: ";
}

#pIN::before {
  content: "inPath: ";
}

<canvas id="cvs" width="500" height="150"></canvas>

<form id="ui">
  <output id="ptX" name="nfo">000</output>
  <output id="ptY" name="nfo">000</output><br>
  <output id="pID" name="nfo"></output>
  <output id="pIN" name="nfo">false</output>
</form>

The simplest approach to bringing in isPointInPath and isPointInStroke doesn't require that many changes to your code:

• Store the mouse position by adding a mousemove listener to your canvas
• In your draw logic, before closing a path, check for overlap
• If there's overlap, pick a different style and set the cursor
• Ensure draw is called on every mouse move

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
var objetos = [];
var x = -1;
var y = -1;

// First Shape
objetos.push({
  id: 'First',
  coordinates: {
    p1: {
      x: 30,
      y: 10
    },
    p2: {
      x: 50,
      y: 50
    },
    p3: {
      x: 90,
      y: 90
    },
    p4: {
      x: 50,
      y: 90
    },
  }
});

// Second Shape
objetos.push({
  id: 'Two',
  coordinates: {
    p1: {
      x: 150,
      y: 20
    },
    p2: {
      x: 90,
      y: 50
    },
    p3: {
      x: 90,
      y: 30
    },
  }
});

// 3th Shape
objetos.push({
  id: 'Shape',
  coordinates: {
    p1: {
      x: 150,
      y: 120
    },
    p2: {
      x: 160,
      y: 120
    },
    p3: {
      x: 160,
      y: 50
    },
    p4: {
      x: 150,
      y: 50
    },
  }
});

const draw = () => {
  canvas.style.cursor = "default";
  
  // Read each object
  for (var i in objetos) {
    // Draw rhe shapes
    ctx.beginPath();
    var num = 0;
    for (var j in objetos[i].coordinates) {

      if (num == 0) {
        ctx.moveTo(objetos[i].coordinates[j]['x'], objetos[i].coordinates[j]['y']);
      } else {
        ctx.lineTo(objetos[i].coordinates[j]['x'], objetos[i].coordinates[j]['y']);
      }
      num++;
    }
    
    var overlap = ctx.isPointInPath(x, y) || ctx.isPointInStroke(x, y);

    if (overlap) canvas.style.cursor = "pointer";
   
    ctx.closePath();
    ctx.lineWidth = 2;
    ctx.fillStyle = overlap ? "red" : '#8ED6FF';
    ctx.fill();
    ctx.strokeStyle = 'blue';
    ctx.stroke();
  }
}

canvas.addEventListener("mousemove", e => {
  const { left, top } = canvas.getBoundingClientRect();
  x = e.clientX - left;
  y = e.clientY - top;
  
  draw();
});

draw();

<canvas id="canvas" width="300" height="200"></canvas>

An alternative solution is to not use canvas at all. Since what you're doing is drawing and interacting with polygons, you can create SVG elements instead. This gives you a number of benefits, since the SVG paths are part of the DOM and give you all the normal interaction hooks and whatnot "for free".

Also I suggest changing the objects' coordinates to arrays instead of objects; it makes no sense that they're objects if you're only iterating over them and not accessing the points by identifier. Like this:

objetos.push( {
  id:'First',
  coordinates: [ // <- Notice it's a square bracket, not a curly one
    { // <- also, points aren't named
      x: 30,
      y: 10
    },
    {
      x: 50,
      y: 50
    },
    {
      x: 90,
      y: 90
    },
    {
      x: 50,
      y: 90
    },
  ]
});

Then for the SVG bit, create an SVG element instead:

<svg xmlns="http://www.w3/2000/svg" id="canvas" width=500 height=150 viewBox="0 0 500 150" role=img></svg>

And create path elements in your script:

for (const o of objetos) {
    // Use the "NS" version
    let pathElement = document.createElementNS("http://www.w3/2000/svg", "path");

    // Move to start location
    let pt = o.coordinates[0];
    let pathAttrib = `M${pt.x} ${pt.y}`;

    // Add lines to remaining points by appending the coordinates
    for (let i = 1; i < o.coordinates.length; i++) {
        pt = o.coordinates[i];
        pathAttrib += ` ${pt.x} ${pt.y}`;
    }

    // Close path
    pathAttrib += "z";

    // Set stroke and fill and add the path attribute
    pathElement.setAttribute("d", pathAttrib)
    pathElement.setAttribute("fill", "#8ED6FF");
    pathElement.setAttribute("stroke", "blue");
    pathElement.setAttribute("stroke-width", "2");

    // Add interaction hooks
    pathElement.onmouseover = (e) => {
        console.log(`Hovering over ${o.id}`);
    }

    pathElement.onclick = (e) => {
        console.log(`Clicked on ${o.id}`);
    }

    // Add inside SVG element
    canvas.appendChild(pathElement);
}

By using this approach, you can use normal browser API stuff to handle interactivity, which is much easier than trying to detect what you clicked on in a canvas.

All the answers above are quite good; however, mine is a bit different and may be less powerful. It came to mind immediately when I read this question.

Here’s the idea: we can use the Ray-Casting algorithm, as it's monly done in putational geometry, to determine if a point lies inside an n-sided polygon in a 2D space.

The basic approach is simple: we draw a ray starting from the point and extend it horizontally to the right. There are two possible cases that can occur when we check for intersections between the ray and the polygon's edges

• Even number of time crossing the polygon (inside)
• Odd number of time crossing the polygon (outside)

Here is a small implementation

function isPointInPolygon(point, polygon) {
    const x = point.x;
    const y = point.y;
    let inside = false;
  
    const polyCoords = Object.values(polygon.coordinates);
    
    for (let i = 0, j = polyCoords.length - 1; i < polyCoords.length; j = i++) {
        const xi = polyCoords[i].x, yi = polyCoords[i].y;
        const xj = polyCoords[j].x, yj = polyCoords[j].y;
  
        const intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
        if (intersect) {
            inside = !inside;
        }
    }
  
    return inside;
}

function checkPointInPolygons(point, objetos) {
    for (let i = 0; i < objetos.length; i++) {
        if (isPointInPolygon(point, objetos[i])) {
            return true;
        }
    }
    return false;
}