Pacman

Boas

Ao invés de adicionar um círculo, como na bandeira, resolvi colocar um pacman azul no lugar.

Com isso, percebi que o programa inverte as coordenadas que adicionamos para criar um circulo. Ele executa as coordenadas dos ângulos de forma espelhada.

ex: Se eu adiciono a coordenada para ele iniciar no ângulo de 45º(pi/4) e terminar no ângulo de 225º(5pi/4), ele faz exatamente o oposto, ele inicia em 135º e termina em 315º.

É normal ele agir dessa forma ou é só comigo que acontece isso?

Outra dúvida: Existe algum modo de desenhar o pacman direramente sem ter que criar e sobrepor a metade de 2 círculos?

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

<script>

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

    pincel.fillStyle = "darkgreen";
    pincel.fillRect(0,0,600,400);

    pincel.fillStyle = "yellow";
    pincel.beginPath();
    pincel.moveTo(300,50);
    pincel.lineTo(50,200);
    pincel.lineTo(550,200);
    pincel.fill();

    pincel.fillStyle = "yellow";
    pincel.beginPath();
    pincel.moveTo(50,200);
    pincel.lineTo(300,350);
    pincel.lineTo(550,200);
    pincel.fill();

    pincel.fillStyle = "darkblue";
    pincel.beginPath();
    pincel.arc(300,200,100,3.14/4, 5*3.14/4);
    pincel.fill();

    pincel.fillStyle = "darkblue";
    pincel.beginPath();
    pincel.arc(300,200,100,3*3.14/4, 7*3.14/4);
    pincel.fill();


</script>