Creper solucion | 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="tweetmeme-title" content="Retweet Button Explained" />
    <meta name="theme-color" content="#ff0000" />
    <script src="https://cdn.tailwindcss.com"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Programa 3</title>
  </head>
  <body>

    <canvas width="350" height="300"></canvas>

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

        pincel.fillStyle = "green";
        pincel.fillRect(0,0, 350,300);

        pincel.fillStyle = "black";
        pincel.fillRect(50,50,90,90);

        pincel.fillStyle = "black";
        pincel.fillRect(210,50, 90,90);

        pincel.fillStyle = "black";
        pincel.fillRect(140,140, 70,100);

        //pincel.fillStyle = "black";
        //pincel.fillRect(100,200, 140,70);

        pincel.fillStyle = "black";
        pincel.fillRect(100,190, 40,110);
        pincel.fillStyle = "black";
        pincel.fillRect(100,190, 40,110);
        pincel.fillStyle = "black";
        pincel.fillRect(200,190, 40,110);



    </script>

  </body>
</html>