Desenha obras de arte - "Melhorias" implementadas!

Tentei deixar o programa mais facilmente "editável" com relação a paleta de cores com o uso de arrays, nessa versão podemos simplesmente inserir novas cores dentro da array cores, e o programa funcionará perfeitamente. Também utilizei um setInterval() para redesenhar constantemente a paleta de cores e as bordas do canvas, assim não temos as dificuldades de desenhar muito próximo as bordas que o método de desabilitar a possibilidade de desenhar apresenta, também mantemos a experiência do usuário de que não é possível desenhar nessas áreas. Programa disponibilizado abaixo pra quem quiser testar ou sugerir melhorias.

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

<script>

    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");

    var cont;
    var tamanho = 50;
    var cores = ["red", "green", "blue", "white"];

    var raio = 10;

    var cont2;
    var corPincel = cores.length-1;

    function desenhaQuadrado(x, y, tamanho, cor) {

        pincel.fillStyle = cor;
        pincel.fillRect(x, y, tamanho, tamanho);
        pincel.strokeRect(x, y, tamanho, tamanho);
    }

    function desenhaPaleta() {

        for(cont = 0; cont<cores.length; cont++) {

            pincel.storkeStyle = "black";
            pincel.strokeRect(0, 0, tela.width, tela.height);
            desenhaQuadrado(cont*tamanho, 0, tamanho, cores[cont]);
        }
    }

    function desenhaCirculo(x, y, raio, cor) {

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2*Math.PI);
        pincel.fill();
    }

    setInterval(desenhaPaleta, 0);

    tela.onmousedown = function(evento) {

        for(cont2 = cores.length-1; cont2>=0; cont2--) {

            if(evento.offsetX<=cont2*tamanho+tamanho 
                && evento.offsetY<=tamanho) {

                corPincel = cont2;
            }
        }

        desenha = true;
        desenhaCirculo(evento.offsetX, evento.offsetY, raio, cores[corPincel]);

        tela.onmouseup = function() {

            desenha = false;
        }

        tela.onmousemove = function(evento) {

            if(desenha) {

                desenhaCirculo(evento.offsetX, evento.offsetY, raio, cores[corPincel]);
            }
        }
    }

</script>