Circles on HTML Canvas

Example

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

Try it yourself

Draw a circle

To draw a circle on the canvas, use the following methods:

• beginPath() - Start path
• arc(x,y,r,start,end) - Define the circle
• stroke() - Draw

arc(x,y,r,start,end) - Create an arc (curve).

To create a circle, set the start angle to 0 and the end angle to 2 * Math.PI.

The x and y parameters define the coordinates of the circle's center.

The r parameter defines the radius of the circle.

See also:

Complete Canvas Reference Manual of CodeW3C.com