// Step 1: Define the elements and their positions
const elements = [
  { x: 50, y: 50, width: 100, height: 100 },
  { x: 200, y: 200, width: 150, height: 150 },
  // Add more elements as needed
];

// Step 2: Add event listener to the canvas
const canvas = document.getElementById('canvas');
canvas.addEventListener('mousemove', handleMouseMove);

// Step 3: Event handler function
function handleMouseMove(event) {
  const mouseX = event.clientX - canvas.offsetLeft;
  const mouseY = event.clientY - canvas.offsetTop;

  // Step 5: Iterate through elements
  for (const element of elements) {
    // Step 6: Check if mouse coordinates are within element's boundaries
    if (
      mouseX >= element.x &&
      mouseX <= element.x + element.width &&
      mouseY >= element.y &&
      mouseY <= element.y + element.height
    ) {
      // Step 7: Mouse is hovering over the element
      console.log('Mouse is hovering over an element!');
      // Perform any desired action here
    }
  }
}