Creeper | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

<!DOCTYPE html>
<html lang="pt-br">
<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>Creeper</title>
</head>
<body>

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

    </canvas>


    <script>
//Retângulo 1: 350, 300 (cabeça).
//Retângulos 2 e 3: 90, 90 (olhos).
//Retângulo 4: 70, 100 (nariz).
//Retângulos 5 e 6: 40, 110 (parte da boca).

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

        // cor de fundo cabeça
        pincel.fillStyle = "darkgreen";
        pincel.fillRect(0,0,350, 300);

        //retangulo 2
        pincel.fillStyle="black";
        pincel.fillRect(50,60,90,90);

        //retangulo 3
        pincel.fillStyle="black";
        pincel.fillRect(210,60,90,90);

        //nariz
        pincel.fillStyle="black";
        pincel.fillRect(140,150,70,100)

        //boca 5
        pincel.fillStyle = "black";
        pincel.fillRect(100,190,40,110);

        //boca 6
        pincel.fillStyle = "black";
        pincel.fillRect(210,190,40,110);

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