O meu está um pouco diferente, alguém poderia opinar sobre?

<canvas  width="600" height="400"></canvas>
    <script>
        function desenhaQuadrado(x,y,tamanho,cor) {
            brush.fillStyle = cor;
            brush.fillRect(x,y,tamanho,tamanho);
            brush.fill();
        }

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

        function desenhaPaletaDeCores() {
            desenhaQuadrado(xVermelho, yQuadrado, tamanhoQuadrados, 'red');
            desenhaQuadrado(xVerde, yQuadrado, tamanhoQuadrados, 'green');
            desenhaQuadrado(xAzul, yQuadrado, tamanhoQuadrados, 'blue');
        }

        function lidaComMovimentoDoMouse(evento) {
            var x = evento.pageX - tela.offsetLeft;
            var y = evento.pageY - tela.offsetTop;
            if(desenha && podeDesenhar(x,y)){
                desenhaCirculo(x,y,5,corAtual[posicao]);
            }
        }

        function podeDesenhar(x,y) {
            if(x > 0 && x < (3*tamanhoQuadrados + 10) && y > 0 && y < (tamanhoQuadrados + 10)) {
                return false;
            } else{
                return true;
            }
        }

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

            if((x > 0 )
                && (x < xVermelho + tamanhoQuadrados)
                &&(y > yQuadrado)
                &&(y < yQuadrado + tamanhoQuadrados)) {
                posicao = 1;
            }

            if((x > xVerde )
                && (x < xVerde + tamanhoQuadrados)
                &&(y > yQuadrado)
                &&(y < yQuadrado + tamanhoQuadrados)) {
                posicao = 2;
            }

            else if((x > xAzul )
                && (x < xAzul + tamanhoQuadrados)
                &&(y > yQuadrado)
                &&(y < yQuadrado + tamanhoQuadrados)) {
                posicao = 0;
            }

        }

        function habilitaDesenho() {
            desenha = true;
        }
        function desabilitaDesenho() {
            desenha = false;
        }

        var tela = document.querySelector('canvas');
        var brush = tela.getContext('2d');
        brush.fillStyle = 'lightgrey';
        brush.fillRect(0,0,600,400);

        var desenha = false;
        var corAtual = ['blue','red','green'];
        var posicao = 0;
        var xVermelho = 0;
        var xVerde = 50;
        var xAzul = 100;
        var yQuadrado = 0;
        var tamanhoQuadrados = 50;

        desenhaPaletaDeCores();

        tela.onmousemove = lidaComMovimentoDoMouse;
        tela.onmousedown = habilitaDesenho;
        tela.onmouseup = desabilitaDesenho;

        tela.onclick = trocaCorBrush;

    </script>