Les comparto mi codigo con posibilidad de cambiar el tamaño

¡Hola Brianca!

Gracias por compartir tu código con nosotros. Parece que has creado un dibujo del Creeper de Minecraft utilizando el elemento canvas de HTML y JavaScript.

En cuanto a tu pregunta, si lo que deseas es permitir que el tamaño del canvas se pueda cambiar y que el Creeper se mantenga centrado y en proporción, puedes utilizar JavaScript para hacerlo. Una forma de hacerlo es utilizando el evento "resize" del objeto window para detectar cuando se cambia el tamaño de la ventana y luego ajustar el tamaño del canvas y las dimensiones del Creeper en consecuencia.

Aquí te dejo un ejemplo de cómo podrías hacerlo:

<canvas id="canvas"></canvas>

<script>
  const canvas = document.getElementById('canvas');
  const context = canvas.getContext('2d');

  // Dimensiones iniciales del Creeper
  let faceWidth = 350;
  let faceHeight = 300;
  let eyesWidth = 90;
  let eyesHeight = 90;
  let noseWidth = 70;
  let noseHeight = 100;
  let moustacheWidth = 40;
  let moustacheHeight = 110;

  function drawCreeper() {
    // Limpia el canvas
    context.clearRect(0, 0, canvas.width, canvas.height);

    // Obtiene las dimensiones de la ventana
    const windowWidth = window.innerWidth;
    const windowHeight = window.innerHeight;

    // Calcula las nuevas dimensiones del Creeper
    const aspectRatio = faceWidth / faceHeight;
    const newFaceWidth = Math.min(windowWidth * 0.8, windowHeight * 0.8 * aspectRatio);
    const newFaceHeight = newFaceWidth / aspectRatio;
    const newEyesWidth = newFaceWidth * eyesWidth / faceWidth;
    const newEyesHeight = newFaceHeight * eyesHeight / faceHeight;
    const newNoseWidth = newFaceWidth * noseWidth / faceWidth;
    const newNoseHeight = newFaceHeight * noseHeight / faceHeight;
    const newMoustacheWidth = newFaceWidth * moustacheWidth / faceWidth;
    const newMoustacheHeight = newFaceHeight * moustacheHeight / faceHeight;

    // Dibuja el Creeper con las nuevas dimensiones
    const faceX = (windowWidth - newFaceWidth) / 2;
    const faceY = (windowHeight - newFaceHeight) / 2;
    context.fillStyle = 'darkgreen';
    context.fillRect(faceX, faceY, newFaceWidth, newFaceHeight);
    context.fillStyle = 'black';
    context.fillRect(faceX + newFaceWidth / 2 - newNoseWidth / 2, faceY + newFaceHeight - newMoustacheHeight, newMoustacheWidth, newMoustacheHeight);
    context.fillRect(faceX + newFaceWidth / 2 + newNoseWidth / 2, faceY + newFaceHeight - newMoustacheHeight, newMoustacheWidth, newMoustacheHeight);
    context.fillRect(faceX + newFaceWidth / 2 - newNoseWidth / 2, faceY + newFaceHeight - newMoustacheHeight - newNoseHeight / 2, newNoseWidth, newNoseHeight);
    context.fillRect(faceX + newFaceWidth / 2 - newNoseWidth / 2 - newEyesWidth, faceY + newFaceHeight - newMoustacheHeight - newNoseHeight / 2 - newEyesHeight, newEyesWidth, newEyesHeight);
    context.fillRect(faceX + newFaceWidth / 2 + newNoseWidth / 2, faceY + newFaceHeight - newMoustacheHeight - newNoseHeight / 2 - newEyesHeight, newEyesWidth, newEyesHeight);
  }

  // Dibuja el Creeper inicialmente
  drawCreeper();

  // Redibuja el Creeper cuando se cambia el tamaño de la ventana
  window.addEventListener('resize', drawCreeper);
</script>

Espero que esto te ayude. ¡Buenos estudios!