Minha solução:
<canvas width="600" height="400"></canvas>
<p style="font-weight: bold"></p>
<script>
let p = document.querySelector("p");
let tela = document.querySelector("canvas");
let pincel = tela.getContext("2d");
pincel.fillStyle = "grey";
pincel.fillRect(0, 0, 600, 400);
let cor = ["blue", "red", "green"];
let aux = 0;
desenhaCirculo = (evento) => {
let x = evento.pageX - tela.offsetLeft;
let y = evento.pageY - tela.offsetTop;
let raio;
// altera o tamanho do círculo
evento.shiftKey ? (raio = 30) : (raio = 10);
pincel.fillStyle = cor[aux];
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * Math.PI);
pincel.fill();
p.style.color = cor[aux];
p.innerHTML = cor[aux];
return evento;
};
tela.addEventListener("click", desenhaCirculo);
mudaCor = () => {
aux++;
// Reseta a cor
if (aux == 3) {
aux = 0;
}
return false;
};
tela.oncontextmenu = mudaCor;
</script>