Usuário entrando com numerador e denominador, como resolver frações para frações impróprias com esse código?

Boa noite André, tudo certo?

Antes de entrar no assunto do tópico, vou deixar algumas dicas para facilitar a comunicação quando você for abrir outro tópico ou interagir em comunidades:

• Além do título, descreva melhor o seu problema no corpo do tópico. Explique o que você tem em mente, qual resultado gostaria de obter, qual é o comportamento indevido que está acontecendo e outras informações que possam ser relevantes para o problema
• Utilize as funcionalidades do fórum! O fórum da Alura tem funcionalidades de formatação de texto que podem te ajudar bastante a passar uma ideia. Você pode cercar o seu código por ``` (três backticks) e assim criar um bloco de código, que vai facilitar a legibilidade.

Deixo aqui um artigo com algumas outras dicas que podem te ajudar bastante futuramente!

Agora sobre a questão:

Você pode utilizar uma cor diferente para representar o que seria um valor que "sobrou" da razão imprópria. Sendo assim, bastaria fazer um if dentro do primeiro laço for:

if ( contador > denominador){
    desenhaQuadrado(x, 50, 100, "yellow");
}

Além disso, tomei a liberdade de fazer algumas alterações no seu código, como tirar algumas linhas da função desenhaQuadrado que não eram relativas à ela. Aqui está o código com minhas alterações:

<canvas width="1600" height="1400"></canvas>

<script>

    function desenhaQuadrado(x, y, tamanho, cor){        
        pincel.fillStyle = cor;
        pincel.fillRect(x,y,tamanho,tamanho);
        pincel.strokeStyle="black";
        pincel.strokeRect(x,y, tamanho, tamanho);

    }

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

    pincel.font='20px Georgia';
    pincel.fillStyle='black';
    pincel.fillText("Qual é a fração?", 50, 30);

    var numerador = parseInt(prompt("Qual o numerador da fração?")); //usuário entra com numerador
    var denominador = parseInt(prompt("Qual o denominador da fração?")); //usuário entra com denominador
    var x=50; //variável x inicializada com valor 50, que é a posição do primeiro quadrado

    for (var contador = 1; contador <= numerador; contador++){ // loop para quadrados do denominador
        desenhaQuadrado(x, 50, 100, "green");
        if ( contador > denominador){
            desenhaQuadrado(x, 50, 100, "yellow");
        }
        x=x+100; //incrementando no tamanho do quadrado
    }

    for (var contador = 1; contador <= (denominador-numerador); contador++){ //laço para os quadrados vazios do denominador
        desenhaQuadrado(x, 50, 100, "white");
        x=x+100;
    }
</script>

Outra possível solução que eu imaginei e vou deixar como desafio é retirar o desenha da borda dos quadrados que estariam "fora".

Continue assim e bons estudos!