Mi pequeño paint

Les comparto mi código, lo hice más grande, le di cuatro opciones de colores y añadí la opción de cambiar el radio del pincel, me gustó mucho el ejercicio.

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

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

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

    var colores = ["red", "green","blue","yellow"];
    var indiceColorActual = 0;
    var puedoDibujar = false;
    var radio=[5,10,15,20];
    var indiceRadioActual= 0;
    var lado=80;

    function dibujarCirculos(evento) {

        if(puedoDibujar) {
            var x = evento.pageX - pantalla.offsetLeft;
            var y = evento.pageY - pantalla.offsetTop;
            pincel.fillStyle = colores[indiceColorActual];
            pincel.beginPath();
            pincel.arc(x, y, radio[indiceRadioActual], 0, 2 * 3.14);
            pincel.fill();
        }

    }
    function dibujarRectangulo(x, y, base, altura, color) {

        pincel.fillStyle=color;
        pincel.fillRect(x,y, base, altura);
        pincel.strokeStyle="black";
        pincel.strokeRect(x,y, base, altura);
    }
    function dibujarCircunferencia(x , y , radio){
            pincel.fillStyle = "black";
            pincel.beginPath();
            pincel.arc(x, y, radio, 0, 2 * 3.14);
            pincel.fill();
    }

    function dibujarPaletaColores(x, y, lado,color){
        var espacio1=0;
    for (var i=0; i<colores.length; i++){
        dibujarRectangulo(x+espacio1,y,lado,lado,color[i]);
        espacio1=espacio1+lado;
        }
    }
    function dibujarPinceles(x, y,lado, radio) {


        var espacio2=0;
        for(var i=0;i<radio.length; i++){
            dibujarRectangulo(x+espacio2,y,lado,lado,"white");
            dibujarCircunferencia(x+espacio2+lado/2, y+lado/2, radio[i]);
            espacio2=espacio2+lado;
        }

    }


    pantalla.onmousemove = dibujarCirculos;

    function habilitarDibujar() {

        puedoDibujar = true;
    }

    function deshabilitarDibujar() {

        puedoDibujar = false;
    }
     function cambiarPincel(evento){

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

        for(var i=0;i<colores.length; i++){
            if((x < lado*(i+1) && x >lado*i)&& 
           (y <lado && y>0)){

            indiceColorActual=i;
            dibujarPaletaColores(0,0,lado,colores);
            dibujarPinceles(480,0,lado,radio);

            }
        }
        for(var j=0;j<radio.length; j++){
            if((x <480+lado*(j+1) && x >480+lado*j)&& 
           (y <lado && y>0)){

            indiceRadioActual=j;
            dibujarPaletaColores(0,0,lado,colores);
            dibujarPinceles(480,0,lado,radio);

            }
        }

    }

    dibujarPaletaColores(0,0,lado,colores);
    dibujarPinceles(480,0,lado,radio);

    pantalla.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;

    pantalla.onclick= cambiarPincel;

</script>

Asi se ve