Fiz dessa forma, mas às cores não mudaram

Olá Pedro, tudo bem com você?

Peço desculpas pela demora em lhe responder.

O comportamento onde todos os círculos são desenhados na cor vermelha está acontecendo devido a um erro de digitação no momento em que é passado o parâmetro referente ao raio do círculo na chamada da função desenhaCirculo. No código apresentado o valor do raio foi passado utilizando uma vírgula para definir a casa decimal (3,14), quando estamos trabalhando com as linguagens de programação os números decimais devem ser escritos utilizando o ponto (3.14).

Peço que no momento em que ocorre a chamada da função desenhaCirculo, troque o valor do raio para 3.14, deixando como apresentado abaixo.

  desenhaCirculo(300, 200, 4 * 3.14, "red");
  desenhaCirculo(275, 200, 4 * 3.14, "yellow");
  desenhaCirculo(325, 200, 4 * 3.14, 'green');
  desenhaCirculo(300, 175, 4 * 3.14, 'black');
  desenhaCirculo(300, 225, 4 * 3.14, 'black');

Após a mudança, salve o arquivo e execute-o.

Código completo com as mudanças aplicadas

<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 cor = ('');

  function desenhaCirculo(x, y, raio, cor) {
    pincel.beginPath();
    pincel.fillStyle = cor;
    pincel.arc(x, y, raio, 0, 2 * 3.14);
    pincel.fill();
  }
  desenhaCirculo(300, 200, 4 * 3.14, "red");
  desenhaCirculo(275, 200, 4 * 3.14, "yellow");
  desenhaCirculo(325, 200, 4 * 3.14, 'green');
  desenhaCirculo(300, 175, 4 * 3.14, 'black');
  desenhaCirculo(300, 225, 4 * 3.14, 'black');
</script>

Espero ter lhe ajudado. Em caso de dúvidas estou à disposição.

Não hesite em voltar ao fórum para continuar aprendendo e interagindo com a comunidade.

Abraços e bons estudos!