<canvas width = "600" height = "600"></canvas>
<script>
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
function desenhaQuadradohorizontal(x , y , cor){
pincel.fillStyle = cor;
pincel.fillRect(x,y,50,50);
pincel.strokeStyle = "black";
pincel.strokeRect(x,y,50,50);
}
for (var x = 0; x <= 300; x = x + 100 ){
desenhaQuadradohorizontal(x,0,"white");
desenhaQuadradohorizontal(50 + x,0, "black");
desenhaQuadradohorizontal(x,100,"white");
desenhaQuadradohorizontal(50 + x,100, "black");
desenhaQuadradohorizontal(x,200,"white");
desenhaQuadradohorizontal(50 + x,200, "black");
desenhaQuadradohorizontal(x,300,"white");
desenhaQuadradohorizontal(50 + x,300, "black");
}
for (var x = 0; x <= 300; x = x + 100 ){
desenhaQuadradohorizontal(x,50,"black");
desenhaQuadradohorizontal(50 + x,50, "white");
desenhaQuadradohorizontal(x,150,"black");
desenhaQuadradohorizontal(50 + x,150, "white");
desenhaQuadradohorizontal(x,250,"black");
desenhaQuadradohorizontal(50 + x,250, "white");
desenhaQuadradohorizontal(x,350,"black");
desenhaQuadradohorizontal(50 + x,350, "white");
}
//escrevendo texto
pincel.font = "25px Times";
pincel.fillStyle = "red";
pincel.fillText("Jogo de Xadrez",120,450);
//continuar exercicio no celular
</script>