[Proyecto] Creper autoajustable

En este código uso variables como medidas de los elementos de la cara. Utilizando un poco de geometria, mediante una formula calculo las posiciones de los elementos de la cara, por lo que si se cambian las medidas (en un rango razonable) de algun elemento del creper los demas se ajustan. Cualquier sugerencia o comentario son bien recibidas. Si cambiamos las medidas mucho pueden quedar caras muy chistosas.

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

<script>
    let myCanvas = document.querySelector('canvas');
    let cara = myCanvas.getContext("2d");
    let ojos = myCanvas.getContext('2d');
    let nariz = myCanvas.getContext('2d');
    let boca = myCanvas.getContext('2d');

    //Medidas de los elementos
    let wFace = 350;
    let hFace = 300;
    let whEyes = 90;
    let wNose = 70;
    let hNose = 100;
    let wMouth = 40;
    let hMouth = 110;

    let colorFace = "darkgreen";
    let colorElements = "black";

    //CARA
    cara.fillStyle = colorFace;
    cara.fillRect(0,0,wFace, hFace);

    //POSICIONES DE LOS OJOS
    ojos.fillStyle = colorElements;
    //-->cuadro 2
    ojos.fillRect((wFace - whEyes * 2 - wNose)/2, 50, whEyes, whEyes);
    //-->cuadro 3
    ojos.fillRect(((wFace - whEyes * 2 - wNose)/2) + whEyes + wNose,50, whEyes, whEyes);

    //POSICION DE LA NARIZ
    //-->cuadro 4
    nariz.fillStyle = colorElements;
    nariz.fillRect(((wFace - whEyes * 2 - wNose)/2) + whEyes , 50 + whEyes, wNose, hNose);

    //POSICIONES DE LA BOCA
    boca.fillStyle = colorElements;
    //-->cuadro5
    boca.fillRect((wFace - (wMouth * 2 + wNose))/2, hFace - hMouth, wMouth, hMouth);
    //-->cuadro6
    boca.fillRect((wFace - (wMouth * 2 + wNose))/2 + wMouth + wNose, hFace - hMouth, wMouth, hMouth);


</script>