frações e flor

 <canvas width="600" height="400"></canvas>
    <script>
        function desenhaQuadrado(x, y, cor){    
            var tela = document.querySelector("canvas");
            var pincel = tela.getContext("2d");

                pincel.fillStyle = cor;
                pincel.fillRect(x, y, 50, 50);
                pincel.strokeRect(x, y, 50, 50);
        }

                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();
                }

                desenhaQuadrado(100, 140, "pink");
                desenhaQuadrado(150, 160, "rosa");
                desenhaCirculo(190, 350, 100, "purple");

                desenhaCirculo(300, 200, 30, "red");
                desenhaCirculo(240, 200, 30,"orange");
                desenhaCirculo(360, 200, 30, "black");
                desenhaCirculo(300, 140, 30, "yellow");
                desenhaCirculo(300, 260, 30, "blue")

                desenhaQuadrado(0, 0, "green");
                desenhaQuadrado(50, 0, "green");
                desenhaQuadrado(100, 0, "green");
                desenhaQuadrado(150, 0, "white")

</script>