SOLUCION Crear Un Mini Paint

Les Dejo Mi Propia Version :)

<canvas width="1300" height="550"></canvas>

<script>
    var pantalla = document.querySelector('canvas');
    var pincel = pantalla.getContext('2d');

    pincel.fillStyle = 'grey';
    pincel.fillRect(50, 100, 1300, 550);

    var colores = ["blue", "red", "green", "yellow", "black", "orange"];
    var indice = 0;
    var radio = 20;
    var color = "blue"; 

    function crearCirculo(x,y,radio) {

        pincel.fillStyle = colores[indice];
        pincel.beginPath();
        pincel.arc(x,y,radio,0,2*3.14);
        pincel.fill();

    }

    function escribirTexto(x,y,texto) {
        var pantalla = document.querySelector('canvas');
        var pincel = pantalla.getContext('2d');

        pincel.font= "25px Georgia";
        pincel.fillStyle = "black";
        pincel.fillText(texto, x, y); 
    }

    escribirTexto(150,40, "DIBUJEMOS");

    function crearPaleta(x,y,radio,color) {

        var sumaSeparador = 0;
        for(var i = 0; i < color.length; i++) {
            var separador = 60;
            crearCirculo(x + sumaSeparador , y, radio, color[indice]);
            sumaSeparador = sumaSeparador + separador;
            indice++;
        } 
    }

    crearPaleta(75,75,radio,colores);

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

        if ((x < 75 + radio) && (x > 75 - radio) && (y < 75 + radio) && (y > 75 - radio)) {
            color = "blue";

        } if ((x < 135 + radio) && (x > 135 - radio) && (y < 75 + radio) && (y > 75 - radio)) {
                color = "red";

        } if ((x < 195 + radio) && (x > 195 - radio) && (y < 75 + radio) && (y > 75 - radio)) {
                color = "green";
        } if ((x < 255 + radio) && (x > 255 - radio) && (y < 75 + radio) && (y > 75 - radio)) {
                color = "yellow";
        } if ((x < 315 + radio) && (x > 315 - radio) && (y < 75 + radio) && (y > 75 - radio)) {
                color = "black";
        } if ((x < 375 + radio) && (x > 375 - radio) && (y < 75 + radio) && (y > 75 - radio)) {
                color = "orange";
        }
    }


    pantalla.onclick = cambiarColor;

    var puedoDibujar = false;

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

        if((puedoDibujar) && ((x > 55) || (y > 550)) && ((x > 1300) || (y > 105))) {
            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;

   </script>