<canvas width="600" height="400"></canvas>

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightblue';
    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 desenhaQuadrado(x, y, pixel1, pixel2, cor){

        pincel.fillStyle = cor;
        pincel.fillRect(x, y, pixel1, pixel2);
        //pincel.fillStroke = "black";
        //pincel.strokeRect(x, y, pixel1, pixel2);
    }

    function desenhaTriangulo(moveX, moveY, linhaX1, linhaY1, linhaX2, linhaY2, cor ) {

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.moveTo(moveX, moveY);
        pincel.lineTo(linhaX1, linhaY1);
        pincel.lineTo(linhaX2, linhaY2);
        pincel.fill();

    }

    desenhaTriangulo(290, 385, 380, 341, 335, 325, "darkgreen"); //folha
    desenhaTriangulo(381, 341, 335, 325, 395, 290, "darkgreen"); //folha

    desenhaQuadrado(290, 200, 20, 250, "green"); //caule

    desenhaCirculo(300, 200, 25, "yellow"); //meio

    desenhaCirculo(350, 200, 25, "pink"); //petala direita    
    desenhaCirculo(250, 200, 25, "pink"); //petala esquerda

    desenhaCirculo(300, 250, 25, "pink"); //petala embaixo
    desenhaCirculo(300, 150, 25, "pink");    //petala em cima

    desenhaCirculo(336, 164, 25, "pink");    //petala cima direito
    desenhaCirculo(264, 164, 25, "pink");    //petala cima esquerdo

    desenhaCirculo(336, 236, 25, "pink");    //petala embaixo direito
    desenhaCirculo(266, 236, 25, "pink");    //petala embaixo esquerdo

    desenhaQuadrado(0, 390, 600, 50, "brown");

</script>