JavaScript - como hago para que al ingresar en el input de html el numero de lineas y color me pinte las lineas

let etiquetaCanvas = document.querySelector("#dibujito")

//variable que garda toda la informacion de la etiqeta//

const texto = document.querySelector("#cantidadLineas")

const color = document.querySelector("#colorLinea")

let lienzo = etiquetaCanvas.getContext("2d")

const boton = document.getElementById("btn")

let ancho = etiquetaCanvas.clientWidth

//activamos elemento de escucha//

boton.addEventListener("click",dibujoPorClick)

//encargado de dibjar por click//

function dibujoPorClick(){

    let lineas = parseInt(texto.value)

    let contarLineas = 0

    let xi, yi, xf, yf

    let usuario = color.value

     console.log(usuario)

    //ciclo que crea las lineas//

while (contarLineas < lineas) {

    yi = (ancho/lineas) * contarLineas

    xf = (ancho/lineas) * (contarLineas+1)

    dibujarLineas(0, yi, xf, 300)

    contarLineas++

}

dibujarLineas(1,1,1,ancho)

dibujarLineas(1,ancho,ancho,ancho)

}

function dibujarLineas( xinicial, yinicial, xfinal,  yfinal){

    //empezamos a dibjar//

    lienzo.beginPath()

    //escogemos tipo de color  linea//

    lienzo.strokeStyle = "red"

    //indico donde empieza el primer punto//

    lienzo.moveTo(xinicial, yinicial)

    lienzo.lineTo(xfinal, yfinal)

    //dibje la linea//

    lienzo.stroke()

    lienzo.closePath()

    }