Question

I’m working on a script to do several things. In a nutshell, here’s what it needs to do:

1. Read the coordinates from a page and be able to pop up a box within a specific region.
2. The pop up box needs to be able to follow the mouse around.
3. I need to be able to modify the box to look however I want (I was thinking a div container that is set to display:hidden, and then the JS sets the display to block when your mouse is in the specified region).
4. I need to be able to modify it easily (aka, add and subtract objects and coordinate sets)

I was originally using HTML maps (), and that worked great, until I resized my browser, and the div that I had following the mouse no longer lined up correctly. Something about the offset not working correctly, and I couldn’t get it to work correctly, so I switched to an HTML canvas.
And now I’ve got the coordinates in the canvas correctly, I just can’t figure out how to get something to pop up when the mouse is inside of a certain section. Here’s my current code:

function drawLines(numbers, color){
//poly [x,y, x,y, x,y.....];
var poly=numbers;
context.fillStyle = color;
context.beginPath();
context.moveTo(poly[0], poly[1]);
for( item=2 ; item < poly.length-1 ; item+=2 )
    {context.lineTo( poly[item] , poly[item+1] )};
context.closePath();
context.fill();

}

I’ve got each region inside of an array, which I then pass to the function one by one. The color was a test, and I can easily get each region to show up as a specified color, but that doesn’t solve my problem. Any ideas? Thanks!

Answer 1

Seems strange to jump to canvas over a style issue, but ignoring that…

You could bind mousemove events on the canvas element and then do hit tests on your region to see if the mouse is inside the region.

Doing the hit test efficiently might be tricky depending on the number of regions your testing, but it’s definitely doable.

The canvas is just like any other block level element, so the same events apply and are bound in the same way.

Here’s one example of mouse events interacting with canvas. In this example, the events are bound to the document, but similar ideas apply.

http://dev.opera.com/articles/view/blob-sallad-canvas-tag-and-javascrip/