Círculo no Canvas HTML

Exemplo

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

Experimente você mesmo

Desenhar círculo

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