How to Draw a Circle in Javascript | How to Draw a Circle on Canvas Using Javascript

To draw a circle in JavaScript and specifically on a canvas element, you can use the getContext method to access the 2D rendering context and then utilize the arc method to create a circle shape. Follow these steps to draw a circle on a canvas using JavaScript:

Step 1: Set up the HTML structure.

In your HTML file, create a <canvas> element with an id attribute to reference it in JavaScript:

<canvas id="myCanvas" width="400" height="400"></canvas>

1	<canvas id="myCanvas" width="400" height="400"></canvas>

Step 2: Access the canvas element in JavaScript.

In your JavaScript file or script section, access the canvas element using the getElementById method:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

1 2	const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d');

Step 3: Draw the circle.

Use the arc method of the 2D rendering context (ctx) to draw a circle. The arc method takes in the X and Y coordinates of the circle’s center, the radius, and the start and end angles (in radians) to define the circle:

const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 50;

ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
ctx.stroke();

const centerX = canvas.width / 2;

const centerY = canvas.height / 2;

const radius = 50;

ctx.beginPath();

ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);

ctx.stroke();

In the code above, we define the centerX and centerY variables to determine the center point of the circle. The radius variable specifies the radius of the circle.

We then call the beginPath method to start a new path and use the arc method to draw the circle. The arc method takes in the center coordinates (centerX and centerY), the radius, and the start and end angles (0 and 2 * Math.PI respectively) to create a full circle.

Finally, the stroke method is used to outline the circle.

Step 4: Customize the circle.

To further customize the circle, you can modify properties such as the stroke color, line width, and fill color. For example:

ctx.lineWidth = 2;
ctx.strokeStyle = 'red';
ctx.fillStyle = 'blue';

ctx.stroke();
ctx.fill();

ctx.lineWidth = 2;

ctx.strokeStyle = 'red';

ctx.fillStyle = 'blue';

ctx.stroke();

ctx.fill();

In the code above, we set the line width to 2, stroke color to 'red', and fill color to 'blue'. Then we call the stroke method to draw the outline of the circle with the updated styles, and the fill method to fill the circle with the specified fill color.