How to Draw a Circle in JavaScript?

The drawing of the circle is an important functionality of the JavaScript language. JavaScript is a web application programming language to operate functions. The javascript function is used to add required functionalities on the web pages.

We created the empty and filled circle on a web page using single and multiple colours. Programmers are working with JavaScript to require a "canvas", like an artist is required to create art.

A javascript canvas is showing a rectangular shape on an HTML page. We can add colours, create shapes (circles), and digital artwork using javascript Canvas and other methods.

Setting the Canvas

1. We are setting the javascript canvas. It is necessary before starting the draw circle on the web page using JavaScript.

We can set the canvas with the 2d animation as shown below.

2. We have obtained a reference to the canvas using the getElementById function. Imagine this is locating your canvas using a unique identifier among a stack of canvases.

3. The javascript function is showing a 2D drawing using the "getContext('2d') " on the web page.

4. Imaging, we are preparing our brush for painting on the canvas. Use the '2d' symbol in the script tag for a two-dimensional context.

Drawing a JavaScript Circle

We are using the arc() method for drawing circles using a unique tool in our toolbox.

The arc requires six parameters () method: The circle's coordinates are as follows: - x for the circle's x-coordinate; - y for the circle's y-coordinate; - radius for the circle; - startAngle for the circle's radian starting point; - endAngle for the circle's radian ending point; - anticlockwise for a Boolean value that controls the circle's movement.

This describes how to draw a circle:

• In this case, the beginPath() method is the first and required method, and it applies first.
• You are using the beginPath() method to introduce the brush: "Hey, I want to start a new drawing on the canvas."
• Then, to draw a circle, we invoke the arc() method with the specified arguments. The circle will have the following dimensions: radius = 50, start at 0 radians, end at 2 * Math, and coordinates = 100, 100.PI radians, or a complete circle, and will be depicted in a clockwise manner.
• The Javascript circle fill() method provides a colour for the circle, and the "fillStyle" parameter applies the colour. Consider that we are selecting a paint colour and then using that colour for the circle.
• The "lineWidth" property is used to set the circle's width. We used the property to set the colour using the strokeStyle property. The circle stroke property is used to apply the circle using the stroke() method. This method works for selecting the pencil and drawing the outline of the circle.

Examples

The following examples show the circle with the javascript function.

Example 1:

The following example shows the basic circle drawn using the javascript function and style tags.

Output

The output shows the required circle using javascript.

Example 2:

The following example shows the draw-filled circle using the javascript function and style tags.

Output

The output shows the required circle using javascript.

Example 3:

The following example shows the draw-filled and multicolour circle using the JavaScript function and style tags.

Output

The output shows the required circle using javascript.

Conclusion

JavaScript resembles a toolset for digital artists. It provides a range of tools and techniques, such as arc(), for working with and creating visuals. At the same time, drawing a circle might seem like a modest step, but it represents a significant advancement in knowledge about how JavaScript can be used to interact with the HTML canvas.