0

I want check whether a point(x,y) is in a particular area on a canvas. For example if I have an area of 100X100 on an html canvas, then i want to find that whether a point (x, y) lies inside this area or it is outside the area. This detection is to be done using javascript and jquery. Thanx.

me_digvijay
  • 5,374
  • 9
  • 46
  • 83
  • Are you asking how to calculate this? It's a basic math: `if(x>=0 && x<= 100 && y>=0 && y<=100){ /*inside*/ }else{ /*outside*/ }` – Konrad Dzwinel Jan 17 '12 at 11:26
  • 1
    This is true for a simple rectangle but what if the rectangular area itself is bend at some angle? – me_digvijay Jan 17 '12 at 11:40
  • There is no universal solution for all possible shapes. You may check if mouse cursor is over canvas element using `mouseenter` event if that's what you want to achieve. – Konrad Dzwinel Jan 17 '12 at 11:47

2 Answers2

4

depends on what use case you need it for:

  1. MouseOver/Click: as long as your canvas is the only thing with moving elements and you DO NOT need support for safari / iOS an good ol' fashioned image map actually does the job. (a 1px*1px transparent gif stretched over the dimensions of the canvas using the image map)

  2. Any Point (including mouse): use a formula to calculate if the point is inside or outside the polygon. the following script (while not from me) solves this:

    //+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com/math/is-point-in-poly [rev. #0]

function isPointInPoly(poly, pt){
    for(var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
        ((poly[i].y <= pt.y && pt.y < poly[j].y) || (poly[j].y <= pt.y && pt.y < poly[i].y))
        && (pt.x < (poly[j].x - poly[i].x) * (pt.y - poly[i].y) / (poly[j].y - poly[i].y) + poly[i].x)
        && (c = !c);
    return c;
}

    on his page, Jonas also gives an example of how to use it. basically poly is an array of objects containing the points of the polygon and pt is an object with the point you want to test:

    var polygon = [
    {x: 0, y: 0},
    {x: 0, y: length},
    {x: length, y: 10},
    {x: -length, y: -10},
    {x: 0, y: -length},
    {x: 0, y: 0}
];

var testpoint= {x: 1, y:2};
if(isPointInPoly(polygon,testpoint)) { /* do something */ }

    if it's for mouseposition you should bind the whole thing to mousemove which again can be en-/disabled upon mouseenter/mouseleave - all events of the canvas node

  3. any point: use the canvas function isPointInPath() as explained here: http://canvas.quaese.de/index.php?nav=6,42&doc_id=31 Though AFAIK this only works if you have only one path on the canvas (you could use multiple canvas's) - or repaint each polygon and test it while doing so.

I personally prefer option 2. if you need further help on getting the mouse coordinates a google search should give you the right pages here on stackoverflow (or see the "related" section to the right)

Jörn Berkefeld
  • 2,540
  • 20
  • 31
0

Step 1: Define your area/region as a path.

Step 2: Check if the given point is inside this path.

// Define path - could be anything, rectangle, circle, polygon etc.
var path = new Path2D();
path.rect(x1, y1, width, height);

// Check if the given point (x2, y2) is inside the path.
if (ctx.isPointInPath(path, x2, y2)) {
    // Point is inside the area
} else {
    // Point is not inside the area
}

If you have multiple areas to do your check, define each area as a path and do the isPointInPath check for each of them.

yenren
  • 450
  • 9
  • 20