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

<script>

var canvas = document.getElementById("myCanvas2");
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 r = Math.floor(95*Math.random())+5;
var f1 = '#0FF000'
var f2 = '#FF0000'
var dx = (a + r) - (c + r);
var dy = (b + r) - (d + r);
var distance = Math.sqrt(dx * dx + dy * dy);

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

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

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

</script>