How check collision with javascript?

See more:

Javascript

CSS

HTML

collisions

Hi I want check collision between Div and Img tag with java Script. I have Div with id name is MainDiv. in this div there is too many img tag with position absolute and deferent width and height. aslo there is div id name selection. the scenario is when user start draw rectangle (selection) by left click in the mainDiv if the selection has collision img tag in the mainDiv the selection background color turn too red and if not remain green.

What I have tried:

I write this JavaScript right now:

const MainDiv = document.getElementById('MainDiv');
 const selection = document.getElementById('selection');
 const dimensionsInfo = document.getElementById('dimensionsInfo');
 let startX, startY, startOffsetX, startOffsetY;
 let width,height;
 
     MainDiv.addEventListener('mousedown', startDrawing);
     MainDiv.addEventListener('mousemove', drawRectangle);
     MainDiv.addEventListener('mouseup', stopDrawing);
 

 function startDrawing(event) {

     if (getComputedStyle(event.target).cursor === 'pointer') {
         return;
     }

     startX = event.clientX;
     startY = event.clientY;
     startOffsetX = event.offsetX;
     startOffsetY = event.offsetY;

     selection.style.display = 'block';
     dimensionsInfo.style.display = 'block';
 }

 function drawRectangle(event) {
     if (startX && startY) {

         const MainDivOffsetX = MainDiv.getBoundingClientRect().left;
         const MainDivEndDrawX = MainDiv.offsetWidth + MainDivOffsetX;

         const MainDivOffsetY = MainDiv.getBoundingClientRect().top;
         const MainDivEndDrawY = MainDiv.offsetHeight + MainDivOffsetY;

         if (event.clientX >= MainDivOffsetX && event.clientX <= MainDivEndDrawX) {
             width = (event.clientX - startX); 
         }

         if (event.clientY >= MainDivOffsetY && event.clientY <= MainDivEndDrawY) {
             height = (event.clientY - startY);
         }

        
         const area = Math.abs(width * height);
         const sum = Math.abs(area * 100).toLocaleString();


         selection.style.width = Math.abs(width) + 'px';
         selection.style.height = Math.abs(height) + 'px';
         selection.style.left = width < 0 ? event.clientX + 'px' : startX + 'px';
         selection.style.top = height < 0 ? event.clientY + 'px' : startY + 'px';

         const startAdsX = startX < event.clientX ? startOffsetX : startOffsetX - Math.abs(width);
         const startAdsY = startY < event.clientY ? startOffsetY : startOffsetY - Math.abs(height);

         dimensionsInfo.style.left = event.clientX + 'px';
         dimensionsInfo.style.top = event.clientY + 'px';



         const targetElement = document.elementsFromPoint(event.clientX, event.clientY);
         let intersectsWithImage = false;

         for (let i = 0; i < targetElement.length; i++) {
             if (targetElement[i].tagName === 'IMG') {
                 intersectsWithImage = true;
             }
         }
         if (intersectsWithImage === true) {
             selection.style.backgroundColor = 'rgba(255, 127, 127, 0.3)';

         }
         else{
             selection.style.backgroundColor = 'rgba(144, 238, 144, 0.3)';
        

         }
         
         
     }
 }

in this code I use document.elementsFromPoint to check if the cursor position in image tag or not. but in this way the color only turn red when cursor in the img and if the curson outside but the collision is occurred the color is remain green. also I do not want use queryselectorsall because I have too many img tag in mainDiv and if I use it take very processor power. I try this too:

let targetElement;
   for (let x = startAdsX; x <= startAdsX + width; x++) {
       for (let y = startAdsY; y <= startAdsY + height; y++) {
           targetElement = document.elementsFromPoint(x, y);
           for (let i = 0; i < targetElement.length; i++) {
               if (targetElement[i].tagName === 'img') {
               intersectsWithImage = true;
                 }
             }
}
}

in this way I get all the point of selection area and compare for collision. but in this way there is too many process and system is getting lag. So how to fix this?