Olá, Shellen.
Não está errado. No entanto, é uma boa prática de programação criar funções para dar significado ao código. Existem dois principais motivos para o uso de funções. O primeiro deles é a reutilização de código. Criar uma função (devidamente especificada, é claro) faz com que você não precise repetir as mesmas linhas de código, caso precise que os mesmos comandos (ou pequenas variações deles) sejam repetidos. Outra utilidade das funções é dar significado ao seu código. Quando o código é pequeno e só você tem contato com ele, tudo bem não escrever funções pra tudo, mas quando o número de linhas cresce e outras pessoas contribuem com o seu código, é interessante que você tente ao máximo passar informações para que aumente a legibilidade do código.
Imagine que você queira inserir não uma, mas várias flores. Nesse caso, seria mais apropriado utilizar funções. Vou utilizar seu código para exemplificar:
Utilizando funções
<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();
}
function desenhaFlor(x,y,d) {
desenhaCirculo(x, y, d, 'yellow');
desenhaCirculo(x, y+2*d, d, 'red');
desenhaCirculo(x, y+4*d, d, 'blue');
desenhaCirculo(x-2*d, y+2*d, d, 'orange');
desenhaCirculo(x+2*d, y+2*d, d, 'black');
}
desenhaFlor(100, 50, 10)
desenhaFlor(160, 200, 20)
desenhaFlor(300, 150, 15)
desenhaFlor(400, 250, 5)
</script>
Sem utilização de funções
<canvas width="600" height="400"></canvas>
<br>
<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(100, 50, 10, 'yellow');
desenhaCirculo(100, 70, 10, 'red');
desenhaCirculo(100, 90, 10, 'blue');
desenhaCirculo(80, 70, 10, 'orange');
desenhaCirculo(120, 70, 10, 'black');
desenhaCirculo(160, 200, 20, 'yellow');
desenhaCirculo(160, 240, 20, 'red');
desenhaCirculo(160, 280, 20, 'blue');
desenhaCirculo(120, 240, 20, 'orange');
desenhaCirculo(200, 240, 20, 'black');
desenhaCirculo(300, 150, 15, 'yellow');
desenhaCirculo(300, 180, 15, 'red');
desenhaCirculo(300, 210, 15, 'blue');
desenhaCirculo(270, 180, 15, 'orange');
desenhaCirculo(330, 180, 15, 'black');
desenhaCirculo(400, 250, 5, 'yellow');
desenhaCirculo(400, 260, 5, 'red');
desenhaCirculo(400, 270, 5, 'blue');
desenhaCirculo(390, 260, 5, 'orange');
desenhaCirculo(410, 260, 5, 'black');
</script>
Os dois códigos acima tem o mesmo resultado prático, mas o primeiro me parece bem mais legível, além de ter menos linhas de código.
Se ainda estiver com dúvidas, pode perguntar.
Espero ter ajudado.
