Círculo de Canvas HTML

Ejemplo

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

pruebe usted mismo

dibujar círculo

Para dibujar un círculo en el lienzo, utilice los siguientes métodos:

• beginPath() - comenzar ruta
• arc(x,y,r,start,end) - definir círculo
• stroke() - dibujar

arc(x,y,r,start,end) - crear un arco (curva).

Para crear un círculo, configure el ángulo de inicio en 0 y el ángulo de finalización en 2 * Math.PI.

x y parámetros definen las coordenadas del centro del círculo.

El parámetro r define el radio del círculo.

Vea también:

Manual de referencia completo de Canvas en CodeW3C.com