A cara do creeper, minha resposta.

Consegui simplificar tudo em funções o que ajudou muito para ler e entender o que estava sendo processado.

<meta charset="UTF-8">
<canvas width="600" height="400"></canvas>
<script>

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


    function mudaCor (cor){
        pincel.fillStyle = cor;
    }

    function retangulo (x,y,ix,iy){
        pincel.fillRect(x,y,ix,iy);
    }
    function triangulo (x,y,mx,my,nx,ny){
        pincel.beginPath();
        pincel.moveTo(x,y);
        pincel.lineTo(mx,my);
        pincel.lineTo(nx,ny);
        pincel.fill();
    }

    mudaCor('lightgrey');
    retangulo(0,0,600,400);

    mudaCor('darkgreen');
    retangulo(120,50,350,300);

    mudaCor('black');
    //olhos
    retangulo(169,100,90,90);
    retangulo(329,100,90,90);
    //nariz
    retangulo(259,190,70,100);

    //boca
    retangulo(329,220,40,110);
    retangulo(219,220,40,110);


</script>