Proyecto Final - Hasta donde me dio mi lógica

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

<script>

    let screen = document.querySelector('canvas');
    let brush = screen.getContext('2d');

    brush.fillStyle = 'grey';
    brush.fillRect(0, 0, 600, 400);

    let red = brush.fillStyle = 'red';
    brush.fillRect(0, 0, 50, 50);

    let green = brush.fillStyle = 'green';
    brush.fillRect(50, 0, 50, 50);

    let blue = brush.fillStyle = 'blue';
    brush.fillRect(100, 0, 50, 50);

    let colorChange = [red, green, blue];
    let actualColor = 0;

    function changeColor(evento){

        actualColor++;
        if(actualColor >= colorChange.length){

            actualColor = 0;

        }

        return false

    }




    let puedoDibujar = false;

    function dibujarCirculo(evento) {

        if(puedoDibujar) {
            let x = evento.pageX - screen.offsetLeft;
            let y = evento.pageY - screen.offsetTop;
            brush.fillStyle = colorChange[actualColor];
            brush.beginPath();
            brush.arc(x, y, 5, 0, 2 * 3.14);
            brush.fill();
        }

    }

    screen.onmousemove = dibujarCirculo;

    function habilitarDibujar() {

        puedoDibujar = true;
    }

    function deshabilitarDibujar() {

        puedoDibujar = false;
    }


    screen.onmousedown = habilitarDibujar;

    screen.onmouseup = deshabilitarDibujar;

    screen.onclick = changeColor;

</script>