``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vie

Hola estudiante, Gracias por compartir la solución de tus ejercicios con nosotros. ¿Sabias que puedes interactuar con el resto de tus compañero por nuestro Discord? En Discord el alcance es mayor, la interacción es inmediata y llega a más compañeros de esta forma el foro solo quedaría para esclarecer cualquier duda que puedas tener sobre el contenido de los cursos. Un saludo! <div style="display: inline-block; padding: 3px 3px; background: #ccc; font-size: 0.8em; font-style: italic; border: 1px dashed #FFF">Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios</div>

Haz lo que hicimos en aula | 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>Programa Canvas</title>
</head>
<body>

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

    <!--Se usa para Java script-->
    <script>
        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");

        pincel.fillStyle = "lightgrey"; //propiedad
        pincel.fillRect(0,0,600,400);

        pincel.fillStyle = "green"; //propiedad
        pincel.fillRect(0,0,200,400);

        pincel.fillStyle = "red"; //propiedad
        pincel.fillRect(400,0,200,400);

        pincel.fillStyle = "yellow"; //propiedad
        pincel.beginPath();
        pincel.moveTo(300,200);
        pincel.lineTo(200,400);
        pincel.lineTo(400,400);
        pincel.fill();

        pincel.fillStyle = "blue"; //propiedad
        pincel.beginPath();
        pincel.arc(300,200,50,0,2*3.14);
        pincel.fill();

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

<!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>Document</title>
</head>
<body>

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

    <!--Se usa para Java script-->
    <script>
        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");

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

        pincel.fillStyle = "black";
        pincel.fillRect(140,140,70,100);  //Tronco
        pincel.fillRect(100,190,40,110); //Pierna Izquierda
        pincel.fillRect(210,190,40,110); //Pierna derecha
        pincel.fillRect(210,50,90,90); //Ojo Derecho
        pincel.fillRect(50,50,90,90); //Ojo izquierdo
    </script>
</body>
</html>

<!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>Diseñando una Escuadra</title>
</head>
<body>

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

    <!--Se usa para Java script-->
    <script>
        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");

        pincel.fillStyle = "black"; 
        pincel.beginPath();
        pincel.moveTo(50, 50);
        pincel.lineTo(50,400);
        pincel.lineTo(400,400);
        pincel.fill();

        pincel.fillStyle = "white"
        pincel.beginPath();
        pincel.moveTo(100, 175);
        pincel.lineTo(100, 350);
        pincel.lineTo(275, 350);
        pincel.fill();


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