Fala, Leandro! Tudo bem contigo?

Desculpe a demora em dar um retorno!

Uma maneira de "mapear" as coordenadas vai muito do quanto é o tamanho do canvas e isso te dará uma direção de onde partir, tendo de início que a posição X e a posição Y iniciam em 0 (canto superior esquerdo)

Com isso partimos do início que se tenho um canvas de x = 400 ey = 400, o meio seráx = 200ey = 200`. Parece simples ( e é), mas já consegue te dar um norte de onde queremos começar. Por exemplo:

Se quero desenhar o quadrado, começando com x = 50, sabemos que metade de x é 200, metade de 200 é 100 e chegamos da metade de 100 que é 50. Agora usamos a mesma lógica para achar o Y, que também é 50.

Veja o quadro abaixo que vai te dar uma boa noção

Uma boa maneira que ver a construção aos poucos, abra o console do seu navegador (F12) e ao lado de Console tem a aba Sources. Nela, selecione no lado esquerdo da linha

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

Ele ficará com uma marcação vermelha (chrome) e dê um refresh na página. Assim acabamos de entrar no modo debbug. Aparecerá uma setinha azul através dela ele rodará parte por parte do código e assim visualizará como está sendo a construção do código.

Espero ter ajudado, Leandro!

Um abraço e bons estudos!!!

Consegui fazer de forma que, ao chamar a função desenhaFracao(), o usuário define o numerador e o denominador para gerar a imagem. Próxima etapa é fazer de forma mais interativa com o usuário, ou talvez usar um Math.random()...

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

<script>
    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.strokeRect(x,y,tamanho,tamanho)
}

function desenhaTexto(texto, x , y) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');

        pincel.font='20px Georgia';
        pincel.fillStyle='black';
        pincel.fillText(texto, x, y);    
}

function desenhaFracao(numerador,denominador){

    var x = 50;

    for(var d=1; d <= denominador; d++){

        if(numerador > 0){
            desenhaQuadrado(x,50,80,'green')
            numerador--
            console.log(numerador)
        } else {
            desenhaQuadrado(x,50,80,'white')
        }

        x += 80;    

    }
}

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

</script>