Como fazer uma borracha?

Olá Nicollas, tudo bem?

Para criar um borracha precisamos apenas fazer algumas mudanças no código:

A lógica da borracha, vai ser bem simples, trocamos a cor do pincel para a cor do canvas, no caso grey :)

Mas para isso vamos precisar tirar a parte de definição de cor da função desenhaCirculo, no caso:

pincel.fillStyle = cor.value;

Vamos retirar essa linha, e adicionar em uma função chamada trocaCor, então:

function trocaCor(){
    pincel.fillStyle = cor.value;
}

E já vamos criar uma função ativaBorracha

function ativaBorracha(){
    pincel.fillStyle = "grey"
}

Agora o que precisamos fazer é:

• Criar um botão para a borracha e capturar no javascript

<button>borracha</button>
var borracha = document.querySelector('button');

• Associar aos botões eventos para executar nossa funções:

   cor.onchange = trocarCor;

Bem, agora sempre que trocarmos a cor, automaticamente invocaremos nossa função

borracha.onclick = ativarBorracha;

E sempre que clicarmos na borracha, mudaremos a cor para a mesma do canvas :)

E ficamos com o código assim no final:

    <canvas width="600" height="400"></canvas>
    <br>
    <button>borracha</button>
    <br>
    Escolha uma cor para desenhar <input type="color">

    <script>
        var cor = document.querySelector('input');
        var borracha = document.querySelector('button');
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');

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

        pincel.fillStyle = cor.value;

        var desenha = false;

        function desenhaCirculo(evento) {
            if (desenha) {
                var x = evento.pageX - tela.offsetLeft;
                var y = evento.pageY - tela.offsetTop;
                pincel.beginPath();
                pincel.arc(x, y, 10, 0, 2 * 3.14);
                pincel.fill();
            }
        }

        tela.onmousemove = desenhaCirculo;

        function habilitaDesenhar() {
            desenha = true;
        }

        function desabilitaDesenhar() {
            desenha = false;
        }

        function ativarBorracha() {
            pincel.fillStyle = 'grey'
        }

        function trocarCor() {
            pincel.fillStyle = cor.value;
        }

        cor.onchange = trocarCor;
        borracha.onclick = ativarBorracha;
        tela.onmousedown = habilitaDesenhar;
        tela.onmouseup = desabilitaDesenhar;


    </script>

Abraços e Bons Estudos!