Indo um pouco mais longe...

Vitor,

A ideia parece boa, mas para não ficar muita descrição como resolver no código vou te passar alguns argumentos como algoritmos para suas análise e conserto.

A classificação de uma fração seria dividendo/divisor, no seu código está ao contrário na sequencia das perguntas 1/2 = 1=> dividendo e 2=> divisor, está ao contrário

Para considerar que o dividendo deve ser sempre menor que o divisor, caso contrário não há fração ou seja fração imprópria. Então preenche com a condição para loops, o dividendo como verde em seguida o divisor em branco na mesma função. Ex: fração 2/3 primeiro preencher 3 quadrados em verde e depois 2 quadrados em branco .Em outra questão, com boas práticas no código é recomendado que não utilize acentos nos nomes das variáveis e funções.

Grato.

mas existem frações com o dividendo maior que o divisor, tem um nome certo pra elas que eu não me lembro agora, mas elas representam por exemplo: 1,2 (6/5)

Vitor,

Desculpa , eu não disse sobre as inexistências das frações, é para você fazer um bom início desenvolvimento sempre começar a construir com as frações próprias e depois as impróprias.

kkk desculpa, mas eu acho q eu n entendi o ponto ainda, voce fala reescrever o codigo de outra maneira? Se for isso, po o codigo funciona se eu passar os numeros atraves do codigo, por exemplo, se eu chamar a função por fracaodecimal(3/5); ela funciona do jeito certinho, da errado é quando passa os numeros por prompt

achei o erro, esta no if, fracao ta com acento, e o da variavel nao, o codigo certo fica assim

<canvas width="600" height="500">

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


function desenhaquadradopartes(x, y){
    pincel.fillStyle = 'green';
    pincel.beginPath();
    pincel.fillRect(x,y,50,50);
    pincel.strokeStyle = 'black';
    pincel.strokeRect(x,y,50,50);

}
function desenhaquadradofracao(x,y){
    pincel.fillStyle = 'white';
    pincel.beginPath();
    pincel.fillRect(x,y,50,50);
    pincel.strokeStyle = 'black';
    pincel.strokeRect(x,y,50,50);
}    

var fracao = parseInt(prompt("Qual é o dividendo??"));
var fracao1 = parseInt(prompt("e o divisor?"));

function fracaodecimal(fracao, fracao1){
    var z = 0
    for(var x = 0; x < fracao; x++){
        desenhaquadradopartes(z,0);
        z = z + 50
    }//fechamento do bloco for q faz a parte do dividendo da fração
    fracao1 = fracao1 - fracao;
    for(var e = 0; e < fracao1; e++){
        desenhaquadradofracao(z,0);
        z = z + 50
    }//fechamento do bloco for parte do divisor
}//fechamento da função fraçãodecimal

function fracaointeira(fracao,fracao1){
    var partesinteiras = parseInt(Math.floor(fracao/fracao1));
    var y = 0;
    for(var i = 0; i < partesinteiras; i++){
        var z = 0;
        for(var e = 0; e < fracao1; e++){
            desenhaquadradopartes(z,y);
            z = z + 50;
        } // fechamento do for q faz o desenho da parte inteira
        y = y + 100;
    } // fechamento do for q faz o controle de quantas vezes desenhar a parte inteira
    var fracaodecimal = fracao - partesinteiras * fracao1;
    z = 0;
    for( var p = 0; p<fracaodecimal; p++){
        desenhaquadradopartes(z,y);
        z = z + 50;
    }//fechamento do bloco for q faz a parte inteira da casa decimal
    var casasvazias = fracao1 - fracaodecimal;
    for(var b = 0; b <casasvazias;b++){
        desenhaquadradofracao(z,y);
        z = z + 50;
    }//fechamento do bloco for do dividendo da ultima parte


}

if(fracao < fracao1){
    fracaodecimal(fracao, fracao1);

}

if(fracao1 < fracao){
    fracaointeira(fracao, fracao1);
}

</script>

Vitor,

Ficou bom, atendeu os requisitos sobre frações, parabéns. Boa dedicação.