Check if point is inside of shape drawn by a complex Path2D

Question

I want to check if a given point is inside of the space drawn inside of a irregular path - inside of the brain (the path is below).

I don't seem to be able to use CanvasRenderingContext2D.isPointInPath(path, x, y) because it only returns true if the point is literally inside the path (the white outline).

I also don't think I can use the odd polygon rule, given that it is possible for a point not to be in the edge and its line still hit the shape wall an even number of times...

obscure · Accepted Answer

As you're working with a SVG, here's a workaround which doesn't involve any abstract calculations.

(1)

Make the inside of your shape, thus the area you want to detect a color completely different from the rest of the shape or any other visuals. In your case for example it would be nothing (or black) to red.

This is controlled by the svg's fill attribute, which takes a hex #ff0000 or a rgb value rgb(255,0,0). Well for reasons that will be important later we make it a rgba(255,0,0,1) value though it ignores the alpha value.

As we don't want the fill to be visible, we also need to set the fill-opacity value to 0.005. This is the lowest value possible and equals the CanvasRenderingContext2D value of 1 in a range from 0-255.

(2)

Now we need to turn the svg into an Image object that can be drawn onto a canvas. This can be done using the following lines:

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let img = new Image();
img.onload = function(e) {
    ctx.drawImage(e.currentTarget, canvas.width / 2 - 50, canvas.height / 2 - 50, 100, 100);
}
img.src = 'data:image/svg+xml;charset=utf8,' + encodeURIComponent(svg);

svg is just a string representation of your svg's data.

(3)

The final step involves getting the pixel color at a specific position on the canvas. For this we utilize the .getImageData(x, y, width, height) method, which returns an object consisting of a Uint8ClampedArray which holds four values per pixel. If we set both width and height to 1 we get exactly the four color components for a single pixel - red, green, blue and alpha.

Now we simply compare the color with the red we've used in step (1) and if it's equal, we know it's inside the shape.

Here's a working example (hover your mouse over the image):

let hitColor = 'rgba(255,0,0,1)';
let svg = `

`;
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let rect = canvas.getBoundingClientRect();
let img = new Image();
img.onload = function(e) {
  ctx.drawImage(e.target, canvas.width / 2 - 50, canvas.height / 2 - 50, 100, 100);
  canvas.addEventListener('mousemove', (e) => {
    let data = ctx.getImageData(e.clientX - rect.left, e.clientY - rect.top, 1, 1).data;
    let hit = hitColor == `rgba(${data[0]},${data[1]},${data[2]},${data[3]})`;
    document.getElementById('message').innerText = `inside path: ${hit}`;
  });
}
img.src = 'data:image/svg+xml;charset=utf8,' + encodeURIComponent(svg);



inside path:

Check if point is inside of shape drawn by a complex Path2D

Answers (1)

(1)

(2)

(3)

Related Questions