Uma cor para cada clique do mouse

Olá! Tentei implementar um código com o que aprendi até agora com o curso... (Função, variável, for, while)mas infelizmente não tive sucesso. Meu objetivo era que uma bolinha de cor diferente aparecesse conforme determinado clique no mouse. Daí comecei a pesquisar sobre eventos com mouse e acabei encontrando um caminho para aquilo que objetivara, com essa pesquisa aprendi sobre o evento "ondblclick - para duplo clique " e depois sobre, switch e onmousedown. Segue o código.

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

<script>
    var screen = document.querySelector("canvas");
    var brush = screen.getContext("2d");

    brush.fillStyle = "lightgrey";
    brush.fillRect(0, 0, 600, 400);

    var colors = ["grey", "red", "pink"];
    var currentColor = 0;


    function drawCircle(event) {
        brush.fillStyle = colors[currentColor];
        brush.beginPath();
        brush.arc(x, y, 10, 0, 2 * 3.14);
        brush.fill();
    }

    function display2(event) {
        switch (event.which) {
            case 1:
                var x = event.pageX - screen.offsetLeft;
                var y = event.pageY - screen.offsetTop;

                brush.fillStyle = "blue";
                brush.beginPath();
                brush.arc(x, y, 10, 0, 2 * 3.14);
                brush.fill();
                break;
            case 2:
                var x = event.pageX - screen.offsetLeft;
                var y = event.pageY - screen.offsetTop;

                brush.fillStyle = "pink";
                brush.beginPath();
                brush.arc(x, y, 10, 0, 2 * 3.14);
                brush.fill();
                break;
            case 3:
                var x = event.pageX - screen.offsetLeft;
                var y = event.pageY - screen.offsetTop;

                brush.fillStyle = "green";
                brush.beginPath();
                brush.arc(x, y, 10, 0, 2 * 3.14);
                brush.fill();
            default:
                var x = event.pageX - screen.offsetLeft;
                var y = event.pageY - screen.offsetTop;

                brush.fillStyle = "green";
                brush.beginPath();
                brush.arc(x, y, 10, 0, 2 * 3.14);
                brush.fill();
        }
    }
    window.onmousedown = display2;


</script>

A minha dúvida é: Existe alguma forma de implementar essas ações com while ou for? Abraços!;)