How can I determine the shortest distance between two circles drawn on a canvas in JavaScript?

I want to find the shortest distances between the pink circles, for any circle at any location, and the yellow circle for a project, but I have no idea how to do it. If you have a solution with squares, I want to hear it. I have seen that you can find the distance between corner points of different squares, but that distance does not always tell you the shortest distance between two squares. This is my code:

//Función que se asegura de ejecutar el código cuando toda la página ha cargado:
window.addEventListener('load',()=>{
    // Consiguiendo el nodo que representa el elemento <canvas>
    var canvas = document.getElementById('lienzo');
    //  Código que consigue el contexto de representación:
    var ctx = canvas.getContext('2d');
    
    
    ctx.fillStyle = 'rgb(500, 10, 1400)';

    ctx.beginPath();
    ctx.arc(75, 75, 50, 0, Math.PI * 2, true);
    ctx.fill();

    ctx.beginPath();
    ctx.arc(200, 75, 50, 0, Math.PI * 2, true);
    ctx.fill();

    ctx.fillStyle = 'rgb(350, 220, 0)';
    ctx.beginPath();
    ctx.arc(500, 500, 50, 0, Math.PI * 2, true);
    ctx.fill();

    });

body{
    text-align: center;
    margin: 0;
    padding: 0;
    background-color: #7c2515; 
}
#lienzo{ 
    border: 10px solid black; 
    width: 40%;
    
}

<!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">
    <title>Selección Natural</title>
    <link rel="stylesheet" href="estilo.css">
    <script src="app.js"></script>
    <link rel="shortcut icon" href="Darwin.png">
</head>
<body>
    <canvas id = "lienzo" width="800px" height="800px">Tu navegador no admite el tag canvas.</canvas>
</body>
</html>

Solution

You can use a couple methods to get there. First you will want to have you shapes as objects so you can access the x and y values. In the snippet below I used a class for this.

You will then need to find the difference between the x coordinates of the two objects and the difference between the y coordinates.

let distX = circle1.x - circle2.x
let distY = circle1.y - circle2.y

Now you can use Pythagorean Theorem to get the distance between the two points.

Math.sqrt(distX*distX+distY*distY)

Keep in mind this is referenced from the center of the circle so you need to subtract the radius of each circle in order to determine if the overlap.

Math.sqrt(distX*distX+distY*distY) - (circle1.r + circle2.r)

Now in javascript there is a method called Math.hypot which does the same thing

Math.hypot(distX, distY) - (circle1.r + circle2.r)

Either one of those will work. In the snippet below I added a third circle that shows a distance of 0.

var canvas = document.getElementById("lienzo");
var ctx = canvas.getContext("2d");

class Circle {
  constructor(x, y, r, c) {
    this.x = x;
    this.y = y;
    this.r = r;
    this.c = c;
  }
  draw() {
    ctx.beginPath();
    ctx.fillStyle = this.c;
    ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, true);
    ctx.fill();
  }
}
let circles = [];
let circle1 = circles.push(new Circle(75, 75, 50, "rgb(500, 10, 1400)"));
let circle2 = circles.push(new Circle(200, 75, 50, "rgb(500, 10, 1400)"));
let circle3 = circles.push(new Circle(500, 400, 50, "rgb(500, 10, 1400)"));
let yellowCircle = new Circle(500, 500, 50, "rgb(350, 220, 0)");

circles.map((x) => x.draw());
yellowCircle.draw();

function distance(yellow) {
  for (let i = 0; i < circles.length; i++) {
    let distX = yellow.x - circles[i].x;
    let distY = yellow.y - circles[i].y;
    let dist = Math.hypot(distX, distY) - (yellow.r + circles[i].r); 
    //Math.hypot can be substituted for the following
    //let dist = Math.sqrt(distX*distX+distY*distY) - (yellow.r + circles[i].r); 
    console.log("The distance is "+dist)
  }
};
distance(yellowCircle);

body{
    text-align: center;
    margin: 0;
    padding: 0;
    background-color: #7c2515; 
}
#lienzo{ 
    border: 10px solid black; 
    width: 40%;
    
}

<!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">
    <title>Selección Natural</title>
    <link rel="stylesheet" href="estilo.css">
    <script src="app.js"></script>
    <link rel="shortcut icon" href="Darwin.png">
</head>
<body>
    <canvas id = "lienzo" width="800px" height="800px">Tu navegador no admite el tag canvas.</canvas>
</body>
</html>