JSFiddle - React, Tailwind, and code Playground

by Ben Watts

HTML

<canvas id="myCanvas" width="400" height="400"></canvas>

JavaScript

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var circle1 = {
  radius: 120,
  x:150,
  y:150
};
var circle2 = {
  radius: 75,
  x:220,
  y:125
};

ctx.beginPath();
ctx.arc(circle1.x, circle1.y, circle1.radius, 0, 2 * Math.PI, false);
ctx.fillStyle = 'green';
ctx.fill();
ctx.lineWidth = 1;
ctx.strokeStyle = '#000';
ctx.stroke();

ctx.beginPath();
ctx.arc(circle2.x, circle2.y, circle2.radius, 0, 2 * Math.PI, false);
ctx.fillStyle = 'red';
ctx.fill();
ctx.lineWidth = 1;
ctx.strokeStyle = '#000';
ctx.stroke();

var dx = circle1.x - circle2.x;
var dy = circle1.y - circle2.y;
var distance = Math.sqrt(dx * dx + dy * dy);

if (distance < circle1.radius + circle2.radius) {
  alert("Collision");
}