<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>