Oi, Emanuela.
A função vai executar exatamente os mesmos passos, alterando apenas os parâmetros que você vai passar pra ele.
Imagina que eu fale para você multiplicar por 2 todo número que eu te falar. Então, quando eu falo: 2, você vai me responder 4.
Quando eu falo 3, você vai me responder 6.
Quando eu falo 5, você vai me responder 10.
E assim por diante.
O que aconteceu, eu só te falei 1 vez o que fazer (multiplicar por 2) e fui falando te passando os números (que são os parâmetros).
Dessa forma, a função desenhaCirculo tem as instruções para desenhar um circulo na tela. E quais dados ela precisa? Da coordenada x, da coordenada y, do raio e da cor. Com essas 4 informações ela vai desenhar qualquer círculo.
Sua dificuldade deve estar na chamada da função. Para isso seu código deveria ficar desse jeito:
<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);
function desenhaCirculo(x, y, raio, cor) {
pincel.fillStyle = cor;
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2*3.14);
pincel.fill();
}
desenhaCirculo(300, 200, 10, 'red');
desenhaCirculo(320, 200, 10, 'black');
desenhaCirculo(300, 180, 10, 'yellow');
desenhaCirculo(300, 220, 10, 'blue');
desenhaCirculo(280, 200, 10, 'orange');
</script>
Então, na primeira chamada (desenhaCirculo(300, 200, 10, 'red');), vc pede pra ele desenhar o círculo na posição x = 300, y = 200, raio = 10 e cor = 'red'.
Como a função já tem a inteligência necessária para desenhar o círculo, você não precisa reescrever tudo novamente e fazer apenas a chamada dessa maneira.
Espero que tenha entendido. Bons estudos!
