[Proyecto] Implementación con funciones

Comparto mi solución para este ejercicio. Usé una función que toma la figura a dibujar (su ancho y alto), las coordenadas donde se representará y el color del gráfico:

<meta charset="UTF-8">

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

<script>
    const screen = document.querySelector("canvas");
    const brush = screen.getContext("2d");

    const head = {
        width: 350,
        height: 300
    }
    const eye = {
        width: 90,
        height: 90

    }
    const nose = {
        width: 70,
        height: 100
    }
    const mouth = {
        width: 40,
        height: 110
    }



    function drawRect(measure, x, y, drawFromCenter = false, color = 'black') {
        if (drawFromCenter) {
            x -= measure.width / 2; // half width
            y -= measure.height / 2; // half height
        }

        brush.fillStyle = color;
        brush.fillRect(x, y, measure.width, measure.height);
    }

    drawRect(head, 300, 200, true, 'darkgreen');

    drawRect(eye, 180, 105);
    drawRect(eye, 328, 105);

    drawRect(nose, 270, 195);

    drawRect(mouth, 230, 240);
    drawRect(mouth, 340, 240);
</script>