How to cheat at complex hit-testing. 🧵
Hit testing against our axis-aligned rectangles is easy. Is the point left of the left edge? Right of the right edge, above the top, or below the bottom? If you answered yes to any of these questions then it's a miss; otherwise, it's a hit.
Our lines are more difficult. We want to score hits within a certain distance of the line so we need to turn the line into a box. If the line is straight then we test against a polygon (a potentially rotated rectangle). Trickier but not bad. Curved lines? Those are hard.
...but not for us. We're using an HTML canvas here—and the canvas 2D rendering context has a function called "isPointInPath". We can use it to test a point against any Path2D. developer.mozilla.org/en-US/docs/Web…
Here's how we'll do it. Our arrow here is defined as an arc, or a segment of a circle between a two angles. The library will calculate the circle for us, along with the start and end angles.
But we want to create a "curved box". To do this, we need to draw two new arcs: one using circle with a slightly smaller radius, and another with a slightly larger radius. Those give us the inner and outer edges of our curved box.
Now we can just connect the lines (or close the shape) and there we go: we have a path that we can hit test against using isPointInPath.
The code itself looks something like this. Get the pointer position, get the arrow, use the arrow to create the path, and then use our canvas context to test whether the point is in the path. 
The browser is doing our work for us for free—and in C++ too! If we weren't using canvas to render, we could still do this work with an off-screen canvas, where we'd use an un-mounted canvas just for this kind of calculation. developer.mozilla.org/en-US/docs/Web…
Arrows! 🏹
• • •
Missing some Tweet in this thread? You can try to
force a refresh
