Alternativa al ejercicio [Experiencia personal]

Hola compañeros, buenas tardes.

Quiero compartirles una alternativa al reto de la paleta de colores.

Cuando dimos por primera vez el <input> en HTML me tome la tarea de revisar letra por letra ya que en VS code lo coloca así : <input type="text>", y con las diferentes letras encontré diferentes opciones, como fechas, hora, números, etc. y entras esas había una de colores que fue la que usé para este ejercicio.

El primer inconveniente con el que me encontré fue que a pesar de declarar el <input type="color"> y asignar var colores = document.querySelector("input"); así como pincel.fillStyle = colores;, el mouse no registraba le color y esto es porque al definir el pincel.fillStyle = colores, no funcionaba, y buscando en internet encontré debí agregarle el .value a colores para que la función agarrara el valor del color que se selecciona.

Luego quise agregar un elemento que me permitiera cambiar el tamaño del pincel. y el inconveniente acá fue que el código solo agarra el primer <input> entonces al momento de tratar de dibujar no pasaba nada, porque había cambiado el radio por pincel.arc(x, y, tamanioPincel.value, 0, 2 * Math.PI); me tocó buscar nuevamente en internet y encontré a los se les puede asignar un "id" en HTML, para no hacerlo más largo, acá les comparto el código de este mini paint.

<canvas width="600" height="400"></canvas>
<input type="color" id = "color">
<input type="number" id = "tamanio">

<script>
    var pantalla = document.querySelector ("canvas");
    var pincel = pantalla.getContext("2d");
    var colores = document.querySelector("#color");
    var tamanioPincel = document.querySelector("#tamanio");


    pincel.fillStyle = "White";
    pincel.fillRect (0, 0, 600, 400);

    function dibujarSostenido(evento) {
        if (dibujando) {
            var x = evento.pageX - pantalla.offsetLeft;
            var y = evento.pageY - pantalla.offsetTop;

            pincel.fillStyle = colores.value;
            pincel.beginPath();
            pincel.arc(x, y, tamanioPincel.value, 0, 2 * Math.PI);
            pincel.fill();
        }

    }

    function dibuja() {
        dibujando = true;        
    }

    function noDibuja() {
        dibujando = false;        
    }

    pantalla.onmousemove = dibujarSostenido;
    pantalla.onmousedown = dibuja;
    pantalla.onmouseup = noDibuja;


</script>