Inserindo campo de resposta

Olá galera, eu adicionei no meu programa um input e um button, no qual retorna um alert se a resposta está correta ou não. Pensei em um futuro exercício, adicionar uma aleatoriedade na quantidade de blocos brancos, facilitando assim a aprendizagem sobre frações. Não sei como faria isso, mas vou pensar hahahaha. Segue o código:

<meta charset="UTF-8">

<input />
<button> Coloque sua resposta! </button>
<canvas width="600" height="400"></canvas>

<script>
    var input = document.querySelector("input");
    input.focus();

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

    function desenhaQuadrado(x, y, tamanho, cor) {

        pincel.fillStyle = cor;
        pincel.fillRect(x, y, tamanho, tamanho)

        pincel.strokeStyle = "black";
        pincel.strokeRect(x, y, tamanho, tamanho);
    }

    function desenhaTexto(texto, x, y){
        pincel.font = "20px Georgia";
        pincel.fillStyle = "black";
        pincel.fillText(texto, x, y);
    }

    function verificaResposta(){
        if( input.value == "3/4"){ 

        alert("Parabéns, você acertou!!")

        } else {

        alert("ERROU RUDE!!")
        }
    }


    //Quadrados
    for (var posicao = 0; posicao < 400; posicao = posicao + 100 ){
        desenhaQuadrado(posicao, 50, 100, "green");

        if (posicao == 300){
            desenhaQuadrado(posicao, 50, 100, "white");
        }
    }

    desenhaTexto ("Qual é a fração?", 0, 30);


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

</script>

Valeuu!