Disegna il tuo circuito!

You can keep track of the x and y of the image in the array and iterate over the array to check if the mouse pointer is some distance away from any object, if so then draw a circle and in the remote image the connection is if you plan to add more than 2 The image shown (don't know about locally hosted images) and the start and end points are different, then at the midpoint of both sides you will need to use the current settings based on the image change value, you can hardcode it, here is mine accomplish:

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'); let images = []; /** 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); images.push({ img, x: snappedX, y: snappedY, width, height }); // Add the image and its position to the images array }; 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(); // Add a mousemove event to the canvas to show the red dot const redDotRadius = 5; // The radius of the red dots const hoverDistance = 10; // The distance from a point at which to show the dot canvas.onmousemove = (ev) => { const mouseX = ev.clientX - canvas.offsetLeft; const mouseY = ev.clientY - canvas.offsetTop; // Clear the canvas and redraw everything ctx.clearRect(0, 0, canvas.width, canvas.height); drawSquares(); for (let i = 0; i < images.length; i++) { let image = images[i]; ctx.drawImage(image.img, image.x, image.y, image.width, image.height); } // Check if the mouse is near a starting or ending point for (let i = 0; i < images.length; i++) { let image = images[i]; let startX = image.x+5; let startY = image.y + image.height/2; let endX = image.x + image.width -5; let endY = image.y + image.height/2; if (Math.abs(mouseX - startX) < hoverDistance && Math.abs(mouseY - startY) < hoverDistance) { // Near the starting point, draw a red dot ctx.beginPath(); ctx.arc(startX, startY, redDotRadius, 0, 2 * Math.PI, false); ctx.fillStyle = 'red'; ctx.fill(); } else if (Math.abs(mouseX - endX) < hoverDistance && Math.abs(mouseY - endY) < hoverDistance) { // Near the ending point, draw a red dot ctx.beginPath(); ctx.arc(endX, endY, redDotRadius, 0, 2 * Math.PI, false); ctx.fillStyle = 'red'; ctx.fill(); } } };

I didn’t change the html