não muda a cor

Olá Camilli, tudo bem?

Para solucionarmos esse erro devemos fazer algumas alterações.

<canvas width="600" height="400"></canvas>
<button id='colorir'onclick="desenhar('black')">Desenhar</button>
<button id='apagar' onclick="desenhar('blue')">Apagar</button>

Utilizaremos da função onclick diretamente na “TAG” button, ou seja, caso clicado no Apagar a função desenhar() recebe o valor “blue”, o mesmo acontece para o botão Desenhar que passa a receber o valor “black” quando pressionado.

A função desenhar, agora recebe um parâmetro chamado cor desse modo temos:

function desenhar(cor) {
        corDesenho = cor
        tela.onmousedown = habilitaDesenhar;
        tela.onmouseup = desabilitaDesenhar;
      } 

A variável CorDesenho recebe os valores “blue” ou “black” de acordo com o botão que foi pressionado.

Resultado:

Realizei algumas outras mudanças, como retirar alguns ifs que não eram mais necessários para a ocasião, entre outras pequenas mudanças, para que você possa verificar e compreender cada mudança, deixo abaixo o código completo:

<canvas width="600" height="400"></canvas>
<button id='colorir' onclick="desenhar('black')">Desenhar</button>
<button id='apagar' onclick="desenhar('blue')">Apagar</button>

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

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

    var desenha = false;
    var corDesenho = 'black'
    function desenhaCirculo(evento) {

        if (desenha) {

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

            pincel.fillStyle = corDesenho;
            pincel.beginPath();
            pincel.arc(x, y, 10, 0, 2 * 3.14);
            pincel.fill();

        }
        console.log(corDesenho)
        console.log(x + ',' + y);
    }

    var apagar = document.querySelector('#apagar')
    var colorir = document.querySelector('#colorir');

    tela.onmousemove = desenhaCirculo;

    function habilitaDesenhar() {
        desenha = true;
    }

    function desabilitaDesenhar() {
        desenha = false;
    }

    function desenhar(cor) {
        corDesenho = cor
        tela.onmousedown = habilitaDesenhar;
        tela.onmouseup = desabilitaDesenhar;
    }

</script>

Espero que eu consiga lhe ajudar, mas caso tenha mais alguma dúvida, me coloco à disposição!

Um grande abraço e até mais!

Olá, Cerutti seguinte ao checar o seu codigo encontrei um erro de sintase :

colorir.onclick = desenhar; apagar.onclickn = desenhar;

como você pode ver ao chamar o onclick você digitou uma letra a mais, contudo não entendi muito bem o objetivo dos botoes, se precisar de mais algo deixa seu questionamento ai.