Tengo una variedad de objetos. Cada objeto representa un cuadrado que se dibuja en la pantalla ( x/y para ubicación y s para tamaño, c para color).

 const elements = [ { x: 0, y: 0, s: 20, c: 'red' }, { x: 110, y: 55, s: 7, c: 'blue' }, { x: 250, y: 250, s: 50, c: 'green' }, { x: 400, y: 400, s: 30, c: 'pink' } ]

Así es como se verían en un lienzo o solo en la página (realmente no tiene que ser un lienzo):

Ahora imagine que tengo un cuadrado negro de 25x25px que se representa en lugar de mi cursor. Cuando muevo el cursor sobre uno de los cuadrados coloridos, de modo que el cuadrado esté completamente cubierto, mi puntero los "come", por lo que desaparecen de la matriz y el lienzo. ¡Al igual que comer comida en la buena serpiente vieja!

const pointer = { x: event.pageX, y: event.pageY, s: 25, c: 'black' }

Así que haciendo esto:

Quitaría elements[1] aka { x: 110, y: 55, s: 7, c: 'blue' } . Como mi cursor cubre todo el cuadrado azul. Obviamente no puedo comerme el cuadrado verde ya que es más grande que mi cursor.

Mi pregunta es: ¿cuál es el mejor algoritmo para encontrar qué elementos en mi matriz de elements están completamente cubiertos por el cursor considerando que podría tener a lot cuadrados coloridos (digamos más de 1000)?

He estado tratando de filtrar el elemento cubierto de esta manera:

let squareCovered = elements.filter(square => square.x == pointer.x && square.y == pointer.y);

Pero esto no es lo suficientemente bueno ya que no toma tamaños de cuadrados y cursores, por lo que siempre tengo que colocar el cursor exactamente en el centro del cuadrado. Cuando trato de introducir tamaños en este método de filtrado, mi proyecto se vuelve muy lento muy rápido.

¿Alguna pista? ¿Existe un algoritmo eficaz para esto?

Siéntase libre de editar el título de la pregunta, no tengo idea de lo que realmente estoy pidiendo.