Tengo rectángulos aleatorios en el lienzo almacenados en una matriz como esta:

 var rectangles = [ {x: 10, y: 10}, {x: 40, y: 50}, {x: 1, y: 70}, {x: 80, y: 5}, {x: 30, y: 60} ];

Ahora quiero etiquetar estos rectángulos según su proximidad al punto de origen (0, 0).

Mi primer pensamiento fue recorrer los ejes x e y en diferentes patrones, un ejemplo sería:

 // 100 is the width and height of the canvas for(var x = 0; x < 100; x++){ for(var y = 0; y < 100; y++){ // "intersects" loops through the array and returns the matching index or -1 if no match if(intersects(rectangles, x, y) > -1){ console.log('Rectangle' + (intersects(rectangles, x, y) + 1)); } } }

El problema que tengo es que, independientemente del patrón del bucle, el resultado no es el esperado.

Mi segundo pensamiento fue dibujar rectángulos hasta el punto de origen (visto en la última imagen) y ordenarlos por el tamaño del rectángulo. Sin embargo, esto (y calcular la distancia de la línea) tampoco produjo el resultado esperado. Esto se puede ver con el rectángulo verde, que está muy cerca de X0, pero debería ser el último.

Por ejemplo, esto debería devolver el mismo resultado:

¿Alguien sabe cómo puedo lograr el resultado de etiquetado correcto? ¡Gracias!