Canvas com input não funciona

Bom dia!

Eu estava tentando fazer um programa para gerar desenhos de frações, dado o numerador e o denominador, mas quando fui tentar colocar os inputs e o button ele não esta mais gerando o desenho.

<canvas width="600" height="400"></canvas>


<br><br>
Qual o numerador da fração? <input id="input1"><br><br>
Qual o denominador da fração? <input id="input2"><br><br>
Qual cor você quer o desenho? (Digite em inglês e letras minúsculas) <input id="input3"><br><br>
<button>Gerar fração</button>

<script>

var input1 = document.querySelector("#input1").value;
var input2 = document.querySelector("#input2").value;
var input3 = document.querySelector("#input3");

var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');

function desenhaSetorCheio(){

    var anguloCentral = 2*Math.PI/input2
    x=0

    for(y=1;y<=input1;y++){

        pincel.fillStyle = input3
        pincel.beginPath();
        pincel.moveTo(300,200);
        pincel.lineTo(300+100*Math.cos(x),200+100*Math.sin(x));
        pincel.arc(300, 200, 100, x, x+anguloCentral);
        pincel.lineTo(300,200);
        pincel.fill()
        x=x+anguloCentral
    }

    for(x=0;x<=2*Math.PI;x=x+anguloCentral){

    pincel.beginPath();
    pincel.moveTo(300,200);
    pincel.lineTo(300+100*Math.cos(x),200+100*Math.sin(x));
    pincel.arc(300, 200, 100, x, x+anguloCentral);
    pincel.lineTo(300,200);
    pincel.stroke();
    }
}

var button = document.querySelector("button");

button.onclick = desenhaSetorCheio

</script>

O programa inicialmente com os alerts era assim:

<canvas width="600" height="400"></canvas>

<script>

var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');

function desenhaSetorCheio(numerador,denominador,cor){

    var anguloCentral = 2*Math.PI/denominador
    x=0

    for(y=1;y<=numerador;y++){

        pincel.fillStyle = cor
        pincel.beginPath();
        pincel.moveTo(300,200);
        pincel.lineTo(300+100*Math.cos(x),200+100*Math.sin(x));
        pincel.arc(300, 200, 100, x, x+anguloCentral);
        pincel.lineTo(300,200);
        pincel.fill()
        x=x+anguloCentral
    }

    for(x=0;x<=2*Math.PI;x=x+anguloCentral){

    pincel.beginPath();
    pincel.moveTo(300,200);
    pincel.lineTo(300+100*Math.cos(x),200+100*Math.sin(x));
    pincel.arc(300, 200, 100, x, x+anguloCentral);
    pincel.lineTo(300,200);
    pincel.stroke();
    }
}

var numerador = parseInt(prompt("Qual o numerador da fração?"))
var denominador = parseInt(prompt("Qual o denominador da fração?"))
var cor = prompt("Qual cor você quer seu desenho? (Digite em inglês e letras minúsculas")

desenhaSetorCheio(numerador,denominador,cor)

</script>

Se alguém puder me ajudar a inserir os inputs de maneira correta para que o programa fique mais interativo eu agradeço.