Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Resolução do problema

Segue abaixo a resolução:

2 respostas
solução!
<canvas width="600" height="400"></canvas>

<script>

  function desenhaQuadrado(x, y, tamanho, cor) {

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    pincel.fillStyle = cor;
    pincel.fillRect(x, y, tamanho, tamanho);
    pincel.strokeStyle = 'black';
    pincel.strokeRect(x, y, tamanho, tamanho);
  }

  desenhaQuadrado(50, 50, 100, 'green');
  desenhaQuadrado(150, 50, 100, 'green');
  desenhaQuadrado(250, 50, 100, 'green');
  desenhaQuadrado(350, 50, 100, 'white');



</script>

Bacana amigo, eu tentei centralizar usando CSS, da uma olhada depois ;)

Basicamente acrescentei uma div no html e usei a tag style pra colocar os comandos de centralizar.

    <div>
    <canvas width="600" height="400"></canvas>
    </div>

    <style>
        div {

            margin-top: 180px;
            margin-left: 480px;

        }
    </style>