[Proyecto] Alternativa dibujo y paleta de colores

No es tan preciso como la solución de instructor Christian, pero siguiendo el principio de la navaja de ockham, usé el conocimiento adquirido para dar con una alternativa simple y agregue una función para borrar el lienzo dibujado dentro del canvas al dar clic derecho.

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

    pincel.fillStyle = paletaColores[0]
    var rojo = pincel.fillRect(0, 0, 50, 50);
    pincel.fillStyle = paletaColores[1]
    var verde = pincel.fillRect(50, 0, 50, 50);
    pincel.fillStyle = paletaColores[2]
    var azul = 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 <= 50 ) &&
            (y <= 50 )) {
            pincel.fillStyle = paletaColores[idx = 0];
        }
        if ((x >= 50 && x <=100 ) &&
            (y <= 50)) {
            pincel.fillStyle = paletaColores[idx = 1];
        }
        if ((x >= 100 && x <=150 ) &&
            (y <= 50)) {
            pincel.fillStyle = paletaColores[idx = 2];
        }
    }

    pantalla.onclick = cambiarColor;

    function dibujarCirculo(evento) {

        if(puedoDibujar) {
            var x = evento.pageX - pantalla.offsetLeft;
            var y = evento.pageY - pantalla.offsetTop;
           //con este if, limité donde se pueden generar los círculos, así no dibuja encíma de la paleta de colores
            if((x>154&&y>0)||
                (y>54&&x>0) ) {
            pincel.fillStyle = paletaColores[idx];
            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;

    function limpiarPantalla(){
        pincel.fillStyle = "grey"
        pincel.fillRect(150,0,600,400)
        pincel.fillRect(0,50,600,400)
        pincel.fillStyle = paletaColores[idx]
        return false
    }

    pantalla.oncontextmenu = limpiarPantalla;

</script>