<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 desenhaCaule (x, y) {
pincel.fillStyle = 'green'
pincel.beginPath();
pincel.moveTo(x, y)
pincel.moveTo(x+3, y)
pincel.lineTo(x+3, y+200)
pincel.lineTo(x, y+200)
pincel.fill();
}
function desenhaFlor (x, y) {
desenhaCaule();
desenhaCirculo(x, y-40, 20, 'skyblue')
desenhaCirculo(x, y+40, 20, 'skyblue')
desenhaCirculo(x-40, y, 20, 'skyblue')
desenhaCirculo(x+40, y, 20, 'skyblue')
desenhaCirculo(x-30, y+30, 20, 'skyblue')
desenhaCirculo(x-30, y-30, 20, 'skyblue')
desenhaCirculo(x+30, y-30, 20, 'skyblue')
desenhaCirculo(x+30, y+30, 20, 'skyblue')
desenhaCirculo(x, y, 20, 'white')
}
desenhaCaule(300, 200);
desenhaFlor(300, 200);
desenhaCaule(190, 250);
desenhaFlor(190, 250);
desenhaCaule(390, 250);
desenhaFlor(390, 300);
</script>