Intersection of the several color circles.

colorentersection.html

<canvas id="canvasElement" style="border: 1px solid black;"></canvas>
<script>

setup(); gameLooping = setInterval(loop, 0);

////////////////////////////////////////////////////////////

var gameLooping, canvas, context, mouseX, mouseY, PI2, circleR, circleB, circleG, mouseColor;

////////////////////////////////////////////////////////////

function setup () {
	canvas = document.getElementById('canvasElement');
	context = canvas.getContext('2d');
	canvas.width = canvas.height = 700; PI2 = Math.PI * 2;
	document.addEventListener('mousemove', mousemoveHandler);
	document.addEventListener('click', clickHandler);

	circleR = {x: 200, y: 200};
	circleG = {x: 400, y: 200};
	circleB = {x: 300, y: 300};
	mouseColor = 'rgba(255, 0, 0, 0.3)';
}

////////////////////////////////////////////////////////////

function loop () {
	clearCanvas();
	drawCircles();
	drawMouseCircle();

	messageBar();
}

////////////////////////////////////////////////////////////

function messageBar () {
	context.fillStyle = 'black';
	context.font = '20pt Verdana';
	context.fillText('Click for the next color.', 10, 20);
}

function drawMouseCircle () {
	context.beginPath();
	context.arc(mouseX, mouseY, 50, 0, PI2);
	context.lineWidth = 0;
	context.fillStyle = mouseColor;
	context.fill();
}

function clearCanvas () {
	canvas.width = canvas.height;
}

function drawCircles () {
	context.beginPath();
	context.arc(circleR.x, circleR.y, 50, 0, PI2);
	context.lineWidth = 0;
	context.fillStyle = 'rgba(255, 0, 0, 0.3)';
	context.fill();

	context.beginPath();
	context.arc(circleG.x, circleG.y, 50, 0, PI2);
	context.lineWidth = 0;
	context.fillStyle = 'rgba(0, 255, 0, 0.3)';
	context.fill();

	context.beginPath();
	context.arc(circleB.x, circleB.y, 50, 0, PI2);
	context.lineWidth = 0;
	context.fillStyle = 'rgba(0, 0, 255, 0.3)';
	context.fill();
}

function mousemoveHandler (evt) {
	var rect = canvas.getBoundingClientRect();
	mouseX = evt.clientX - rect.left;
	mouseY = evt.clientY - rect.top;
}

function clickHandler () {
	if (mouseColor === 'rgba(255, 0, 0, 0.3)') return mouseColor = 'rgba(0, 255, 0, 0.3)';
	if (mouseColor === 'rgba(0, 255, 0, 0.3)') return mouseColor = 'rgba(0, 0, 255, 0.3)';
	if (mouseColor === 'rgba(0, 0, 255, 0.3)') return mouseColor = 'rgba(255, 0, 0, 0.3)';
}

</script>