Estou com uma duvida, não estou conseguindo colocar a borda, quando adiciono comando .strokeRect() apenas uma das flores aparece e sem borda.
<canvas width="600" height="400"> </canvas>
<script>
function desenhaCirculo(x, y, raio, cor) {
pincel.fillStyle= cor;
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2*3.14);
pincel.fill();
}
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
pincel.fillStyle = "lightgray";
pincel.fillRect (0, 0, 600, 400);
function desenhaFlor(x, y){
desenhaCirculo(x, y, 10, "yellow");
desenhaCirculo(x+20, y, 10, "white");
desenhaCirculo(x-20, y, 10, "white");
desenhaCirculo(x, y+20, 10, "white");
desenhaCirculo(x, y-20, 10, "white");
pincel.fillStyle= "green";
pincel.fillRect(x-5, y+30, 10, 60 );
}
for(var campo = 0; campo < 200; campo = campo + 50){
for(var x = 50; x < 600; x = x + 100){
desenhaFlor(x, 200);
}
}
</script>