Duvida para o futuro.

Olá!

Neste exercício, assim como em uns praticados no curso passado de lógica I. Nós utilizamos uma variável.

var cores = document.querySelector('input');

Para ler uma input do mundo HTML. Minha duvida é se podemos ter mais de um input no mundo HTML? E se sim, como podemos identifica-los quando precisarmos lê-los.

Pois parece que desta forma a cima o document.querySelector, vai ler tudo que for input do html

Agradeço desde já! :3

<canvas width="600" height="400"></canvas>
<br>
Escolha uma cor<input type="color"> 

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    var cores = document.querySelector('input');//Variavel que lê o input do mundo html.

    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 600, 400);

    var clica = false;

    function desenhaCirculo(evento) {

      if(clica){
          var x = evento.pageX - tela.offsetLeft;
          var y = evento.pageY - tela.offsetTop;
          pincel.fillStyle = cores.value;// Utiliza o valor de cores para definir a cor usada.
          pincel.beginPath();
          pincel.arc(x, y, 10, 0, 2 * 3.14);
          pincel.fill();
           console.log(x + ',' + y);
       }


    }

    function clicando(){
        clica = true;

    }

    function naoClica(){
        clica = false;
    }




    tela.onmousemove = desenhaCirculo;
    tela.onmousedown = clicando;
    tela.onmouseup = naoClica;





</script>