Exercício Paleta de Cores

Nesse exercício peguei o código proposto de exemplo da aula, acrescentei mais cores à paleta e adicionei a possibilidade de aumentar e diminuir o tamanho do pincel na hora da pintura com as teclas SHIFT e ALT respectivamente.

<meta charset="UTF-8">
<canvas width="600" height="400"></canvas>

<script>

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

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

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

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

    function desenhaPaletaDeCores(){

        desenhaQuadrado(xVermelho, yQuadrados, tamanhoQuadrados,'red');
        desenhaQuadrado(xVerde, yQuadrados, tamanhoQuadrados,'green');
        desenhaQuadrado(xAzul, yQuadrados, tamanhoQuadrados,'blue');
        desenhaQuadrado(xYellow, yQuadrados, tamanhoQuadrados,'yellow');
        desenhaQuadrado(xPreto, yQuadrados, tamanhoQuadrados,'black');
        desenhaQuadrado(xLaranja, yQuadrados, tamanhoQuadrados,'orange');
        desenhaQuadrado(xVerdeLimao, yQuadrados, tamanhoQuadrados,'lime');
        desenhaQuadrado(xRosa, yQuadrados, tamanhoQuadrados,'pink');
        desenhaQuadrado(xVioleta, yQuadrados, tamanhoQuadrados,'purple');
        desenhaQuadrado(xCinza, yQuadrados, tamanhoQuadrados,'gray');
        desenhaQuadrado(xDourada, yQuadrados, tamanhoQuadrados,'gold');
        desenhaQuadrado(xPrata, yQuadrados, tamanhoQuadrados,'silver');                
    }

    function lidaComMovimentoDoMouse(evento){

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

        if(desenha && podeDesenharNaArea(x,y)){

            if(evento.shiftKey && raio <= 30){
                raio = raio + 1;

            }else if (evento.altKey && raio >= 5){
                raio = raio - 1;            
            }
        desenhaCirculo(x,y,raio,corAtual);        
        }
    }

    function habilitaDesenhar(){

        desenha = true;    
    }

    function desabilitaDesenhar(){

        desenha = false;    
    }

    function podeDesenharNaArea(x,y){

        if(x >= 0 && x < 12 * tamanhoQuadrados && y >= 0 && y - 15 < tamanhoQuadrados){
            return false;
        }else{
            return true;
            }    
    }

    function selecionaCor(evento){

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

        if (y > yQuadrados && y < yQuadrados + tamanhoQuadrados){
            if (x > xVermelho && x < xVermelho + tamanhoQuadrados){
                corAtual = 'red';            
            } else if (x > xVerde && x < xVerde + tamanhoQuadrados){
                corAtual = 'green';
            } else if (x > xAzul && x < xAzul + tamanhoQuadrados){
                corAtual = 'blue';        
            } else if (x > xYellow && x < xYellow + tamanhoQuadrados){
                corAtual = 'Yellow';        
            } else if (x > xPreto && x < xPreto + tamanhoQuadrados){
                corAtual = 'black';
            } else if (x > xLaranja && x < xLaranja + tamanhoQuadrados){
                corAtual = 'orange';        
            } else if (x > xVerdeLimao && x < xVerdeLimao + tamanhoQuadrados){
                corAtual = 'lime';        
            } else if (x > xRosa && x < xRosa + tamanhoQuadrados){
                corAtual = 'pink';
            } else if (x > xVioleta && x < xVioleta + tamanhoQuadrados){
                corAtual = 'purple';        
            } else if (x > xPrata && x < xPrata + tamanhoQuadrados){
                corAtual = 'silver';        
            } else if (x > xCinza && x < xCinza + tamanhoQuadrados){
                corAtual = 'gray';        
            } else if (x > xDourada && x < xDourada + tamanhoQuadrados){
                corAtual = 'gold';
            }
        }    
    }

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

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

    var raio = 5;
    var desenha = false;
    var corAtual = 'blue';
    var xVermelho = 0;
    var xVerde = 50;
    var xAzul = 100;
    var xYellow = 150;
    var xPreto = 200;
    var xLaranja = 250;
    var xVerdeLimao = 300;
    var xRosa = 350;
    var xVioleta = 400;
    var xPrata = 450;
    var xCinza = 500;
    var xDourada = 550;    

    var yQuadrados = 0;
    var tamanhoQuadrados = 50;

    desenhaPaletaDeCores();

    tela.onmousemove = lidaComMovimentoDoMouse;
    tela.onmousedown = habilitaDesenhar;
    tela.onmouseup = desabilitaDesenhar;

    tela.onclick =  selecionaCor;

</script>

*******************************************