Dectect click in irregular shapes inside HTML5 canvas

Question

I am new using canvas and I created a simple script to draw irregular polygons in a canvas knowing the coord. Now I need to detect if an user clicks on one of those shapes and wich 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 lengh do not solve my issue).

Possible duplicate of [javascript canvas detect click on shape](http://stackoverflow.com/questions/12625766/javascript-canvas-detect-click-on-shape) — Kld, Jun 29 '16 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, Jun 29 '16 at 23:30
This one has what you want - http://stackoverflow.com/questions/2212604/javascript-check-mouse-clicked-inside-the-circle-or-polygon/2212851#2212851 — Hugo Silva, Jun 29 '16 at 23:32
You can try this solution http://stackoverflow.com/a/38111651/1551411 — Kld, Jun 29 '16 at 23:34
@HugoSilva This one use regular shape, I use irregular shapes. — Just a nice guy, Jun 30 '16 at 00:20
@Kaiido I have no tested, but looking at the documentation, looks like this is the right solution =) — Just a nice guy, Jun 30 '16 at 00:31
Have a look at this question, its answers and the duplicate : http://stackoverflow.com/questions/28955110/how-to-recognize-an-area-in-an-canvas-via-javascript — Kaiido, Jun 30 '16 at 00:45
`context.isPointInPath` works for most irregular polygons. If you have a self-crossing polygon then `isPointInPath` may give unexpected (but technically correct) results. — markE, Jun 30 '16 at 03:37
@markE, worth to mention that there is an optional `fillRule` parameter to this method. — Kaiido, Jun 30 '16 at 10:01
@Kaiido. True, applying multiple `fillRule`'s will catch more (but not necessarily all) possibilities. :-) — markE, Jun 30 '16 at 18:44
@Kaiido Thanks, this looks helpfull and looks like your answer came with another question: http://stackoverflow.com/questions/38133382/issue-creating-clickable-area-in-canvas-html5 — Just a nice guy, Jun 30 '16 at 23:02

Dectect click in irregular shapes inside HTML5 canvas

0 Answers0

Linked