Meu creeper a partir do inicio do canvas.

Opa, espero que estejam bem,

Dei uma olhada nas soluções apresentadas pela galera e pelo menos as que eu vi, nenhuma estava igual a minha.

Confesso que quebrei a cabeça para calcular a largura e a altura, não sei se foi só eu. Soma pra cá, subtração pra la, comparando com o meio, foi meio confuso haha. No final deu bom.

<canvas width='600' height='400'>  </canvas>

<script>

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

    var pincel = tela.getContext('2d');

    pincel.fillStyle = 'darkgreen';
    pincel.fillRect(0,0,350,300); //cabeça

    pincel.fillStyle = 'black'
    pincel.fillRect(50,60 , 90 , 90); //olho esquerdo
    pincel.fillRect(210,60 , 90, 90); //olho direito

    pincel.fillRect(140,150 , 70 , 100); //nariz

    pincel.fillRect(100,190 , 40 , 110); //boca esquerda
    pincel.fillRect(210,190 , 40 , 110); //boca direita

</script>