how to I increase the IsPointInStroke hitbox?

I have a have a line’s that are drawn in a varias directions. I save the path and then check if I hover over the point:

How the line is made:

        let path = new Path2D();            
        ctx.lineWidth = 20; // this doesn't seem to affect the hitbox of the liine
        ctx.globalAlpha = 1;
        ctx.beginPath();
        path.moveTo(start.x + (width / 2), start.y);
        path.lineTo(start.x + (width / 2) + linePadding, start.y);
        path.lineTo(mid, start.y);
        path.lineTo(mid, end.y);
        path.lineTo(end.x - (width / 2) - linePadding, end.y);
        ctx.stroke(path);
        ctx.closePath();

when I check to see if I hit the path:

                path_Arrows.some(element => {
                    if (ctx.isPointInStroke(element.path, mouseLocation.x, mouseLocation.y)) {

it doesn’t seem to detect the whole stroke, just the tiny little stroke. Changing the lineWidth does change the line visually, but not the isPointInStroke. Adjusting the mouseLocation.x, mouseLocation.y to adjust for a hitbox range is technically possible, but because these lines are so dynamic and procedural it would be incredibly difficult to account for each potential location (unless I’m thinking of this wrong).

I’ve also considered changing mainting a line the way I do with the desired lineWidth (like 5) and then just draw rectangles with 0 alphas from the points they move and check isPointInPath.

20 thoughts on “how to I increase the IsPointInStroke hitbox?”

Leave a Comment