Curva do Canvas HTML

Exemplo

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100, 50, 50, 0, Math.PI);
ctx.stroke();

Experimente você mesmo

Método arc()

Um arco é uma parte do círculo e é definido pelas coordenadas do centro e o raio:

Desenhar arco no Canvas

Use o caminho do canvas para desenhar arcos:

Para desenhar um círculo no canvas, use os seguintes métodos:

• beginPath() - Iniciar caminho
• arc(x,y,r,start,end) - Define o círculo
• stroke() - Desenhar

arc(x,y,r,start,end) - Cria um arco (curva).

Para criar um círculo, defina o ângulo inicial como 0 e o ângulo final como 2 * Math.PI.

Os parâmetros 'x' e 'y' definem as coordenadas do centro do círculo.

O parâmetro 'r' define o raio do círculo.

Veja também:

Manual Completo do Canvas do CodeW3C.com