<meta charset="UTF-8">
<canvas width="600" height="400"></canvas>
<script>
var canvasWidth = 600
var canvasHeight = 400
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
function borda(xo, yo, x, y) {
pincel.strokeStyle = "black";
pincel.strokeRect(xo, yo, x, y);
}
function quadrado(cor, xo, yo, x, y) {
pincel.fillStyle = cor;
pincel.fillRect(xo, yo, x, y);
borda(xo, yo, x, y);
}
function preencherHorizontal() {
for(var horizontal = 50; horizontal < canvasWidth; horizontal = horizontal + 50) {
quadrado("green", horizontal, 0, 50, 50);
}
}
function preencherVertical() {
for(var vertical = 50; vertical < canvasHeight; vertical = vertical + 50) {
quadrado("red", 0, vertical, 50, 50);
}
}
function preencherDiagonal() {
for(var diagonal = 50; diagonal < canvasHeight; diagonal = diagonal + 50) {
quadrado("violet", diagonal, diagonal, 50, 50);
}
}
preencherHorizontal();
preencherVertical();
preencherDiagonal();
quadrado("black", 550, 350, 50, 50);
quadrado("white", 0, 0, 50, 50);
</script>
