Criei uma barra de chocolate no formato de quadrados e quero compartilhar com vocês.
<canvas width="600" height="400"></canvas>
<script>
document.write('<h1>Barra de Chocolate</h1>')
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
function adicionaBarraChocolate(x, y) {
pincel.fillStyle = 'SaddleBrown';
pincel.fillRect(x, y, 50, 50);
pincel.fillStroke = 'black';
pincel.strokeRect(x, y, 50, 50);
}
adicionaBarraChocolate(0, 0);
adicionaBarraChocolate(50, 0);
adicionaBarraChocolate(100, 0);
adicionaBarraChocolate(150, 0);
adicionaBarraChocolate(0, 50);
adicionaBarraChocolate(0, 100);
adicionaBarraChocolate(0, 150);
adicionaBarraChocolate(0, 200);
adicionaBarraChocolate(50, 50);
adicionaBarraChocolate(50, 100);
adicionaBarraChocolate(50, 150);
adicionaBarraChocolate(50, 200);
adicionaBarraChocolate(100, 50);
adicionaBarraChocolate(100, 100);
adicionaBarraChocolate(100, 150);
adicionaBarraChocolate(100, 200);
adicionaBarraChocolate(150, 50);
adicionaBarraChocolate(150, 100);
adicionaBarraChocolate(150, 150);
adicionaBarraChocolate(150, 200);
</script>Na tela do navegador:
