Diseñar con mouse con paleta de colores (sin evento onclick) y con una función para establecer las coordenadas y llamar al evento PAGE una sola vez

/* - Creé la función obtenerCoordenadas() para asignar las coordenadas en las variables x,y, para ya no tener que llamar los eventos pageX y pageY más de un vez.
-  Aproveché el evento .onmousedown para el cambio de color si el usuario le da click a los colores que se ofrecen en la paleta. */

<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);
    pincel.fillStyle = 'blue';
    pincel.fillRect(0, 0, 50, 50);
    pincel.fillStyle = 'green';
    pincel.fillRect(50, 0, 50, 50);
    pincel.fillStyle = 'red';
    pincel.fillRect(100, 0, 50, 50);

    var puedoDibujar = false;    
    var x;
    var y;
    var colorCirculo="blue";

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

        if (delimitarAreaDeDibujo())
        {
            dibujarCirculo(x,y);
        }
    }

    function dibujarCirculo (x,y) 
    {    

        if (puedoDibujar )
        {
            pincel.fillStyle = colorCirculo;
            pincel.beginPath();
            pincel.arc(x, y, 5, 0, 2 * 3.14);
            pincel.fill();

        }

    }

    function delimitarAreaDeDibujo()
    {
        if
        (
           (x>154 && x<600) && (y<400)
        )
        {
            return true;
        }
        if
        (
           (y>54 && y<400)&& (x<600)
        )
        {
            return true;
        }
        else false;

    }

    function cambiarColor()
    {
        if (x<=50&&y<=50)
        {
            colorCirculo="blue";
        }
        if ((x>50&&x<=100)&&(y>0&&y<=50))
        {
            colorCirculo="green";
        }
        if ((x>100&&x<=150)&&(y>0&&y<=50))
        {
            colorCirculo="red";
        }

    }


    function habilitarDibujar() {

        puedoDibujar = true;
        cambiarColor();

    }

    function deshabilitarDibujar() {

        puedoDibujar = false;

    }

    pantalla.onmousemove = obtenerCoordenadas;
    pantalla.onmousedown = habilitarDibujar;
    pantalla.onmouseup = deshabilitarDibujar;


</script>