Starting and ending point to images

I'm trying to set a starting and ending point to images. So I have my canvas and my images, when I drop my images into the canvas I want that when I hover at the starting/ending point it lights a little red circle which means that I can create a connection with other images. For example: 1) Drag the image. 2) Drop the image inside the canvas. 3) Hover to the starting/ending point, and it lights up in a little red dot.

As you can see, the red dots that only appear on hover. Another problem, but if you fix the first one is cool, the images don't follow the grill (squares). Here is an example of html/js

const resistor = document.getElementById('component_circuit_resistor');
const condensator = document.getElementById('component_circuit_condensator');
const tranistor = document.getElementById('component_circuit_tranistor');
const alimentator = document.getElementById('component_circuit_alimentator');
const circuit = document.getElementById('components_circuit');
const back_button = document.getElementById('back-button');
const clear_button = document.getElementById('clear-button');
const draggable = document.querySelectorAll('.draggable');
const container = document.querySelectorAll('.container');
const canvas = document.getElementById('canvas');
const foward_button = document.getElementById('foward-button');


/** EDIT START */
const draggableImages = document.querySelectorAll('img[draggable]');

for (let i = 0; i < draggableImages.length; i++)
  draggableImages[i].ondragstart = (ev) => {
    ev.dataTransfer.setData('text/plain', i.toString());
  };

canvas.ondragover = (ev) => ev.preventDefault(); // IMPORTANT

const orderStack = [];
const deletedOrderStack = [];

const drawnImageData = [];
const deletedImageData = [];

canvas.ondrop = (ev) => {
  const index = parseInt(ev.dataTransfer.getData('text/plain'));
  const img = draggableImages[index];
  const x = ev.clientX - canvas.offsetLeft - img.width / 2;
  const y = ev.clientY - canvas.offsetTop - img.height / 2;
  const squareSize = 10; // adjust this to match the size of your squares
  const maxSize = 75; // maximum size of the image
  const aspectRatio = img.width / img.height;
  let width = maxSize;
  let height = maxSize / aspectRatio;
  if (height > maxSize) {
    height = maxSize;
    width = height * aspectRatio;
  }
  const snappedX = Math.round(x / squareSize) * squareSize;
  const snappedY = Math.round(y / squareSize) * squareSize;
  ctx.drawImage(img, snappedX, snappedY, width, height);
  drawnImageData.push(ctx.getImageData(0, 0, canvas.width, canvas.height));
  orderStack.push(1);
  deletedImageData.length = 0;
  deletedOrderStack.length = 0;
  back_button.disabled = false;
  back_button.style.cursor = 'pointer';
  clear_button.disabled = false;
  clear_button.style.cursor = 'pointer';
  foward_button.disabled = true;
  foward_button.style.cursor = 'not-allowed';
  return false;
};

clear_button.disabled = true;
clear_button.style.cursor = 'not-allowed';
foward_button.disabled = true;
foward_button.style.cursor = 'not-allowed';
back_button.disabled = true;
back_button.style.cursor = 'not-allowed';
/** EDIT END */

canvas.width = 1900;

canvas.height = 1000;
canvas.style.backgroundColor = 'white';
circuit.appendChild(canvas);
canvas.style.borderRadius = '10px';
canvas.style.marginLeft = 'auto';
canvas.style.marginRight = 'auto';
canvas.style.display = 'block';
const ctx = canvas.getContext('2d');

//const circles = [];
const lines = [];
const lines_c = [];
var deletedLines = [];

function drawSquares() {
  const squareSize = 10;
  const numColumns = Math.floor(canvas.width / squareSize);
  const numRows = Math.floor(canvas.height / squareSize);

  ctx.fillStyle = "#FAF9F9";
  ctx.strokeStyle = "#F4F1F0";
  ctx.lineWidth = 1;

  for (let i = 0; i < numColumns; i++) {
    for (let j = 0; j < numRows; j++) {
      const x = i * squareSize;
      const y = j * squareSize;

      if (i % 10 === 0 && j % 10 === 0) {
        ctx.lineWidth = 2.6;
        ctx.fillStyle = "#F1ECEB";
        ctx.strokeStyle = "#E6E0DE"; // set the stroke color to a darker shade
        ctx.strokeRect(x, y, squareSize * 10, squareSize * 10);
        ctx.fillStyle = "#F4F1F0";
        ctx.strokeStyle = "#F4F1F0"; // reset the stroke color
        ctx.lineWidth = 1;
      } else {
        ctx.strokeRect(x, y, squareSize, squareSize);
      }
    }
  }
}

drawSquares();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
    <link rel="stylesheet" href="style.css">
    <!-- <title>From Circuit to Breadboard</title> -->
</head>
<body>
    <div class="container">
        <div class="components">
            <div id="components_circuit">
                <h3 id ="h3_componenti_circuit">Componenti:</h3>
                    <ul id="components_circuit_border">
                        <li><img id ="component_circuit_resistor" src="https://www.elprocus.com/wp-content/uploads/Resistor-Symbol-768x288.png" height="50" draggable="true"></li>
                        <br><br>
                        <li><img id = "component_circuit_condensator" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Capacitor_Symbol_alternative.svg/1280px-Capacitor_Symbol_alternative.svg.png" height="50" draggable="true"></li>
                        <br><br>
                        <li><img id="component_circuit_transistor" src="images/circuit_transistor.png" height="50" draggable="true"></li>
                        <br><br>
                        <li><img id="component_circuit_alimentator" src="images/circuit_alimentator.png" height="50" draggable="true"></li>
                    </ul>
                <div class = "elementi_disegno">
                    <h1 id ="h1_disegna">Disegna il tuo circuito!</h1>
                <button id="back-button">Indietro
                    <span class="material-symbols-outlined">undo</span>
                </button>
                <button id="foward-button">Avanti
                    <span class="material-symbols-outlined">redo</span>
                </button>
                <button id="clear-button">Clear All
                    <span class="material-symbols-outlined">delete</span>
                </button>
                <canvas id = "canvas" class = "dropzone"></canvas>
                </div>
            </div>
    
    <script src="script.js"></script>
</body>
</html>

The code provided, maybe that doesn't work on stackoverflow, try it locally. And if you use other images please provide the link.

from Starting and ending point to images