Duvida sobre o input de cores | JavaScript e HTML: desenvolva um jogo e pratique lógica de programação

Resumindo bem eu construiu uma especie de paint onde você tem algumas cores dentro de um array que são selecionadas ao vc clicar em botões e assim você pode ir desenhando no canvas, meu problema foi que ao avançar nos exercicios soube que erá possivel deixar uma cor personalizada usando o <input type="colors">. eu tentei mesclar com o meu pequeno programa mas sempre da errado.

eu usava um sistema onde as cores ficavam dentro dos arrays e os botões selecionavam qual usar, tentei criar dentro do array a cor vinda do imput mas só sai preto.

<canvas width="600" height="400"> </canvas>
<br> Cor personalizada
<input type="color">
<button onclick="escolherCor(6)">Eviar</button>
<br>
<button onclick="quadradoTeste()">teste</button>

<script>
    //cor personalizada
    var personalizada = document.querySelector("input")
    function corPersonalizada(){
        return(personalizada.value)
}
    //array cor
    var cor = ["blue","green", "red", "yellow", "black", "white", corPersonalizada()]

    //tela
    var tela = document.querySelector("canvas")
    var pincel = tela.getContext("2d")

    function escolherCor(x){
        return(x)
    }
    escolherCor(1)
    function quadradoTeste() {
        pincel.fillStyle = cor[escolherCor]
        pincel.fillRect = (0,0,50,50)
    }

    console.log(cor)
</script>

esse não é o codigo completo, mas eu queria fazer algo do tipo. queria que o item 6 do array fosse a cor personalizada, mas sempre que digito no console os itens que contem no array, sempre aparece #000000(cor preta) não importa a cor que esteja no input.

ja tentei de inumeras formas, criei inumerar variaveis e funções e mesmo assim não consegui achar uma maneira de que um item dentro do array fosse mutavel. alguem pode me ajudar?

vou deixar em anexo tambem o programa que estou criando, ele esta um frankestein mas está funcionando(exeto a cor personalizada :P)

espero que possam me ajudar, até uma proxima. :)

o codigo inteiro do programa funcional(menos a cor personalizada é claro) aqui:

<canvas width="600" height="400"> </canvas>
<br>Cores<br>
<button style = "margin-top: 5px; margin-left: 5px; margin-right: 0px" ; onclick="trocaCor(0)">Azul</button>
<button style = "margin-top: 5px; margin-left: 5px; margin-right: 0px" ; onclick="trocaCor(1)">Verde</button>
<button style = "margin-top: 5px; margin-left: 5px; margin-right: 0px" ; onclick="trocaCor(2)">Vermelho</button>
<button style = "margin-top: 5px; margin-left: 5px; margin-right: 0px" ; onclick="trocaCor(3)">Amarelo</button>
<button style = "margin-top: 5px; margin-left: 5px; margin-right: 0px" ; onclick="trocaCor(4)">Preto</button>
<button style = "margin-top: 5px; margin-left: 5px; margin-right: 0px" ; onclick="trocaCor(5)">Branco</button>
 Cor Personalizada
<input type="color">
<button style = "margin-top: 5px; margin-left: 5px; margin-right: 0px" ; onclick="trocaCor(6)">Enviar</button>
<br>Ferramenta<br>
<button style = "margin-top: 5px; margin-left: 5px; margin-right: 0px" ; onclick="canetaF(0)">Pincel</button>
<button style = "margin-top: 5px; margin-left: 5px; margin-right: 0px" ; onclick="canetaF(1)">Borracha</button>

<br>Tamanho do pincel e da borracha<br>
<button style = "margin-top: 5px; margin-left: 5px; margin-right: 0px" ; onclick="setRaio(10)">10</button> 
<button style = "margin-top: 5px; margin-left: 5px; margin-right: 0px" ; onclick="setRaio(20)">20</button> 
<button style = "margin-top: 5px; margin-left: 5px; margin-right: 0px" ; onclick="setRaio(30)">30</button>
<button style = "margin-top: 5px; margin-left: 5px; margin-right: 0px" ; onclick="adcRaio(5)">+5</button>
<button style = "margin-top: 5px; margin-left: 5px; margin-right: 0px" ; onclick="subRaio(5)">-5</button>
<br>(O tamanho do pincel é limitado a um valor entre 10 e 40)


<script>
    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");
    var personalizado = document.querySelector("input")
    function corPersonalizada() {
        return(personalizado.value)
    }


    function triangulo(cor,x_1,y_1,x_2,y_2,x_3,y_3){

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.moveTo(x_1, y_1);
        pincel.lineTo(x_2, y_2);
        pincel.lineTo(x_3, y_3);
        pincel.fill();
    }

    function retangulo (cor, x_inicial, y_inicial, x_final, y_final, borda){

        pincel.fillStyle = cor; 
        pincel.fillRect(x_inicial, y_inicial, x_final , y_final);

        if(borda >=0){
            pincel.fillStroke = "black"
            pincel.strokeRect(x_inicial, y_inicial, x_final , y_final);
        }
    } 

    function circulo(cor, x_inicial, y_inicial, raio){

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x_inicial, y_inicial, raio, 0, 2*3.14);
        pincel.fill()
    }

    function escrever(texto, x, y){

        pincel.fonte="25px Georgia";
        pincel.fillStyle="black";
        pincel.fillText(texto, x, y);
    }
    var numeroCor = 0
    function trocaCor(x){
        numeroCor=x
        }
    var desenha = false
    var ferramenta1 = [0, 1]
    function canetaF(x){
        ferramenta1=x
    }

    var cor = ["blue","green", "red", "yellow", "black", "white", corPersonalizada()]

    var raio = 10
    function desenhoOn(){desenha = true} 
    function desenhoOff(){desenha = false} 

    retangulo("lightgrey", 0, 0, 600, 400)

    function adcRaio(x){raio= raio+x}
    function subRaio(x){raio= raio-x}
    function setRaio(x){raio= x}

    canetaF(0)

    function desenhaCirculo(evento){

        if(raio>40){
        raio = 40
        } 
        if(raio<10){
        raio = 10
        }

        if(desenha == true){
            if(ferramenta1 == 0){

                var x= evento.pageX - tela.offsetLeft;
                var y= evento.pageY - tela.offsetTop;
                circulo(cor[numeroCor], x, y, raio)
            }
        }
    }
    function borracha(evento) {

        if(raio>40){
        raio = 40
        } 
        if(raio<10){
        raio = 10
        }

        if(desenha == true){
            if(ferramenta1 == 1){
                var tamanho = (raio*1.5)
                var x_1 = evento.pageX - tela.offsetLeft -tamanho;
                var x_2 = (tamanho*2);
                var y_1 = evento.pageY - tela.offsetTop -tamanho;
                var y_2 = (tamanho*2);
                retangulo("lightgrey", x_1, y_1, x_2, y_2);


            }
        }
    }
    function mouse(x){
        if(ferramenta1 == 0){
            return(desenhaCirculo(x))
        } if(ferramenta1 == 1){
            return(borracha(x))
        }
    }
    tela.onmousemove = mouse;
    tela.onmousedown = desenhoOn;
    tela.onmouseup = desenhoOff;

</script>

esse codigo é um frankenstei de varios que formei e obviamente precisa de uma polida pra ficar mais limpo, mas gostaria que relevasem isso e me ajudasem a arrumar o problema do array, sei que pode haver formas de resolver o problema tirando ele do array e usando o if ou algo do tipo, mas realmente queria saber o porque o array n conseguir puxar o input, desde ja agradeço a todos. :)

Mergulhe em programação