I have a pencil tool that I can use to draw a scribble on a canvas. I save this as a List<Line>. Let's say it has a size of like 1000.
I'd like to have hover text displayed on this scribble whenever the mouse is within 5 pixels of any line. What's the most efficient way of doing this? I have two ideas:
1) write a function on parent canvas mouse move that computes the shortest distance to each line, and if the shortest distance is within 5 pixels, display hover text. So, 1000 line distance checks on the parent's mousemove event.
2) add a transparent polygon that encloses the 5 pixel distance around each line, and add a mouse handler to each of these polygons that displays the hover text if the mouse is over it. So, 1000 extra polygons and 1000 extra onmousemove event handlers
Edit: I bet I could make #1 faster by adding a sort of index. I could divide the x coordinates of the page up into blocks every 30 pixels and the same with the y coordinates, and then add each line to whatever block(s) it falls into, and onmousemove only check lines that match the corresponding blocks.
