Proyecto final

Pude realizar el código para seleccionar el color, pero quiero mejorarlo haciendo que al cargar dicho codigo en el navegador, ya tenga un color preseleccionado y luego si se pueda cambiar. Actualmente, lo que escribi yo, el usuario debe seleccionar un color para que la funcion complete ese espacio en "blanco" que tiene, quiero mejorar la experiencia del usuario haciendo que no venga ese espacio en blanco de por si. No me nace la idea como aplicar esa pre carga de color antes de que el usuario seleccione una utilizando el codigo como yo lo escribí. Quizás si se me ocurre que podria armar una serie con los colores y darle el valor iniciar a una variable y poner valor cero como inicial refiriéndolo a un color y despues sumar o restar en función de la casilla que se toque, pero veo demasiado engorroso ese camino y por eso quería saber si a alguien se le ocurría algun detalle a agregar en mi codigo que pueda preseleccionar por defecto un color.

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

<script>
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");        
    pincel.fillStyle = "lightgrey";
    pincel.fillRect(0,0,600,400);

    pincel.fillStyle = "red"
    pincel.fillRect(0,0,50,50)

    pincel.fillStyle = "green"
    pincel.fillRect(50,0,50,50)

    pincel.fillStyle = "blue"
    pincel.fillRect(100,0,50,50)

    var puedoDibujar = false;


    function cambiarColor(evento) {



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

        if( (x > 0) &&
            (x < 50) &&
            (y >= 0) &&
            (y < 50)) {
            color = "red";
        }

        if( (x >= 50) &&
            (x < 100) &&
            (y >= 0) &&
            (y < 50)) {
            color = "green";
        }

        if( (x >= 100) &&
            (x < 150) &&
            (y >= 0) &&
            (y < 50)) {
            color = "blue";
        }

    }

    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();
        }

    }

    pantalla.onmousemove = dibujarCirculo;

    function habilitarDibujar() {

        puedoDibujar = true;
    }

    function deshabilitarDibujar() {

        puedoDibujar = false;
    }

    pantalla.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;

    pantalla.onclick = cambiarColor;


</script>