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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Creeper</title>
</head>
<body>
    <canvas width = "600" height="400"></canvas>

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

        //rectangulo 1
        pincel.fillStyle = "darkgreen";
        pincel.fillRect(200,50,350,300);

        //rectangulo 2
        pincel.fillStyle = "black";
        pincel.fillRect(250, 110, 90, 90);

        //rectangulo 3
        pincel.fillStyle = "black";
        pincel.fillRect(410, 110, 90, 90);

        //rectangulo 4
        pincel.fillStyle = "black";
        pincel.fillRect(340, 200, 70, 100);

        //rectangulo 5
        pincel.fillStyle = "black";
        pincel.fillRect(300, 240, 40, 110);

        //rectangulo 6
        pincel.fillStyle = "black";
        pincel.fillRect(410, 240, 40, 110);

    </script>
</body>
</html>