EJERCICIO DE DISENHANDO CON MOUSE

Hola que tal, aqui les muestro mi codigo, se que no es una buena logica, pero pude hacerlo, me fue dificil ordenar mis ideas para poder realizar el ejercicio.

<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 lado = 50;

    var colorPresionado;

    var puedoDibujar = false;

    function dibujarCirculo(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 dibujarCuadrado(x, y, color) {
        pincel.fillStyle = color;
        pincel.fillRect(x, y, lado, lado);
    }



    pantalla.onmousemove = dibujarCirculo;

    function habilitarDibujar() {

        puedoDibujar = true;
    }

    function deshabilitarDibujar() {

        puedoDibujar = false;
    }

    pantalla.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;

    function disenharPaletasColores() {

        dibujarCuadrado(0, 0, "red");
        dibujarCuadrado(50, 0, "green");
        dibujarCuadrado(100, 0, "blue");
    }

    function cambiarColor(evento) {
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;

        if(x<lado && y<lado){
            color = "red";
            console.log("Hola soy rojo");
        }else if((x > lado )&&(x<lado+50)&&(y<lado)){
            color = "green";
            console.log("Hola soy verde");
        }else if((x > lado )&&(x<lado+100)&&y<lado){
            color = "blue";
            console.log("Hola soy azul");
        }
    }

    pantalla.onclick = cambiarColor;
    disenharPaletasColores();

</script>