Problema com execução de CSS x Javascript | JavaScript | Alura

Oi Eduardo,

Seguem os códigos, a solução de contorno que encontrei por hora foi calcular a relação entre a largura padrão do canvas (300px) e a largura real do objeto. Com isso consegui fazer a aleta ficar responsiva.

HTML

<!DOCTYPE html5>
<html lang="pt-br">
    <meta charset="UTF-8">

    <head>
        <link rel="stylesheet" type="text/css" href="./styles/reset.css">
        <link rel="stylesheet" type="text/css" href="./styles/mainBody.css">
    </head>

    <body>
    <section id="gameDisplayPosition">

            <canvas id="palette">  </canvas>
            <canvas class="canvas"></canvas>

    </section>

    <script src="./js/criaPaleta.js" type="text/javascript"></script>
    </body>
</html>

CSS

    background: #777777;
}


#gameDisplayPosition{
    border: solid #EEEEEE 2px;
    display: inline-block;
    height: 80vh;
    margin: 5% 7.5vw 0 7.5vw;
    width: 85vw;
}

#palette {
    height: 150px;
    width: 100%;
    border: solid #EEEEEE 0px;
    display: inline-block;
}

#canvas{
    border: solid #EEEEEE 2px;

    /* o calculo da altura e feita pela altura total do #gameDisplayPosition subtraindo a autura da #palette */
    height:calc(100% - 256px);
    width: 100%;
    display: inline-block;
}

Javascript

//Calcular a variedade de cores que cabem na tela do usuário
const larguraPaleta = document.getElementById("palette").getBoundingClientRect().width;
const alturaPaleta = document.getElementById("palette").getBoundingClientRect().height;
const coresPorPixel = (256*256*6)/larguraPaleta;

console.log(larguraPaleta+" "+alturaPaleta);
console.log("o numero de cores é "+ coresPorPixel + " vezes maior que o espaço disponivel na paleta");

//Seleção do canvasPaleta
var canvasPaleta = document.getElementById("palette").getContext("2d");
//variaveis globais
var coresRGB = [0, 0, 0];
var x=0;
const umSextoAleta = Math.round(larguraPaleta/6);

console.log("primeiroterco vale "+umSextoAleta);

paletaVermelha();
aletaVermelhaVerde();
aletaverde();
aletaVerdeAzul();
aletaAzul();
aletaAzulVermelha();

function paletaVermelha(){
    console.log(umSextoAleta);

    for(i=0;i < umSextoAleta;i++){
        coresRGB[0]    +=    256/umSextoAleta;
        for (y=0; y<alturaPaleta;y++){
            //parametros iniciais para desenhar os quadrados
            canvasPaleta.fillStyle = "rgb("+coresRGB[0]+","+coresRGB[1]+","+coresRGB[2]+")";
            canvasPaleta.fillRect(x,y,1,1);
        }
        x+=document.getElementById("palette").width/larguraPaleta;
    }
}

function aletaVermelhaVerde(){
    for(i=0;i < umSextoAleta;i++){
        coresRGB[1]    +=    256/umSextoAleta;
        for (y=0; y<alturaPaleta;y++){
            //parametros iniciais para desenhar os quadrados
            canvasPaleta.fillStyle = "rgb("+coresRGB[0]+","+coresRGB[1]+","+coresRGB[2]+")";
            canvasPaleta.fillRect(x,y,1,1);
        }
        x+=document.getElementById("palette").width/larguraPaleta;
    }
    console.log("terminou ambos for x= "+x);
}

function aletaverde(){
    for(i=0;i < umSextoAleta;i++){    
        coresRGB[0]    -=    256/umSextoAleta;
        for (y=0; y<alturaPaleta;y++){
            //parametros iniciais para desenhar os quadrados
            canvasPaleta.fillStyle = "rgb("+coresRGB[0]+","+coresRGB[1]+","+coresRGB[2]+")";
            canvasPaleta.fillRect(x,y,1,1);
        }
        x+=document.getElementById("palette").width/larguraPaleta;
    }
    console.log("terminou ambos for");
}

function aletaVerdeAzul(){
    for(i=0;i < umSextoAleta;i++){
        coresRGB[2]    +=    256/umSextoAleta;
        for (y=0; y<alturaPaleta;y++){
            canvasPaleta.fillStyle = "rgb("+coresRGB[0]+","+coresRGB[1]+","+coresRGB[2]+")";
            canvasPaleta.fillRect(x,y,1,1);
        }
        x+=document.getElementById("palette").width/larguraPaleta;
    }
}

function aletaAzul(){
    for(i=0;i < umSextoAleta;i++){    
        coresRGB[1]    -=    256/umSextoAleta;
        for (y=0; y<alturaPaleta;y++){
            canvasPaleta.fillStyle = "rgb("+coresRGB[0]+","+coresRGB[1]+","+coresRGB[2]+")";
            canvasPaleta.fillRect(x,y,1,1);
        }
        x+=document.getElementById("palette").width/larguraPaleta;
    }
}

function aletaAzulVermelha(){
    for(i=0;i < umSextoAleta;i++){
        coresRGB[0]    +=    256/umSextoAleta;
        for (y=0; y<alturaPaleta;y++){
            canvasPaleta.fillStyle = "rgb("+coresRGB[0]+","+coresRGB[1]+","+coresRGB[2]+")";
            canvasPaleta.fillRect(x,y,1,1);
        }
        x+=document.getElementById("palette").width/larguraPaleta;
    }
}