Para saber en que color estas, decidí agregar otro canvas y en esa etiquta solo dibuje un cadrado chiquito
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Click derecho</title>
</head>
<body>
<canvas id="pantalla1" width="600" height="400"> </canvas>
<canvas id="pantalla2" width="600" height="400"> </canvas>
<script>
var colores = ["blue", "red", "green"];
var indicador = 0;
var pantalla1 = document.getElementById("pantalla1");
var pincel1 = pantalla1.getContext("2d");
pincel1.fillStyle = "grey";
pincel1.fillRect(0, 0, 600, 400);
pantalla1.onclick = dibujarCirculo;
pantalla1.oncontextmenu = alterarColor;
dibujarCuadrito();
function alterarColor() {
indicador++;
if (indicador >= colores.length) {
indicador = 0;
}
dibujarCuadrito();
return false;
}
function dibujarCirculo(evento) {
var x = evento.pageX - pantalla1.offsetLeft;
var y = evento.pageY - pantalla1.offsetTop;
pincel1.fillStyle = colores[indicador];
pincel1.beginPath();
pincel1.arc(x, y, 10, 0, 2 * 3.14);
pincel1.fill();
console.log(x + "," + y);
console.log(pantalla1.offsetTop);
console.log(evento.pageY);
}
/* vamos a crear un cuadrito, en donde nos ayudara si ha cambiado de color */
function dibujarCuadrito() {
var pantalla2 = document.getElementById("pantalla2");
var pincel2 = pantalla2.getContext("2d");
pincel2.fillStyle = colores[indicador];
pincel2.fillRect(0, 0, 10, 10);
pincel2.fill();
}
</script>
</body>
</html>
