Yogesh Chauhan's Blog

How to Draw a Circle in HTML5 Using Canvas Tag?

in HTML on October 25, 2019

This article uses <canvas> tag in HTML5. Learn the basic in the previous article by clicking Canvas Drawing in HTML5.

I have another post on how to draw a line using canvas tag.

Just the way we drew a line, we can draw a circle on a canvas. To draw a circle we need methods from start point to finish the drawing. It’s a simple method to remember actually and that is beginPath() and just like you have guessed it form it’s name, it begins the path or the drawing start point.

Then just like we use in math, a circle requires radius and the x and y axis. Same way we will use the method arc() to create the curve or arc and pass some more values to create a whole circle.

For example: 


canvasObject.arc(70, 70, 60, 0, 2 * Math.PI);

In the example above, the first two values are for x and y axis. The value 60 is for the radius or in other words, how big you want the circle to be. If you want larger circle, increase that number. 

If you want to write down a syntax, it would be like this:


arc(x-axis,y-axis,radius,starting angle,ending angle)

Make sure to use the x and y axis values lower than the radius or your circle will end up outside your canvas.

We are using arc() method to draw a circle so we need to set the angles in the equation exactly 0 and 2*Math.PI. If you try to set the first value to any other number, it won’t draw a full circle but it will draw an arc of that angle. Similarly, for the 2nd angle, if we try to change value to 1*Math.PI then it won’t fully finish the circle either.

The PI property of Math object returns 3.14 which is the ratio of a circle’s area to the square of its radius.


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
How to create a Progress Bar using JavaScript?JavaScriptHow to Remove PHP File Extensions From Your Website URLs?PHPJavaScript Input Validation Theme Park Example using throw StatementJavaScriptbin2hex() and chr() String Functions in PHPPHPUse inline if to make a shorter conditional syntax in ReactReactHow to zoom an image inside a box on hover?CSS