O que há de errado?

Olá, Bruna! Tudo bem? Espero que sim.

Eu dei uma olhada no seu código, testei e tentei fazer algumas alterações. Bom.. os principais erros do programa:

1. Tentar usar uma variável local de uma função(x, por exemplo) em outra função e isso não é possível, há não ser que mude a variável para fora da função, assim você podendo utilizar ela em todas as funções;
   1. Há alguns erros de lógica, mas nesse caso, por ser um código relativamente pequeno.. sugiro que você veja um exemplo e tente fazer de novo. Fique a vontade também para caso haja sucesso, comparar com esse código que você mandou.

Peguei o exercício da fração e refatorei para o que você desejava, aqui está:

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

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

    var num = parseInt(prompt("Qual é o numerador?"));
    var den = parseInt(prompt("Qual é o denominador?"));
    var tam = parseInt(prompt("Qual é o tamanho dos quadrados?"));

    function desenhaQuadrado(x, y, tam, cor){
        pincel.fillStyle = cor;
        pincel.fillRect(x, y, tam, tam);//desenha o quadrado

        pincel.strokeStyle = "black";
        pincel.strokeRect(x, y, tam, tam);//desenha as bordas do quadrado
    }

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

    function desenhaFracao(){
        var x = tam;
        for(var i = 0; i < num; i++){
            desenhaQuadrado(x, 50, tam, "green");
            x += tam;
        }
        for(var i = 0; i < (den - num); i++){
            desenhaQuadrado(x, 50, tam, "white");
            x += tam;
        }
    }

    desenhaTexto("Qual eh a fracao?", tam, 30);

    desenhaFracao();

</script>

Qualquer dúvida, só perguntar. .

Abraçoes e bons estudos!

Obrigada pelo feedback, Amarildo. Seu código faz bem mais sentido. Ainda tenho uma dúvida, no entanto: dependendo do tamanho do quadrado em relação ao comprimento da tela (600x), o usuário terá opções limitadas para numerador e denominador. Ex: se o tamanho é 30, então numerador + denominador poderá ser no máximo 20. Como eu consigo criar um loop no qual o usuário tenha que reinserir numerador e denominador, caso a soma destes exceda 600/tamanho? Eu tentei o seguinte, mas não está dando certo:

var tam = parseInt(prompt("Qual é o tamanho dos quadrados?"));
var totalQuadrados = 600/tam
var contador = 0

while(contador = 0) {

    var num = parseInt(prompt("Qual é o numerador?"));
    var den = parseInt(prompt("Qual é o denominador?"));

    if((num + den) > totalQuadrados) {
        alert("O número total de quadrados deve ser menor ou igual a " + totalQuadrados + ".");
    } else {
        break
    }
}

Olá, Bruna! Tudo bem?

Perceba uma coisa, já que você quer adicionar uma condição, você não precisaria do laço de repetição, é só colocar, caso o número seja maior, colocar o alerta, que é essa parte

if((num + den) > totalQuadrados) {
        alert("O número total de quadrados deve ser menor ou igual a " + totalQuadrados + ".");
    }

E então você coloca tudo que tá fora dentro do else, que assim caso o if não seja verdade, o else será executado, assim você não precisa do laço de uma repetição, deixando seu programa mais limpo/leve. Eu fiz o código colocando exatamente a condição que cê sugere.. é o mesmo código que fiz antes, mas com essas alterações:

var totalQuadrados = 600/tam //declaracao da variavel

//condicao que voce sugeriu, pra nao exceder o tamanho da tela
if((num + den) > totalQuadrados) {
        alert("O número total de quadrados deve ser menor ou igual a " + totalQuadrados + ".");
    } else {
        desenhaTexto("Qual eh a fracao?", tam, 30);
        desenhaFracao();
    }

Note que aqui, coloquei para funções serem executadas apenas se o valor num + den < totalQuadrados, ou seja, caso o if seja falso.

Mas no seu código o erro muito provavelmente está no while, porque você usou apenas um '=' que é usado pra atribuir valores, nesse caso, você deveria ter utilizado '==', que serve pra comparar igualdade, ficando assim:

while(contador == 0) {
}

Tente consertar o seu código primeiro e depois você pode comparar e vê se chegou no resultado que queria. Qualquer dúvida, fique a vontade para perguntar.

Abs e bons estudos!

Amarildo, obrigada novamente pelo feedback. A minha ideia do laço foi para que o usuário pudesse inserir um novo numerador e denominador, sem ter que recarregar a página. Eu já mexi no código e tu estavas certo, faltou colocar == no código. Agora ela está rodando legal. Ele ficou assim:

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

<script>

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

function quadrado(x, y, tam, cor) {

        pincel.strokeStyle = "black";
        pincel.strokeRect(x, y, tam, tam);
        pincel.fillStyle = cor;
        pincel.fillRect(x, y, tam, tam);
}

function texto(txt, x, y) {

    pincel.font = "20px Georgia";
    pincel.fillStyle = "black";
    pincel.fillText(txt, x, y);

}

function desenhaFracao () {

    var x = 0;

    for(var i = 0; i < num; i++) {

    quadrado(x, 80, tam, "green");
    x = x + tam;

    }

    for(var i = 0; i < (den - num); i++) {

    quadrado(x, 80, tam, "white");
    x = x + tam;

    }

}


var tam = parseInt(prompt("Qual é o tamanho dos quadrados?"));
var totalQuadrados = 600/tam;
var contador = 0;

while(contador == 0) {

    var num = parseInt(prompt("Qual é o numerador?"));
    var den = parseInt(prompt("Qual é o denominador?"));

    if((num + den) > totalQuadrados) {
        alert("O número total de quadrados deve ser menor ou igual a " + totalQuadrados + ".");
    } else {
        break;
    }
}

desenhaFracao ();
texto("Qual é a fração?", 30, 50);

</script>