Collisions

Your browser does not support the canvas element.
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #c0c0c0;">Your browser does not support the canvas element.</canvas>

<script>

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var a = Math.floor(400*Math.random());
var b = Math.floor(400*Math.random());
var c = Math.floor(400*Math.random());
var d = Math.floor(400*Math.random());
var f1 = '#0FF000'
var f2 = '#FF0000'
var dx = (a + 100) - (c + 100);
var dy = (b + 100) - (d + 100);
var distance = Math.sqrt(dx * dx + dy * dy);

if (distance < 200) {
var f1 = '#FF0000'
} else {
var f1 = '#0FF000'
    }

ctx.beginPath();
ctx.fillStyle = f1;
ctx.arc(a,b,100,0,2*Math.PI);
ctx.fill();

ctx.beginPath();
ctx.fillStyle = f1;
ctx.arc(c,d,100,0,2*Math.PI);
ctx.fill();

</script>