Creeper -Solução em função do tamanho do canvas.

Olá a todos! Resolvi dar uma incrementada no desafio baseado no fato do querer um desenho que se ajuste a tamanhos diferentes de canvas. E também fiz a "expressão facial" linkada ao rosto, sendo assim, é possível mudar a posição da cabeça dentro do canvas sem perder o formato correto do rosto.

código:

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


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

    // capturando e convertendo para inteiro as referencias do canvas
    let canvasWidth= parseInt(tela.attributes[0].value);
    let canvasHeight= parseInt(tela.attributes[1].value);

    //canvas
    pincel.fillStyle = "gray";
    pincel.fillRect(0, 0, canvasWidth, canvasHeight);//(x,y,width,height)    

    //*********************************************************************//
    //*********************************************************************//

    //variaveis de referencia da cabeca
    // foi usado como referencia a relação cabeça/canvas dada. (350/600 - 300/400)
    let headWidth = Math.round(canvasWidth * (7/12));
    let headHeight = Math.round(canvasHeight * .75);


    // posição x,y da cabeça
    let xHead = 0;//Math.round((canvasWidth - headWidth)/2);
    let yHead = 0;//Math.round((canvasHeight - headHeight)/2);

    // cabeça
    pincel.fillStyle = "darkgreen";
    pincel.fillRect(xHead, yHead, headWidth ,headHeight);

    //*********************************************************************//    
    //*********************************************************************//

    //variaveis de referencia dos olhos
    // foi usado como referencia a relação olhos/canvas dada. (90/600 - 90/400)
    let sideEyes = Math.round(canvasWidth * .15);
    //betweenEyes = widthNose 
    let betweenEyes = Math.round(canvasWidth *(7/60));

    //OLHO ESQUERDO
    let xEye1 = Math.round(xHead +((headWidth - betweenEyes)/2) - sideEyes);
    let yEye1 = Math.round(yHead + ( headHeight/2) - sideEyes );

    pincel.fillStyle = "black";
    pincel.fillRect(xEye1, yEye1, sideEyes, sideEyes);

    //OLHO DIREITO
    let xEye2 = Math.round( (xEye1+sideEyes) + betweenEyes);
    let yEye2 = yEye1;


    pincel.fillRect(xEye2, yEye2, sideEyes, sideEyes);


    //*********************************************************************//
    //*********************************************************************//

    //NARIZ
    //variaveis de referencia nariz
    // Aqui precisei fazer uma mudança no parametro width para manter a simetria do rosto
    let noseWidth = Math.round(xEye2 - (xEye1 + sideEyes));
    let noseHeight = Math.round(canvasHeight * .25);

    let xNose =  Math.round(xEye1 + sideEyes);
    let yNose =  Math.round(yHead + (headHeight/2));

    pincel.fillRect(xNose, yNose, noseWidth, noseHeight);

    //*********************************************************************//
    //*********************************************************************//

    // BOCA
    //variaveis de referencia boca
    // foi usado como referencia a relação olhos/canvas dada. (40/600 - 110/400)
    let mouthWidth = Math.round(canvasWidth *(1/15));
    let mouthHeight = Math.round(canvasHeight * .275);

    let xMouth1 = Math.round(xNose - mouthWidth);
    let yMouth1 = Math.round(yHead + (headHeight - mouthHeight));

    pincel.fillRect(xMouth1, yMouth1, mouthWidth, mouthHeight);


    let xMouth2 = Math.round(xNose + noseWidth);
    let yMouth2 = yMouth1;

    pincel.fillRect(xMouth2, yMouth2, mouthWidth, mouthHeight);


    //*********************************************************************//
    //*********************************************************************//

</script>

Sugestões e criticas construtivas são muito bem vindas!