The RGB canvas.

rbgcanvas.html

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

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

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

var gameLooping, canvas, context, mouseX, mouseY, PI2, state, color, d, r, g, b;

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

function setup () {
	canvas = document.getElementById('canvasElement');
	canvas.width = canvas.height = 700; 
	canvas.addEventListener('mousemove', mousemoveHandler);
	context = canvas.getContext('2d'); PI2 = 2 * Math.PI;
	state = Math.floor(Math.random() * 3);
	color = Math.floor(Math.random() * 255);
	d = 255 / canvas.width;

	if (state === 0) r = color;
	if (state === 1) g = color;
	if (state === 2) b = color;
}

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

function loop () {
	markPosition();
}

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

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

function markPosition () {

	switch (state) {
		case 0:
			g = parseInt(mouseX * d);
			b = parseInt(mouseY * d);
			break;
		case 1:
			r = parseInt(mouseX * d);
			b = parseInt(mouseY * d);
			break;
		case 2:
			r = parseInt(mouseX * d);
			g = parseInt(mouseY * d);
			break;
	}

	var rgb = 'rgb(' + r + ', ' + g + ', ' + b + ')';

	context.beginPath();
	context.fillStyle = rgb;
	context.strokeStyle = rgb;
	context.arc(mouseX, mouseY, 5, 0, PI2);
	context.stroke();
	context.fill();
}

</script>