[Sugerencia] Les dejo mi solucion

<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 paletaColores = ["red", "green","blue"]

    var puedoDibujar = false;

    function dibujarCuadro (x,y,color){


        pincel.fillStyle = color
        pincel.fillRect(x,y,50,50)


    }


    function dibujarCirculo(evento) {

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

        if(puedoDibujar) {

            pincel.beginPath();
            pincel.arc(x, y, 5, 0, 2 * 3.14);
            pincel.fill();


        }


        if(x >= 0 && x <= 50 && y >= 0 && y <= 50 ){
            pincel.fillStyle = paletaColores [0]
        }

        if(x >= 51 && x <= 100 && y >= 0 && y <= 50 ){
            pincel.fillStyle = paletaColores [1]
        }

        if(x >= 101 && x <= 150 && y >= 0 && y <= 50 ){
            pincel.fillStyle = paletaColores [2]
        }

        if(x >= 0 && x <= 150 && y >= 0 && y <= 50 ) {

            puedoDibujar =  false
            pantalla.onmousedown = deshabilitarDibujar;

        }

        else {
           pantalla.onmousedown = habilitarDibujar;
        }   



    }    

    pantalla.onmousemove = dibujarCirculo;

    function habilitarDibujar() {

        puedoDibujar = true;
    }

    function deshabilitarDibujar() {

        puedoDibujar = false;
    }

    //pantalla.onmousedown = habilitarDibujar;
    pantalla.onmouseup = deshabilitarDibujar;


    function cuadros () {
    dibujarCuadro(0,0,paletaColores[0])
    dibujarCuadro(50,0,paletaColores[1])
    dibujarCuadro(100,0,paletaColores[2])
}

    cuadros()

</script>