Mi HTML Creeper | 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>canvas</title>
</head>
<body>
    <canvas width="600" height="400" id="creeper"></canvas>

    <script>
        let screen = document.getElementById('creeper');
        let pencil = screen.getContext('2d');

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

        pencil.fillStyle = "black"
        // Ojos
        pencil.fillRect(50,55,90,90); 
        pencil.fillRect(210,55,90,90);
        //Nariz
        pencil.fillRect(140,145,70,100); 
       // boca 
        pencil.fillRect(100,190,40,110); 
        pencil.fillRect(210,190,40,110); 


    </script>

</body>
</html>