1
respuesta

Hechos hasta ahora

<meta charset="UTF-8">
<h1>Escuadra</h1>

<canvas width="600" height="400"></canvas>
<script>
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");

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

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

</script>
<meta charset="UTF-8">
<h1>CREEP</h1>
<canvas width = "600" height="400"></canvas>

<script>

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

    //Cabeza
    pincel.fillStyle = "darkgreen";
    pincel.fillRect(0,0,350,300);

    // Ojos
    pincel.fillStyle = "black";
                  //x,y     
    pincel.fillRect(50,50,90,90);
    pincel.fillRect(210,50,90,90);

    // nariz

    pincel.fillRect(140,140,70,100);

    // parte de la boca

    pincel.fillRect(100,200,40,100);
    pincel.fillRect(210,200,40,100);


</script>
<meta charset="UTF-8">
<h1>ARGENTINA</h1>
<canvas width = "600" height="400"></canvas>

<script>

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

    pincel.fillStyle = "white";
    pincel.fillRect(0,0,600,400);


        //Especificacion color rojo

    pincel.fillStyle = "cyan";
    pincel.fillRect(0,0,600,133);
    pincel.fillRect(0,266,600,133);



    pincel.fillStyle = "white";
    pincel.fillRect(0,133,600,133);

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

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



</script>
<meta charset="UTF-8">
<h1>CANVA</h1>
<canvas width="600" height="400"></canvas>

<script>
   //capturos los eventos de las etiquetas  
    var pantalla = document.querySelector("canvas"); 
    // Trae todo el contenido que este en pantalla
    var pincel = pantalla.getContext("2d");

    Pincel.fillStyle = "lightgrey"
    Pincel.fillRect(0,0,600,400); //Funcion

</script>![Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad](https://cdn1.gnarususercontent.com.br/6/444109/df6b8f5d-3931-4e92-807d-20668b27a4b8.png)  
1 respuesta

Excelente, cuando lleguemos a CSS vas a ver la cantidad de imagenes que podemos crear, incluso con animaciones. saludos y a seguir!