Minha solução para o exercício de frações!

Olá, pessoal!

Tudo bem? Segue abaixo meu código para o exercício de fração, busquei fazer o código de forma diferente unindo o conhecimento do módulo passado com o conhecimento desse módulo, portanto, fiz o código com entrada de dados do usuário.

Ainda tenho 0 conhecimento em HTML, portanto, estudei algumas informações sobre a tag input para conseguir utilizar 2 entradas do usuário sem ter conflito de dados, encontrei o getElementById e aprendi a adicionar ID em minhas input's. As input's utilizadas foram para receber do usuário o numerador e denominador e exibir com o fillRect através de uma função com 2 laços de repetição a representação gráfica da fração.

Por gentileza, realizem críticas sobre como posso melhorar meu código. ( Centralizar, deixar a parte HTML mais organizada, posicionar minhas variáveis e funções dentro do código, etc.)

<canvas width="800" height="600"></canvas>
<br>
Digite o numerador:<input id="input1">
<br>
Digite o denominador:<input id="input2">
<br>
<button>Enviar!</button>

<script>

function desenhaQuadrado(x,cor){
    pincel.fillStyle = cor;
    pincel.fillRect(x,270,60,60);
    pincel.strokeStyle = 'Black';
    pincel.strokeRect(x,270,60,60);
}


function exibeQuadradosFracionario(){
    var xDenominador = 0
    for(var x = 0; x < denominador.value; x++){
        desenhaQuadrado(xDenominador,'white');
        xDenominador+=60;
    }

    var xNumerador = 0
    for(var x = 0; x < numerador.value; x++){
        desenhaQuadrado(xNumerador,'green');
        xNumerador+=60;
    }


}


var myCanvas = document.querySelector('canvas');
var pincel = myCanvas.getContext('2d');
var numerador = document.getElementById('input1');
var denominador = document.getElementById('input2');
var button = document.querySelector('button');
numerador.focus();

pincel.fillStyle = 'lightgray';
pincel.fillRect(0,0,800,600);



button.onclick = exibeQuadradosFracionario; 

</script>