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

<!DOCTYPE html>

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

<script>

    var pantalla = document.querySelector("canvas");

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




    pincel.fillStyle = "lightblue";
    pincel.fillRect(0,0,600,130);


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


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



    pincel.fillStyle = "";
    pincel.beginPath()
    pincel.moveTo(300,200)
    pincel.lineTo(380,250)
    pincel.lineTo(360,270)
    pincel.fill()

    pincel.fillStyle = "";
    pincel.beginPath()
    pincel.moveTo(300,200)
    pincel.lineTo(240,120)
    pincel.lineTo(220,140)
    pincel.fill()

    pincel.fillStyle = "";
    pincel.beginPath()
    pincel.moveTo(300,200)
    pincel.lineTo(220,250)
    pincel.lineTo(240,270)
    pincel.fill()

    pincel.fillStyle = "";
    pincel.beginPath()
    pincel.moveTo(300,200)
    pincel.lineTo(380,140)
    pincel.lineTo(360,120)
    pincel.fill()

    pincel.fillStyle = "";
    pincel.beginPath()
    pincel.moveTo(300,200)
    pincel.lineTo(315,110)
    pincel.lineTo(285,110)
    pincel.fill()


    pincel.fillStyle = "";
    pincel.beginPath()
    pincel.moveTo(300,200)
    pincel.lineTo(315,280)
    pincel.lineTo(285,280)
    pincel.fill()

    pincel.fillStyle = "";
    pincel.beginPath()
    pincel.moveTo(300,200)
    pincel.lineTo(210,180)
    pincel.lineTo(210,210)
    pincel.fill()

    pincel.fillStyle = ""
    pincel.beginPath()
    pincel.moveTo(300,200)
    pincel.lineTo(390,210)
    pincel.lineTo(390,180)
    pincel.fill()




</script>