<meta charset="UTF - 8">
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas'); //criando canva no javascript
var pincel = tela.getContext('2d'); //criando um pincel em 2d
pincel.fillStyle = "lightgray"; //quando uma cor ao pincel
pincel.fillRect(0, 0, 600, 400); //criando um retângulo
function desenhaQuadrado(x, y, tamanho, cor){
pincel.fillStyle = cor; //dando cor ao pincel
pincel.beginPath(); //resetando o pincel
pincel.fillRect(x, y, tamanho, tamanho); // criando o quadrado
pincel.fill(); //preenchendo o quadrado da ultima cor atribuida ao pincel
pincel.beginPath();//resetando o pincel
pincel.strokeStyle = "black"; //dando cor ao pincel
pincel.strokeRect(x, y, tamanho, tamanho); //criando uma borda ao retangulo
pincel.fill(); //preenchendo o quadrado da ultima cor atribuida ao pincel
}
var tamanho = parseInt(prompt("qual o tamanhos dos quadrados.")); //pedindo ao usuario para atribuir algo a variavel, parseInt transforma de char para int
var x = parseInt(prompt("qual a posição para o eixo x?"));//pedindo ao usuario para atribuir algo a variavel, parseInt transforma de char para int
var y = parseInt(prompt("qual a posição para o eixo y?"));//pedindo ao usuario para atribuir algo a variavel, parseInt transforma de char para int
var quantidade = parseInt(prompt("quantos quadrados deseja fazer?"));//pedindo ao usuario para atribuir algo a variavel, parseInt transforma de char para int
var pr = parseInt(prompt("quantos quadrados deseja preencher?"));//pedindo ao usuario para atribuir algo a variavel, parseInt transforma de char para int
var cor = prompt("qual cor devo preencher?");//pedindo ao usuario para atribuir algo a variavel
var cont = 1;
while(cont <= quantidade){ //laço para criar os quadrados e preenchelos
if(cont > pr){ //quando chega ao numero de quadrados que devem ser preenchidos traca a cor do quadrado para branco atraves da condicional
cor = "white";
}
desenhaQuadrado(x, y, tamanho, cor); //chama a função
x = tamanho + x; //faz o quadrado percorrer o eixo x assim nao ficando no mesmo local
cont++; // controle de laço
}
//espero ter ajudado instagram: felipednew
</script>
