A cara do CREEPER | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Segue meu código do primeiro exercício da lógica de programação 2. Repeti sempre a cor de cada item que adicionei pois sou iniciante na área e não quis deixar igual do professor rs.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lógica de programação 2</title>
</head>
<body>
    <h1>Exercício CREEPER</h1>
    <canvas width="450" height="400"></canvas>

    <script>
        //Criando a tela
        var tela = document.querySelector("canvas");
        var pincel = tela.getContext("2d");

        //Background
        pincel.fillStyle = "darkgreen";
        pincel.fillRect(0, 0, 450, 400);

        //Olhos
        pincel.fillStyle = "black";
        pincel.fillRect(90, 70, 100, 90);
        pincel.fillStyle = "black";
        pincel.fillRect(270, 70, 100, 90);

        //Nariz
        pincel.fillStyle = "black";
        pincel.fillRect(190, 160, 80, 130);

        //Boca
        pincel.fillStyle = "black";
        pincel.fillRect(130, 220, 60, 160);
        pincel.fillStyle = "black";
        pincel.fillRect(270, 220, 60, 160);

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