Creeper | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <canvas width="600" height="400">

    </canvas>
    <script>
    //Cambie los colores en al function
        function colorFace(){
            pincel.fillStyle = "gray";
        }

        function colorBody(){
            pincel.fillStyle = "orange";
        }


        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");

        //------------> 1
        colorBody();
        pincel.fillRect(0, 0, 350, 300);

        //------------> 2
        colorFace();
        pincel.fillRect(50,60,90,90);

        //------------> 3
        colorFace();
        pincel.fillRect(210,60,90,90);

        //------------> 4
        colorFace();
        pincel.fillRect(140,150,70,100);
        pincel.fill();

        //------------> 5
        colorFace();
        pincel.fillRect(100,190,40,110);
        pincel.fill();

        //------------> 6
        colorFace();
        pincel.fillRect(210,190,40,110);
        pincel.fill();

    </script>

</body>
</html>