Sempre que é invocado o comando arc, nos exemplos é utilizado o comando c.beginPath, porém estou realizando sem a função e obtendo o mesmo resultado.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Sempre que é invocado o comando arc, nos exemplos é utilizado o comando c.beginPath, porém estou realizando sem a função e obtendo o mesmo resultado.
Eu verifiquei que quando utilizada a função arc sem o beginPath, de alguma forma o brush entende que deve ligar os pontos... Desta forma, se você utilizar diversos arc vai formar uma forma geométrica de acordo com as posições de cada elemento.
No meu caso, seu eu utilizar beginPath na função arc, ele pega a cor de fundo do quadrado verde. Agora retirando essa função funciona.
<canvas id="tela" width="600" height="400"></canvas>
<script>
function desenhaQuadradoVerde(x, y) {
var tela = document.getElementById("tela");
var c = tela.getContext("2d");
c.fillStyle = "green";
c.fillRect(x, y, 50, 50);
c.fill();
c.strokeStyle = "black";
c.strokeRect(x, y, 50, 50);
}
function desenhaQuadradoVermelho(x, y) {
var tela = document.getElementById("tela");
var c = tela.getContext("2d");
c.fillStyle = "red";
c.fillRect(x, y, 50, 50);
c.fill();
c.strokeStyle = "black";
c.strokeRect(x, y, 50, 50);
}
function desenhaBolaAzuis(x, y) {
var tela = document.getElementById("tela");
var c = tela.getContext("2d");
c.fillStyle = "blue";
c.arc(x, y, 25, 0, 2 * Math.PI);
c.fill();
}
for(var x = 0; x < 600; x = x + 50) {
desenhaQuadradoVermelho(x, 0);
desenhaQuadradoVerde(x, 50);
desenhaBolaAzuis(x, 100);
}
</script>