Propuesta de Diseño de Mouse

Queria compartir mi codigo, me funciono...La verdad es que lo hice con lo aprendido en la ultima aula, solo que como se me ocurrio no hacia las cosas, pero en la parte de definir la logica de los if no me funcionaba asi que tuve que investigar como hacerlo funcionar como ya lo tenia, ojala que les sirva como un ejemplo de atacar un mismo problema

<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 color2 = "blue";

    function dibujarCuadrado(x,y,color){
        pincel.fillStyle = color;
        pincel.fillRect(x,y,50,50);
        return{x: x, y: y};
    }
    var cuadrado1 = dibujarCuadrado(0,0,"red");
    var cuadrado2 = dibujarCuadrado(50,0,"green");
    var cuadrado3 = dibujarCuadrado(100,0,"blue");

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

        if (x >= cuadrado1.x && x <= cuadrado1.x + 50 && y >= cuadrado1.y && y <= cuadrado1.y + 50){
            color2 = "red";
        } else if (x >= cuadrado2.x && x <= cuadrado2.x + 50 && y >= cuadrado2.y && y <= cuadrado2.y + 50){
            color2 = "green";
        } else if (x >= cuadrado3.x && x <= cuadrado3.x + 50 && y >= cuadrado3.y && y <= cuadrado3.y + 50){
            color2 = "blue";
        }
    }

    var puedoDibujar = false;

    function dibujarCirculo(evento) {

        if(puedoDibujar) {
            var x = evento.pageX - pantalla.offsetLeft;
            var y = evento.pageY - pantalla.offsetTop;
            pincel.fillStyle = color2;
            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;

    pantalla.onclick = cambioColor;


</script>