[Proyecto] Mi solución

<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 puedoDibujar = false;
        var pageX;
        var pageY;
        var cuadradoX = 0;
        var cuadradoY = 0;
        var colores = ["red", "green", "blue"];
        var color ="red";

        function cambiarColor(evento) {

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

            if (
                x > cuadradoX && x < cuadradoX + 50 && y > cuadradoY && y < cuadradoY + 50
                ) {
                    color = "red";
                } else if (
                x > cuadradoX && x < cuadradoX + 100 && y > cuadradoY && y < cuadradoY + 50
                ) {
                    color = "green";
                } else if (
                x > cuadradoX && x < cuadradoX + 150 && y > cuadradoY && y < cuadradoY + 50
                ) {
                    color = "blue";
                }
        }

        function dibujarCirculos(evento) {

            if(puedoDibujar) {
                var x = evento.pageX - pantalla.offsetLeft;
                var y = evento.pageY - pantalla.offsetTop;
                pincel.fillStyle = color;
                pincel.beginPath();
                pincel.arc(x, y, 5, 0, 2 * 3.14);
                pincel.fill();
            }

        }


        function dibujarCuadro(cuadradoX,cuadradoY,color,cW,cH) {
            pincel.fillStyle = color;
            pincel.beginPath();
            pincel.fillRect(cuadradoX, cuadradoY, cW, cH);
            pincel.fill();

        }

        pantalla.onmousemove = dibujarCirculos;

        function habilitarDibujar() {

            puedoDibujar = true;
        }

        function deshabilitarDibujar() {

            puedoDibujar = false;
        }

        dibujarCuadro(cuadradoX, cuadradoY, "red", 50, 50);
        dibujarCuadro(cuadradoX + 50, cuadradoY, "green", 50, 50);
        dibujarCuadro(100, 0, "blue", 50, 50);

        pantalla.onmousedown = habilitarDibujar;

        pantalla.onmouseup = deshabilitarDibujar;2

        pantalla.onclick = cambiarColor;

    </script>