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

Este fue mi Creeper | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

<canvas width="500" height="500">  </canvas>

<script>

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


    pincel.fillStyle = "darkgreen";  //HEAD
    pincel.fillRect (0,0,500,500);     

    pincel.fillStyle = "black";      //LEFT EYE
    pincel.fillRect (60,100,120,120);  

    pincel.fillStyle = "black";       //RIGHT EYE
    pincel.fillRect (300,100,120,120); 

    pincel.fillStyle = "black";       //NOSE
    pincel.fillRect (180,220,120,150); 

    pincel.fillStyle = "black";       //LEFT MOUTH

    pincel.fillRect (110,350,70,200); 

    pincel.fillStyle = "black";         //RIGHT MOUTh
    pincel.fillRect (300,350,70,300); 

</script>