Minha solução pro exercício.

<canvas width="600" height="400"></canvas> 

<script>

var tela = document.querySelector("canvas"); // criando variável tela
var pincel = tela.getContext("2d"); // criando a variável responsável por "desenhar"
var cores = ["blue","green","red"]; // lista de cores
var contador = 0; // variável auxiliar pra mudar as cores 

pincel.fillStyle = "lightcoral"; // cor da tela
pincel.fillRect(0,0,600,400); //desenhando a tela

function desenhaBola(evento){

    var x = event.pageX - tela.offsetLeft; //obtendo coordenada X do click
    var y = event.pageY - tela.offsetTop; //obtendo a coordenada Y do click

    pincel.beginPath(); //"tirando o pincel da caixa"
    pincel.fillStyle = cores[contador]; //escolhendo a cor do pincel usando a lista e a variável auxiliar
    pincel.arc(x,y,10,0,2*3.14); //desenhando a bola
    pincel.fill(); //preenchendo o desenho
}

function mudaCor(evento){

    contador ++

    if(contador>2){

        contador = 0;
    }
    console.log(contador);
    return false;

}

tela.onclick = desenhaBola;
tela.oncontextmenu = mudaCor;