Com o objetivo de me aprimorar e porque estava entediado, estava aprendendo as tags do Canvas em HTML seguindo a documentação do Mozilla e desenhamos um rosto lá. Tentei fazer o rosto como o Mozilla sugeriu, mas linhas apareceram no meu rosto devido aos valores e não sei por quê.
const canvas = document.querySelector(".canvas");
const ctx = canvas.getContext("2d")
ctx.beginPath()
ctx.arc(75, 75, 60, 0, Math.PI * 2, true)
ctx.moveTo(40, 40)
ctx.arc(50, 50, 10, 0, Math.PI * 2, true)
ctx.moveTo(60, 50)
ctx.arc(100, 50, 10, 0, Math.PI * 2, true)
ctx.moveTo(110, 110)
ctx.arc(80, 110, 30, 0, Math.PI, true)
ctx.stroke()<canvas class="canvas" width="150" height="150"></canvas>Rosto esperado:
Resultado face:
Como você pode ver, estou falando de linhas indesejadas no rosto.
Tudo o que sei e descobri é que, por algum motivo, o xvalor de moveTodeveria ser igual ao raio do círculo e os yvalores deveriam ser os mesmos — mas não sei por quê. Queria perguntar por que isso acontece.
Resumindo, não descobri o porquê, mas por algum motivo, quando brinco com os valores ou quando torno os valores incompatíveis, aparece uma linha.