[Proyecto] Código diseñando con el mouse

Así me quedó el código del ejercicio de diseñando con el mouse, como hicieron ustedes?

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

<script>
    var pantalla = document.querySelector('canvas');
    var pincel = pantalla.getContext('2d');

    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 600, 400);
    var coloresCuadrados = ["red","green","blue"]
    var puedoDibujar = false;
    var sumaAltura;
    var numeroColoresCua = 2;

    function cuadrados() {
        var sumaAltura = 0;
        for(var cua = 0; cua < coloresCuadrados.length; cua++) {
            pincel.fillStyle = coloresCuadrados[cua];
            pincel.fillRect(0 + sumaAltura,0,50,50);
            sumaAltura = sumaAltura + 50;
        }
    }
cuadrados();

    function elegirColor(evento) {
            var x = evento.pageX - pantalla.offsetLeft;
            var y = evento.pageY - pantalla.offsetTop;
            if (x < 50 && y < 50) {
                numeroColoresCua = 0;
                deshabilitarDibujar();
            }
            if (x >= 51 && x < 100 && y < 50) {
                numeroColoresCua = 1;
                deshabilitarDibujar();
            }
            if (x >= 101 && x <= 150 && y < 50) {
                numeroColoresCua = 2;
                deshabilitarDibujar();

            }

    }

    pantalla.onclick = elegirColor;

    function dibujarCirculo(evento) {
            var x = evento.pageX - pantalla.offsetLeft;
            var y = evento.pageY - pantalla.offsetTop;
            if(x <= 150 && y <= 50) {
            puedoDibujar = false;
            }   
            if(puedoDibujar) {
                var x = evento.pageX - pantalla.offsetLeft;
                var y = evento.pageY - pantalla.offsetTop;
                pincel.fillStyle = coloresCuadrados[numeroColoresCua];
                pincel.beginPath();
                pincel.arc(x, y, 5, 0, 2 * 3.14);
                pincel.fill();
            }

    }

    pantalla.onmousemove = dibujarCirculo;

    function habilitarDibujar() {

        puedoDibujar = true;
    }

    function deshabilitarDibujar() {
        puedoDibujar = false;
    }

    pantalla.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;

</script>