Confesso, que esse exercício ficou muitoooooo VERBOSO, mas, me ajudou muito a fortalecer minha lógica e facilitar o aprendizado...
O resultado ficou assim
Solucionado
Confesso, que esse exercício ficou muitoooooo VERBOSO, mas, me ajudou muito a fortalecer minha lógica e facilitar o aprendizado...
O resultado ficou assim
Boa tarde, Para que o código não fique tão longo, recomendo criar uma função, pois, como você verá, o mesmo código se repete várias vezes e aí só mudaríamos os valores. Saudações.
function desenhaCuadro (x,y,w,h,x1){
pincel.fillStyle = "black"
pincel.fillRect(x,y,w,h)
pincel.fillStroke = "white"
pincel.strokeRect(x1,y,w,h)
}Sim amigo claro, a nossa carreira como desenvolvedor, sempre é busca uma solução que automatize um problema, e que essa solução não seja complexa ao ponto de ficar trabalhoso para dar manutenção do código, mais enfim, esse exercício especificamente, me ajudou a exercitar o conteúdo aplicado, por isso que dei uma "sobrenome" de VERBOSO...rsrsrsrs. Só dando um spoiler o código ficou com 279 linhas, pela parte lógica chega ser desnecessário, mais para fixar o conhecimento me ajudou!
Muito bom exercício, posso imaginar quanto tempo foi, Saudações
Pow amigo foi bastante, mais valeu apena, mais se jogasse na repetição do for, ficaria assim...
for(var x = 0; x < 600; x = x + 50 ) {
desenho(x, 0, 'lightblue');
desenho(x, 50, 'lightgray');
} 
Cara, agora vem uma história de superação kkk.
Ontem decidi pegar seu exercício e refazer usando loops, fiquei umas 2 horas pensando num jeito mas deixei pra depois. Agora pouco continuando o curso fui testando aqui e ali e FINALMENTE saiu. Se liga;
<canvas width="600" height="400"></canvas>
<script>
function desenhaQuadradoPreto(x, y) {
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
pincel.fillStyle = "black";
pincel.fillRect(x, y, 50, 50);
}
function desenhaQuadradoBranco(x, y) {
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
pincel.fillStroke = "black";
pincel.strokeRect(x, y, 50, 50);
}
function linha1() {
for (var p = 0; p < 600; p += 100) {
for (var l = 0; l < 400; l += 100)
desenhaQuadradoPreto(p, l);
}
for (var b = 0; b < 600; b += 50){
for (var l = 0; l < 400; l += 100)
desenhaQuadradoBranco(b, l);
}
}
function linha2() {
for (var p = 50; p < 600; p += 100) {
for (var l = 50; l < 400; l += 100)
desenhaQuadradoPreto(p, l);
}
for (var b = 0; b < 600; b += 100){
for (var l = 50; l < 400; l += 100)
desenhaQuadradoBranco(b, l);
}
}
linha1();
linha2();
</script> 
E só ficou mais difícil porque insisti em fazer com bordas kkk
Loops dentro de loops sempre foi meu ponto fraco, mas estou melhorando
PS; 52 Linhas, demais.
Poxa, coloca evolução nisso, ficou muito bom. Não tinha nem se quer tentado ou pensado em loops para esse exercício, é uma ótima solução, meus parabéns!!!!
Cara, seu exercício é foi muito bom, tenho certeza que você não vai mais esquecer.
Porém, os loops salvam nossas vidas. De primeira, no episodio eu já pensei... caramba, imagina fazer um xadrez. Fui quebrando a cabeça com os loops e saiu isso: (Confesso que eu faria o mesmo que você fez, só pra ter o resultado.)
A verdade é que a construção, importa menos do que o resultado entregue, nesse caso. Bons estudos!
<body>
<canvas width="600" height="400"></canvas>
</body>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
var xPincel = 1;
function desenhaQuadrado(x, y, cor){
pincel.fillStyle = cor;
pincel.fillRect(xPincel, y, 50 , 50);
pincel.strokeRect = (xPincel, y, 50, 50);// posição da borda do quadrado
}
desenhaQuadrado(0, 0);//chamando a função, substituimos os valores de cima por x, y e podemos fazer repetições
for(xPincel = 0; xPincel <= 600; xPincel = xPincel + 100){
desenhaQuadrado(xPincel, 0, 'green')
desenhaQuadrado(xPincel, 100, 'green')
desenhaQuadrado(xPincel, 200, 'green')
desenhaQuadrado(xPincel, 300, 'green')
desenhaQuadrado(xPincel, 400, 'green')
}
for(xPincel = 50; xPincel <= 600; xPincel = xPincel + 100){
desenhaQuadrado(xPincel, 50, 'red')
desenhaQuadrado(xPincel, 150, 'red')
desenhaQuadrado(xPincel, 250, 'red')
desenhaQuadrado(xPincel, 350, 'red')
}
</script>
Amigo você tem razão, os loops são uma mão na roda, e objetivo é reforçar o conteúdo aprendido e claro tendo novas ideias e solução isso tornar muito enriquecedor, obrigado por colaborar !!!
nossa pessoal adorei esse exercicio de voces, muito melhor fazer usando comando automatizados para facilitar, digitar várias vezes ajuda a fixar mesmo, mas nem sempre é necessário tudo isso, não vamos usar, precisamos de agilidade.
parabéns a todos pelas idéias