How to Draw Circle in HTML5 Canvas Using JavaScript

Graphics are an important part of any web application. HTML provides two ways to create graphics, the first is canvas and another one is SVG. In today’s post, we are going to learn how to create graphics particularly circles (2 dimensional) in HTML using canvas and JavaScript.

Draw Circle by canvas in HTML Using JavaScript

Canvas is a default element provided by HTML which is used to draw graphics on web applications. It is nothing but a rectangle area on the page with no border and content. Users can use this rectangle area to draw graphics.

Graphics rendered in canvas are different than regular HTML and CSS styling. The entire canvas with all the graphics it contains is treated as a single dom element.

Methods of canvas in HTML

1. getContext(): It is an in-built method provided by canvas that returns the drawing context on canvas depending on the contextType. If context identifier is not supported or is already set it will return null. Supported context types are 2d, webgl, webgl2, and bitmaprenderer.
2. beginPath(): It is an in-built method provided by canvas that begins the path or resets the already existing path to draw the graphics.
3. arc(): It is an in-built method provided by canvas that is used to create an arc of the circle on the current path based on the input parameters.
4. fill(): It is an in-built method provided by canvas that is used to fill the current path with the specified color. Users can also specify the region like nonzero and evenodd.
5. stroke(): It is an in-built method provided by canvas that is used to outline the current path with the given stroke style.

Syntax of arc

context.arc(
    $centerX, $centerY, $radius, $startAngle, $endAngle, $counterclockwise);

Parameters

• $centerX: It is a mandatory parameter that specifies the X or horizontal co-ordinate/center point of the circle.
• $centerY: It is a mandatory parameter that specifies the Y or verticle co-ordinate/center point of the circle.
• $radius: It is a mandatory parameter that specifies the radius of the circle. This must be positive.
• $startAngle: It is a mandatory parameter that specifies starting angle of an arc in radians measured from the positive x-axis.
• $endAngle: It is a mandatory parameter that specifies the ending angle of an arc in radians measured from the positive x-axis. For eg, 2 * Math.PI for a full circle.
• $counterclockwise: It is an optional parameter that specifies a boolean value which indicates how a circle will be drawn clockwise or counterclockwise. The default value is false.

Steps to Draw a Circle Using JavaScript Canvas

Example code:

<canvas id="myCanvas" width="500" height="200"></canvas>

<script>
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 50;

context.beginPath();
context.fillStyle = '#0077aa';
context.strokeStyle = '#0077aa47';
context.lineWidth = 2;

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fill();
context.stroke();
</script> 

Output: