Ejercicio creeper

En un comienzo, realizo este codigo:

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

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

    //Formulas

    //primero centre la nariz en el eje y, luego busque la mitad de la nariz para centrar en el eje x

    pincel.fillStyle = "darkgreen"; //propiedad
    pincel.fillRect(0, 0, 350, 300); //funcion

    //Nariz:
    //Eje X: (ancho caja / 2) - (ancho nariz / 2)
    //Eje Y: (alto caja / 2)
    pincel.fillStyle = "black"; //propiedad
    pincel.fillRect(350 / 2 - 70 / 2, 300 / 2, 70, 100); //funcion

    //Ojo izquierdo:
    //Eje X: (ancho caja / 2) - ancho ojo - (ancho nariz / 2)
    //Eje Y: (alto caja / 2) - alto ojo
    pincel.fillStyle = "black"; //propiedad
    pincel.fillRect(350 / 2 - 90 - 70 / 2, 300 / 2 - 90, 90, 90); //funcion

    //Ojo derecho:
    //Eje X: (ancho caja / 2) + (ancho nariz / 2)
    //Eje Y: (alto caja / 2) - alto ojo
    pincel.fillStyle = "black"; //propiedad
    pincel.fillRect(350 / 2 + 70 / 2, 300 / 2 - 90, 90, 90); //funcion

    //bigote izquierdo:
    //Eje X: (ancho caja / 2) - ancho bigote - (ancho nariz / 2)
    //Eje Y: (alto caja / 2) + (alto caja / 2) - alto bigote
    pincel.fillStyle = "black"; //propiedad
    pincel.fillRect(350 / 2 - 40 - 70 / 2, 300 / 2 + 300 / 2 - 110, 40, 110); //funcion

    //bigote derecho
    //Eje X: (ancho caja / 2) + (ancho nariz / 2)
    //Eje Y: (alto caja / 2) + (alto caja / 2) - alto bigote
    pincel.fillStyle = "black"; //propiedad
    pincel.fillRect(350 / 2 + 70 / 2, 300 / 2 + 300 / 2 - 110, 40, 110); //funcion
  </script>

luego procedo a utilizar variables quedando como resultado final esto:

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

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

    //Formulas

    //primero centre la nariz en el eje y, luego busque la mitad de la nariz para centrar en el eje x
    var anchoCaja = 350;
    var altoCaja = 300;

    var anchoNariz = 70;
    var altoNariz = 100;

    var anchoOjo = 90;
    var altoOjo = 90;

    var anchoBigote = 40;
    var altoBigote = 110;

    pincel.fillStyle = "darkgreen";
    pincel.fillRect(0, 0, anchoCaja, altoCaja);

    //Nariz:
    //Eje X: (ancho caja / 2) - (ancho nariz / 2)
    //Eje Y: (alto caja / 2)
    pincel.fillStyle = "black";
    pincel.fillRect(
      anchoCaja / 2 - anchoNariz / 2,
      altoCaja / 2,
      anchoNariz,
      altoNariz
    );

    //Ojo izquierdo:
    //Eje X: (ancho caja / 2) - ancho ojo - (ancho nariz / 2)
    //Eje Y: (alto caja / 2) - alto ojo
    pincel.fillStyle = "black";
    pincel.fillRect(
      anchoCaja / 2 - anchoOjo - anchoNariz / 2,
      altoCaja / 2 - altoOjo,
      anchoOjo,
      altoOjo
    );

    //Ojo derecho:
    //Eje X: (ancho caja / 2) + (ancho nariz / 2)
    //Eje Y: (alto caja / 2) - alto ojo
    pincel.fillStyle = "black";
    pincel.fillRect(
      anchoCaja / 2 + anchoNariz / 2,
      altoCaja / 2 - altoOjo,
      anchoOjo,
      altoOjo
    );

    //bigote izquierdo:
    //Eje X: (ancho caja / 2) - ancho bigote - (ancho nariz / 2)
    //Eje Y: (alto caja / 2) + (alto caja / 2) - alto bigote
    pincel.fillStyle = "black";
    pincel.fillRect(
      anchoCaja / 2 - anchoBigote - anchoNariz / 2,
      altoCaja / 2 + altoCaja / 2 - altoBigote,
      anchoBigote,
      altoBigote
    );

    //bigote derecho
    //Eje X: (ancho caja / 2) + (ancho nariz / 2)
    //Eje Y: (alto caja / 2) + (alto caja / 2) - alto bigote
    pincel.fillStyle = "black";
    pincel.fillRect(
      anchoCaja / 2 + anchoNariz / 2,
      altoCaja / 2 + altoCaja / 2 - altoBigote,
      anchoBigote,
      altoBigote
    );
  </script>