# How to apply isPointInPath() to multiple path

Active3 hr before
Viewed126 times

ispointinpathapplymultiple
90%

Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers , Can I multiply Big-O time complexities? , Meta Stack Overflow , Stack Overflow Public questions & answers

Here's a really simple grid of hexagons to demonstrate this: http://codepen.io/pixelass/pen/37445407893ef783e414ce136af5633a

```const C = document.createElement('canvas');
const \$ = C.getContext('2d');

const rows = 5;
const cols = 5;
var side = 50;
C.width = cols * side * Math.sqrt(3);
C.height = rows * 1.5 * side;

const paths = [];

var dy = -1;
for (let i = 0; i < (rows + 1) * (cols + 1); i++) {
let dx = i % (cols + 1);
dy += dx ? 0 : 1;
dx += dy % 2 ? -.5 : 0;
let cx = dx * (side * Math.sqrt(3)) + side / 2 * Math.sqrt(3);
let cy = (dy - .5) * (side * 1.5) + side;
let path = new Path2D();
for (let j = 0; j < 6; j++) {
let x = Math.cos(Math.PI / 3 * j + Math.PI / 6) * side + cx;
let y = Math.sin(Math.PI / 3 * j + Math.PI / 6) * side + cy;
if (j) {
path.lineTo(x, y);
} else {
path.moveTo(x, y);
}
}
path.closePath();
\$.fillStyle = `hsl(\${10*i},50%,50%)`;
\$.fill(path);
paths.push(path);
}

let bound = C.getBoundingClientRect();
let x = e.pageX - bound.left;
let y = e.pageY - bound.top;
paths.forEach((path, index) => {
if (\$.isPointInPath(path, x, y)) {
console.log(index);
}
});
});

document.body.appendChild(C);```
88%

The isPointInPath() function, The isPointinPath() function can take two or three arguments: ,The isPointInStroke() function,The isPointInPath() can be used to determine if the coordinates that you give it are contained within the current path or not

• The path object to check. This argument is optional and if not given the default path is checked.
• The X coordinate
• The Y coordinate
`context.isPointInPath(path, x, y)`
72%

The CanvasRenderingContext2D.isPointInPath() method of the Canvas 2D API reports whether or not the specified point is contained in the current path.,This example uses the isPointInPath() method to check if a point is within the current path.,Whenever you move the mouse, this example checks whether the cursor is in a circular Path2D path. If yes, the circle becomes green, otherwise it is red.,Prior to Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4), this method incorrectly failed to multiply the specified point's coordinates by the current transformation matrix before comparing it to the path. Now this method works correctly even if the context is rotated, scaled, or otherwise transformed.

```ctx.isPointInPath(x, y[, fillRule]);
ctx.isPointInPath(path, x, y[, fillRule]);```
65%

I am trying to have it so that there is multiple paths and make it so that isPointInPath can detect each individual path. I really don't know how to do it and the only examples I've seen so far have had JQuery. I do prefer that it is just JS.,I'll point you again to the reference, specifically: boolean ctx.isPointInPath(path, x, y),So you can simply have all your paths in some array and then use array.some to perform the check, like ...

So you can simply have all your paths in some array and then use array.some to perform the check, like ...

```if (paths.some(function(path) {
return ctx.isPointInPath(path, x, y)
})
....```
75%

The canvas isPointInPath() Method is used to check whether or not the specified point is contained in the current path. The isPointInPath() method returns true if the specified point is in the current path, otherwise false.,Example 2: When the point is in the path, boolean value true is returned.,Example 3: When point is not in the path, boolean value false is returned.,Supported Browsers: The browsers supported by canvas isPointInPath() method are listed below:

Syntax:

`context.isPointInPath(x, y);`
40%

point locates inside the region . then you can create a region with your path then call this member function to easily get the result.,however , it is really ineffective and memory-consuming, especally at some occasions with intensive calls to the isPointInPath. It seems to be a fundmental problem in computer graphics , yet im a beginner about that.,I wonder if there is a better algorithemic approch to handle this problem using the existing OpenVG functions.,I assume vgPathBounds() is not accurate enough for you in all cases? Still - might be useful to find out if it’s good enough for some of the cases. I mean it’s really import to know if it’s in the path or just the region near the path? I would imagine that for a lot of uses, it should be sufficient.

hey, buddies:

```   I am currently involved in a project of implementing a canvas element supporting
for our browser.```
`context.font = 'italic 400 12px/2 Unknown Font, sans-serif';`