creeper 2 modos

Olá!! Este exercício treino eu fiz de duas maneira, obviamente para praticar o máximo possível. Confesso que a segunda maneira, com o "lineTo" deu muito trabalho, mas foi interessante fazer desta forma o nariz, boca e o bigode juntos. Não está no código, mas cada linha tem sua descrição, para facilitar uma alteração qualquer, mas como eu disse foi só para experimentar. Já com o "fillRect" , foi muito mais tranquilo. Bons estudos.

usando fillRect( )

<canvas width="630" height="520"></canvas>

<script>
    var face = document.querySelector('canvas');
    var pincel = face.getContext('2d');

    //cabeça
    pincel.fillStyle = '#004500';
    pincel.fillRect(30, 30, 630, 520);

    //olho esquerdo
    pincel.fillStyle = 'black';
    pincel.fillRect(110, 110, 155, 155);
    pincel.fill();

    //olho direito
    pincel.fillStyle = 'black';
    pincel.fillRect(400, 110, 155, 155);
    pincel.fill();

    //nariz
    pincel.fillRect(265, 265, 135, 185);

    //bigode
    pincel.fillRect(400, 355, 100, 270);
    pincel.fillRect(165, 355, 100, 270);
</script>

usando lineTo( )

<canvas width="630" height="520"></canvas>

<script>

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

    //cabeca
    pincel.fillStyle = '#004500';
    pincel.fillRect (30, 30, 630, 520);

    //olho esq
    pincel.fillStyle = 'black';
    pincel.fillRect(110, 120, 155, 155);
    pincel.fill();

    //olho dir
    pincel.fillStyle = 'black';
    pincel.fillRect(400, 120, 155, 155);
    pincel.fill();

    //boca,nariz,bigode
    pincel.fillStyle = 'black';
    pincel.beginPath();
    pincel.moveTo(265,275);
    pincel.lineTo(265,355);
    pincel.lineTo(175,355);  
    pincel.lineTo(175,520);
    pincel.lineTo(265,520);
    pincel.lineTo(265,445);
    pincel.lineTo(395,445);
    pincel.lineTo(395,520);
    pincel.lineTo(485,520);
    pincel.lineTo(485,355);
    pincel.lineTo(400,355);
    pincel.lineTo(400,275);
    pincel.fill();
</script>