les dejo mi codigo por si a alguien le sirve para verlo de otra forma
<canvas width="600" height="400"> </canvas>
<script >
var pantalla =document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
// Crear un array con los colores disponibles
var colores = ["blue", "red", "green"];
// Inicializar la variable color en 0
var color = 0;
// Función para dibujar un círculo
function dibujarCirculo (evento){
// Obtener las coordenadas x e y del mouse
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY- pantalla.offsetTop;
// Establecer el color de relleno del círculo
pincel.fillStyle = colores[color];
// Iniciar una nueva ruta
pincel.beginPath();
// Dibujar el círculo
pincel.arc(x, y, 10, 0, 2*3.14);
// Rellenar el círculo
pincel.fill();
}
// Función para alterar el color del círculo
function alterarColor(){
// Incrementar la variable color
color++;
// Si se ha llegado al final del array de colores, volver al primer elemento
if(color>=colores.length){
color=0;
}
// Evitar que se muestre el menú de contexto al hacer clic derecho
return false;
}
// Asignar la función dibujarCirculo al evento click del canvas
pantalla.onclick = dibujarCirculo;
// Asignar la función alterarColor al evento contextmenu del canvas
pantalla.oncontextmenu = alterarColor;
</script>