Fiz uma usando botões na tela - ficou legalzinho!

<meta charset="UTF-8">

<h1> Clique na tela para desenhar bolinhas </h1> <br> 


<button id="aumenta"> Clique aqui para aumentar o tamanho! </button>
<br><br>
<button id="diminui"> Clique aqui para diminuir o tamanho! </button>
<br><br>
<button id="cor"> Clique aqui para mudar de cor! </button>
<br><br>

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

<script>

    var tela = document.querySelector ('canvas');
    var pincel = tela.getContext ('2d');

    pincel.fillStyle = 'black'
    pincel.fillRect (0,0,600,400);

    var botaoA = document.querySelector ("#aumenta");
    var botaoD = document.querySelector ("#diminui");
    var botaoM = document.querySelector ('#cor');

    var cores = ['purple', 'green','blue','red','yellow', 'lightgreen', 'pink']
    var i = 0;

    var raio = 5;

    function desenhaCirculo (evento) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;

        pincel.fillStyle = cores[i];
        pincel.beginPath ();
        pincel.arc (x,y, raio, 0, 2 * 3.14);
        pincel.fill ()

    }

    function aumentaTamanho ( ) {

        if (raio + 5 <=60) { 

            raio = raio + 5    ;
        }

    }

    function diminuiTamanho ( ) {

        if (raio - 5 >= 5) {
            raio = raio - 5
        } 

    }

    function mudaCor () {


        i++

        if (i >= cores.length) {

            i = 0 ;
        }            
    }

        tela.onclick = desenhaCirculo ;
        botaoA.onclick = aumentaTamanho;
        botaoD.onclick =diminuiTamanho;
        botaoM.onclick = mudaCor; 

</script>