Raio metade?

Olá Eberson,

como foi dito na aula, os primeiros dois parâmetros do método arc são as coordenadas X e Y do centro do círculo, o terceiro parâmetro é o valor do raio e o quarto e quinto parâmetros definem o ângulo inicial e final do círculo.

No caso, o ângulo é dado em números radianos, que vão de 0 a 2*3.14 (equivalente a 360º). Ou seja, como queremos que o círculo varra apenas metade do círculo (180º), vamos então de 0 a 1*3.14.

pincel.arc(100, 100, 50, 0, 1*3.14);

Como o próximo arco começa em 180º e vai até o zero novamente, temos os mesmos parâmetros, porém na ordem inversa:

pincel.arc(200, 100, 50, 1*3.14, 0);

Além disso, alteramos o primeiro parâmetro para deslocar o nosso arco 100 unidades para a direita.

No final, o código inteiro fica assim:

<canvas id="tela" width="600" height="400"></canvas>
<script>
  var tela = document.querySelector('canvas');
  var pincel = tela.getContext('2d');

  pincel.beginPath();
  pincel.arc(100, 100, 50, 0, 1*3.14);
  pincel.arc(200, 100, 50, 1*3.14, 0);
  pincel.fill();
</script>