Outra solução

Bom, minha solução ficou um pouco mais verbosa, mas é melhor do que nada kkk

<meta charset="UTF-8">

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

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgrey';
    pincel.fillRect(0,0,600,400);

    function desenhaBolinha(evento) {
        var x = evento.pageX; 
        var y = evento.pageY; 
        pincel.fillStyle = 'blue';
        pincel.beginPath();
        pincel.arc(x,y,10,0,2*Math.PI);
        pincel.fill();
    }

    function desenhaBolinha1(evento) {
        var x = evento.pageX; 
        var y = evento.pageY; 
        pincel.fillStyle = 'red';
        pincel.beginPath();
        pincel.arc(x,y,10,0,2*Math.PI);
        pincel.fill();
    }

    function desenhaBolinha2(evento) {
        var x = evento.pageX; 
        var y = evento.pageY; 
        pincel.fillStyle = 'green';
        pincel.beginPath();
        pincel.arc(x,y,10,0,2*Math.PI);
        pincel.fill();
    }

    tela.onclick = desenhaBolinha;

    function mudaCor() {
        if (tela.onclick == desenhaBolinha){
            tela.onclick = desenhaBolinha1;
        } else if (tela.onclick == desenhaBolinha1){
            tela.onclick = desenhaBolinha2;
        } else {
            tela.onclick = desenhaBolinha;
        }

        return false;    
}

    tela.oncontextmenu = mudaCor;

</script>