1
resposta

Fui um pouco além o que acham?

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

    const tela = document.querySelector('canvas');
    const pincel = tela.getContext('2d');

    var quantidade = parseInt(prompt('Digite a quantidade de quadrados.'));
    var tamanho = parseInt(prompt('Digite o tamanho.'));
    if(quantidade && tamanho){
        var color = prompt('Digite a cor em inglês');
        desenhaNaQuant(quantidade, tamanho, color);
    }else{
        alert('Recarregue a página e digite corretamente.')
    }


    function desenhaQuadrado(x, y, tamanho){
        pincel.fillStyle = color;
        pincel.fillRect(x, y, tamanho, tamanho, color);
        pincel.fillStroke = 'black';
        pincel.strokeRect(x, y, tamanho, tamanho);
    }
    function desenhaNaQuant(quantidade, tamanho){
        var colunas = parseFloat(tela.width/tamanho);
        var linhas = (quantidade/colunas);
        var linhasFr = (linhas - parseInt(linhas));
        var contadorX = 0;
        var contadorY = 0;
        if(linhas*tamanho <= tela.height){
            while(0 < quantidade){
                while(contadorX < colunas){
                    desenhaQuadrado(contadorX*tamanho, contadorY*tamanho, tamanho);
                    quantidade--;
                    contadorX++;
                    //console.log(contadorX);
                    if(quantidade == 0){
                        break
                    }
                }
                contadorY++;
                contadorX = 0;
            }
        }else{
            console.log('caiu');
            while(0 < quantidade && (contadorY+1)*tamanho <= tela.height){
                while(contadorX < colunas){
                    desenhaQuadrado(contadorX*tamanho, contadorY*tamanho, tamanho);
                    quantidade--;
                    contadorX++;
                    //console.log(contadorX);
                    if(quantidade == 0){
                        break
                    }
                }
                contadorY++;
                //console.log(contadorY);
                contadorX = 0;
            }
            console.log(contadorY);
            pincel.font = '17px Georgia';
            pincel.fillStyle='white';
            pincel.fillText('Não é possível desenhar mais, dado que a "tela" tem width= 600 e height=400.', 0, tela.height/2);
        }    
    }

</script>
1 resposta

Oi Jeandrew

Ficou muito bom, utilizou muitos conceitos em seu exercício.

Parabéns pelo empenho nos estudos!

Continue praticando e qualquer dúvida pode contar com a gente.