What's probably slowing you down is the detection of mouse-object overlap, which is a very general functionality of the browser and therefore is not particularly optimized. Good news is you can optimize that easily yourself. Consider this approach:

  • Render the circles into a canvas. The canvas will be static throughout the interaction. No need to redraw it contents.
  • The detection if a mouse is over a circle is easy to implement on your own. You know the positions of the circle centers, you know the position of the mouse, you know the math. Therefore you can search the circle(s) under mouse cursor yourself.
  • Furthermore, you can utilize e.g. quadtree structure to organize the circle centers into a hierarchical structure to hugely speed up the search process.
  • Instead of changing CSS of a circle under mouse cursor you can just draw another circle on top of it. Do this in a separate div over the canvas so that the underlying canvas doesn't need to be redrawn.

Related Query