Paint

Hola, les comparto mi codigo, cree una funcion que crea los cuadros seleccionadores de colores, los que ve el usuario. Prosegui con otra funcion que me permite escoger el color al dar click en el area de dicho color y en la funcion de dibujar inclui un area de seguridad donde no dibujar.

<meta charset="utf-8">
<h1>Paint en web</h1>

<h3>Selecione un cuadro para cambiar de color</h3>

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


<script>

    function dibujarCirculo(evento) {

        if(puedoDibujar) {
            //se tiene que hacer un area segura para la paleta con if 
            var x = evento.pageX - pantalla.offsetLeft;
            var y = evento.pageY - pantalla.offsetTop;
            pincel.fillStyle = colores[indiceColorActual];

            if((x < 155) && 
            (x > -5) && 
            (y < 55) && 
            (y > -5)){
                //area segura puse un margen de 155 de ancho por el radio del circulo jamas toque al igual que en 55
            }
            else{
                pincel.beginPath();
                pincel.arc(x, y, 5, 0, 2 * 3.14);
                pincel.fill(); 
            }
        }

    }


    function habilitarDibujar() {

        puedoDibujar = true;
    }


    function deshabilitarDibujar() {

        puedoDibujar = false;
    }

    function paletaColores(){
        //aqui se crea la paleta de colores
        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);
    }


    //Aqui seleccionamos el area para escoger el color
    function disparar(evento){

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

        //color blue
        if ((x < 150) && 
            (x > 100) && 
            (y < 50) && 
            (y > 0)){

            alert("Selecciono color Azul");
            indiceColorActual=0;
        }

        //color green
        if ((x < 100) && 
            (x > 50) && 
            (y < 50) && 
            (y > 0)){

            alert("Selecciono color Verde");
            indiceColorActual=1;
        }

        //color red
        if ((x < 50) && 
            (x > 0) && 
            (y < 50) && 
            (y > 0)){

            alert("Selecciono color Rojo");
            indiceColorActual=2;
        }
    }


    var pantalla = document.querySelector('canvas');
    var pincel = pantalla.getContext('2d');
    var puedoDibujar = false;
    var colores = ["blue","green","red"]; //array selector de colores
    var indiceColorActual = 0; // comienza con blue

    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 600, 400);




    paletaColores(); //me muestra la paleta de colores


    pantalla.onmousemove = dibujarCirculo; //captura el movimiento del mouse

    pantalla.onmousedown = habilitarDibujar; //permite ejectuar codigo cuando el mouse esta presionado

    pantalla.onmouseup = deshabilitarDibujar; //detecta cuando el mouse deja de estar presionado

    pantalla.onclick = disparar; //detecta dar click en la paleta de colores

</script>