How to quickly get the set of points included in the rectangle?

Question

JavaScript

I'm making a game, pseudo-agar.io. jsfiddle.net/Strukov/cr0m6q57

There are many points (map.eats) - this is the player's food, there can be a large number of them, and the more there are, the more lags. (For example, put 100,000 on line 66).
The thing is that the timer is used to move and draw a map with many points. For each point, the draw function is called, although the hidden points are not actually drawn, iteration time is wasted.

I want to change the algorithm so that only visible points get into the rendering cycle.

Any suggestions for implementation?

I thought to do this:
- Sort the array by X like this:

map.eats.sort( (a,b)=>{if(a.x < b.x) return -1; if(a.x > b.x) return 1; return 0;} );

- Add a collection of links to the same points, and sort them by Y

for(let eat of map.eats)
{
  map.eatsReverse.push(eat);
}
map.eatsReverse.reverse( (a,b)=>{if(a.x > b.x) return -1; if(a.x < b.x) return 1; return 0;} );

- Get visibility area
- By binary search, find points included in visibility by X
- Remove not visible by Y
- Draw

So far I've stumbled on binary search.

Answer 1

Ready implementations in JS
https://blog.mapbox.com/a-dive-into-spatial-search...