How to apply isPointInPath() to multiple path

Active3 hr before
Viewed126 times

7 Answers


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:

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);
   $.fillStyle = `hsl(${10*i},50%,50%)`;

C.addEventListener('mousemove', e => {
   let bound = C.getBoundingClientRect();
   let x = e.pageX - bound.left;
   let y = e.pageY -;
   paths.forEach((path, index) => {
      if ($.isPointInPath(path, x, y)) {

load more v

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)
load more v

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]);
load more v

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)

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:


context.isPointInPath(x, y);
load more v

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.
load more v

The current path and the current bitmap are not part of the drawing state. The current path is persistent, and can only be reset using the beginPath() method. The current bitmap is a property of the canvas, not the context.,The beginPath() method must empty the list of subpaths in the context's current path so that the it once again has zero subpaths.,Returns true if the given point is in the current path.,The moveTo(x, y) method must create a new subpath with the specified point as its first (and only) point.

For example, after the following statement:

context.font = 'italic 400 12px/2 Unknown Font, sans-serif';
load more v

Other "ispointinpath-apply" queries related to "How to apply isPointInPath() to multiple path"