Problemas no tópico "Não permitir que desenhem por cima da nossa paleta de cores"

Tentei mudar a variável desenha para false (fazendo com que ela "desabilitasse o desenho") usando o if na função lidaComMovimentoDoMouse, mas quando vou para o navegador, isso não funcionou totalmente, apesar de realmente impedir que desenhe quando aproximo com o mouse, ao clicar em cima dos quadrados rapidamente mexendo um pouco o mouse, ainda é desenhado um círculo (o que não aconteceu com o código proposto pela Alura), gostaria de saber o porquê, já que a variável é declarada como false.

<canvas width="600" height="400"></canvas>
        <script>
            var tela = document.querySelector('canvas');
            var pincel = tela.getContext('2d');

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

            var desenha = false;

            var x
            var y

            var corAtual = 'blue';

            var xVermelho = 0;
            var xVerde = 50;
            var xAzul = 100;
            var yQuadrados = 0;
            var tamanhoQuadrados = 50;

            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');
            }

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

                if (desenha) {
                    desenhaCirculo(x, y, 5, corAtual);
                }

                if (x < 3 * tamanhoQuadrados && y < tamanhoQuadrados) {     //Aqui
                    desenha = false
                }
            }

            function mudaCor() {
                if (x < 50 && y < 50) {
                    corAtual = 'red'
                } else if (x > 50 && x < 100 && y < 50) {
                    corAtual = 'green'
                } else if (x > 100 && x < 150 && y < 50) {
                    corAtual = 'blue'
                }
            }

            function habilitaDesenhar() {
                desenha = true;
            }

            function desabilitaDesenhar() {
                desenha = false;
            }

            desenhaPaletaDeCores(); // mostra os quadrados de seleção de cores

            tela.onclick = mudaCor

            tela.onmousemove = lidaComMovimentoDoMouse;

            tela.onmousedown = habilitaDesenhar;

            tela.onmouseup = desabilitaDesenhar;

        </script>