Detect mouseover of certain points within an HTML canvas?

by

You could handle the mousemove event and get the x,y coordinates from the event. Then you’ll probably have to iterate over all your paths to test if the point is over the path. I had a similar problem that might have some code you could use.

Looping over things in this way can be slow, especially on IE. One way you could potentially speed it up – and this is a hack, but it would be quite effective – would be to change the color that each path is drawn with so that it is not noticeable by humans but so that each path is drawn in a different color. Have a table to look up colors to paths and just look up the color of the pixel under the mouse.

More Related Contents:

  1. Using HTML5/Canvas/JavaScript to take in-browser screenshots
  2. Capture HTML Canvas as gif/jpg/png/pdf?
  3. Resizing an image in an HTML5 canvas
  4. Get pixel color from canvas, on mousemove
  5. Zoom Canvas to Mouse Cursor
  6. Zoom in on a point (using scale and translate)
  7. how to save canvas as png image?
  8. Does HTML5/Canvas Support Double Buffering?
  9. Canvas image crossplatform insecure error
  10. HTML5 Canvas camera/viewport – how to actually do it?
  11. I want to do animation of an object along a particular path
  12. Disable arrow key scrolling in users browser
  13. How to resize html canvas element?
  14. Draw border around nontransparent part of image on canvas
  15. How do I rotate a single object on an html 5 canvas?
  16. How can I animate a progressive drawing of svg path?
  17. How to determine the intended frame-rate on an html video element
  18. Saving canvas to image via canvas.toDataURL results in black rectangle
  19. Canvas Draw Image issue on firefox, works well in chrome
  20. Resize a Base-64 image in JavaScript without using canvas
  21. clearRect not working
  22. canvas getContext(“2d”) returns null
  23. clearing circular regions from HTML5 Canvas
  24. Why does my canvas go blank after converting to image?
  25. Body animation isn’t smooth
  26. How to implement SVG’s preserveAspectRatio=”xMinYMin slice” for canvas drawImage method.
  27. Scaling an image to fit on canvas
  28. Update HTML5 canvas rectangle on hover?
  29. how to animate drawing lines on canvas
  30. True Isometric Projection with HTML5 Canvas

Leave a Comment