<body>
<canvas width="600" height="400"></canvas>
<script>
function desenhaQuadrado(coordenadaX, coordenadaY, tamanho, corDoPreenchimento, corDaBoorda) {
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = corDoPreenchimento;
pincel.fillRect(coordenadaX, coordenadaY, tamanho, tamanho);
pincel.strokeStyle = corDaBoorda;
pincel.strokeRect(coordenadaX, coordenadaY, tamanho, tamanho);
}
for (let linha = 0; linha < 4 * 50; linha += 50) {
desenhaQuadrado(linha, 0, 50, 'orange', 'black');
if (linha == 150) {
desenhaQuadrado(linha, 0, 50, 'white', 'black');
}
}
</script>
</body>
