Exercício Paint com Input para pegar Cor | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Segue alteração do exercício com o input para pegar a cor. Mantendo a opção de aumentar/diminuir o pincel com Shift e Control.

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Desenhando na tela com troca de cor</title>
</head>
<body>
    <div>
        <p>Clique ao lado e escolha a cor: <input type="color" name="cor" id="selectCor"></p>
            <canvas id="tela" width="600px" height="400px"></canvas>
            <script src="tela.js"></script>

    </div>
</body>
</html>

const tela = document.querySelector("#tela");
const pincel = tela.getContext("2d");
let cores = document.querySelector("#selectCor");
pincel.fillStyle="lightgray";
pincel.fillRect(0,0,600,400);
let raio = 5;
let mouseFlag=false;

tela.onmousemove= function (evento){
    if(mouseFlag){
    let posX = evento.pageX - tela.offsetLeft;
    let posY = evento.pageY - tela.offsetTop;
    pincel.fillStyle=cores.value;
    pincel.beginPath();

        if(evento.shiftKey && raio>=2 && raio<40){
            raio+=0.1;    
        }else if(evento.ctrlKey && raio-2>=2){
            raio-=0.1;
        }
    pincel.arc(posX,posY,raio,0,2*Math.PI)
    pincel.fill();
    }
}

tela.onmousedown = function(){
    mouseFlag=true;};

tela.onmouseup = function(){
    mouseFlag=false;
};

Tela Insira aqui a descrição dessa imagem para ajudar na acessibilidade