HTML5 Tutorial: Draw Circles and Arcs on Canvas

Updated on November 17, 2016

In HTML5 we can draw the most beautiful shapes by including circles and arcs in our drawings. In this HTML5 tutorial I will show you how to draw a circle or an arc on a HTML5 canvas. You will see that they are technically not that different from each other. This tutorial has many examples as it is not always straightforward how to draw those circles and arcs the way you want it.

Be sure to read my tutorial on the basics of drawing on the canvas first before continuing with this tutorial. This will explain what a drawing context is and how to use it.

Basic HTML5 webpage

We start this tutorial with a basic empty HTML5 webpage. We have also added some code to see the drawing context that we need to draw later on. You won't see anything when viewing this webpage is a browser. It is a valid HTML5 webpage however and we will extend it in the rest of this tutorial.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>HTML5 Tutorial: Drawing Circles and Arcs</title>
</head>
<body>
<canvas id="mycanvas" width="300" height="300">
</canvas>
<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
</script>
</body>
</html>

The arc method of the drawing context

In the code above we have created a drawing context ctx. Both drawing a circle and drawing an arc are done using the same method arc of the drawing context ctx. This can be done by calling arc(x, y, radius, startAngle, endAngle, counterClockwise) with values filled in for each of these arguments.

The x and y arguments are the x-coordinate and y-coordinate of the arc. This is the center of the arc or circle that you are drawing.
The radius argument is the radius of the circle along which the arc is drawn.
The startAngle and endAngle arguments are the angles where the arc begins and ends in radians.
The counterClockwise argument is a boolean value that specifies whether you're drawing in counter-clockwise direction or not. By default arcs are drawn clockwise but if you have true as argument here then the arc will be drawn counter-clockwise. We will use the value false as we will draw clockwise.

The most important things you need to know about the start and end angles are the following:

  1. The values of these angles go from 0 to 2 * Math.PI.
  2. A start angle of 0 means starting to draw from the 3 o'clock position of a clock.
  3. An end angle of 2 * Math.PI means drawing until the 3 o'clock position of a clock.
  4. All start and end angles in between are measured by going clockwise from the start towards the end (so from 3 o'clock to 4 o'clock all the way back to the 3 o'clock position again). If you have set counterClockwise to true then this goes counter-clockwise.

This means that if you want to draw a circle, you need to start at 0 and end at 2 * Math.PI because you want to start your arc at the 3 o'clock position and you want to draw the arc all the way back to that 3 o'clock position (2 * Math.PI). This makes a full circle. If you want to draw any arc that is not a full circle, you need to pick the start and end angles yourself.

In particular note that you do not specify the length of the arc but only the start and end angles in a predefined system (with 0 at the 3 o'clock position of a circle).

Degrees
Radians
0
0
90
0.5 * Math.PI
180
Math.PI
270
1.5 * Math.PI
360
2 * Math.PI

How are the start and end angle of an arc measured?

The start and end angle of the arc method are measured in radians. Let me quickly explain what that means: a full circle has 360 degrees which is the same as 2 times the mathematical constant pi. In JavaScript the mathematical constant pi is expressed as Math.PI and I will refer to pi like that in the rest of this tutorial.

In the table to the right you'll see the most common start and end angles for your circles and arcs. Look at this table whenever you're confused about what you're exactly drawing and what the angles need to be.

You should use this table if you need to convert degrees to radians in order to draw your arc.

How do you use this table?

Knowing that the arc will be drawn from the 3 o'clock position, determine how far away in degrees the arc will start or stop and lookup the starting angle in radians. For example, if you start drawing at the 6 o'clock position, that's 90 degrees away from the starting point and therefore the start angle is 0.5 * Math.PI.

Similarly, if you end drawing the arc at the 12 o'clock position then you need to use 1.5 * Math.PI because we are now 270 degrees away from the starting point.

How to draw an arc or circle in HTML5

In the sections above I explained the values that you need to specify an arc, such as its location and what the angles are. I'm now going to explain how to actually draw the arc so that it becomes visible on your canvas.

As discussed in a previous tutorial, you can either stroke or fill your arc on the canvas. Here's an example of what a drawing a circle could look like:

ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI, false);
ctx.fillStyle = "rgb(0, 0, 255)";
ctx.fill();

Examples of drawing a circle in HTML5

As explained above we need a start angle of 0 and an end angle of 2 * Math.PI. We cannot vary these values so the only arguments that can vary are the coordinates, the radius and whether or not the circle is drawn counter-clockwise or not.

We're talking about a circle here so the last argument also doesn't matter (it can be either false or true) because you need to draw the whole arc (circle) anyway. The only arguments that matter are therefore the coordinates and the radius.

Here are some examples of drawing a circle in HTML5:

A red circle centered at coordinate (100, 100) with a radius of 50.

ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI, false);
ctx.fillStyle = "rgb(255, 0, 0)";
ctx.fill();

A blue circle with a black border centered at (80, 60) with a radius of 40.

ctx.beginPath();
ctx.arc(80, 60, 40, 0, 2 * Math.PI, false);
ctx.fillStyle = "rgb(0, 0, 255)";
ctx.fill();
ctx.strokeStyle = "black";
ctx.stroke();

Examples of drawing an arc in HTML5

We can now choose the start and end angles of the arcs. Remember to look at the table above with degrees and radians if you are confused. For convenience all the following examples will have an arc centered at (100, 100) and a radius of 50 as these values don't really matter to understand how to draw an arc.

Here are some examples of drawing an arc in HTML5:

A clockwise arc starting from the 3 o'clock position (0) to the 12 o'clock position (1.5 * Math.PI). This is an arc of 270 degrees.

ctx.beginPath();
ctx.arc(100, 100, 50, 0, 1.5 * Math.PI, false);
ctx.lineWidth = 10;
ctx.stroke();

A clockwise arc starting from the 3 o'clock position (0) to the 9 o'clock position (Math.PI). This is an arc of 180 degrees and the bottom half of a circle.

ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI, false);
ctx.lineWidth = 10;
ctx.stroke();

A clockwise arc starting from the 9 o'clock position (Math.PI) to the 3 o'clock position (2 * Math.PI). This is an arc of 180 degrees and the top half of a circle.

ctx.beginPath();
ctx.arc(100, 100, 50, Math.PI, 2 * Math.PI, false);
ctx.lineWidth = 10;
ctx.stroke();

A clockwise arc starting from start angle 1.25 * Math.PI to end angle 1.75 * Math.PI. This is an arc of 90 degrees.

ctx.beginPath();
ctx.arc(100, 100, 50, 1.25 * Math.PI, 1.75 * Math.PI, false);
ctx.lineWidth = 10;
ctx.stroke();

What if the start angle is higher than the end angle?

No worries, it will still draw an arc. Have a look at this example:

ctx.beginPath();
ctx.arc(100, 100, 50, 1.5 * Math.PI, 0.5 * Math.PI, false);
ctx.lineWidth = 10;
ctx.stroke();

Can you figure out why it still works?

Example of circles and arcs: Pac-man in HTML5

As a final example of drawing circles and arcs in HTML5, have a look at the following example of Pac-man in HTML5!

ctx.beginPath();
ctx.arc(100, 100, 50, 0.25 * Math.PI, 1.25 * Math.PI, false);
ctx.fillStyle = "rgb(255, 255, 0)";
ctx.fill();
ctx.beginPath();
ctx.arc(100, 100, 50, 0.75 * Math.PI, 1.75 * Math.PI, false);
ctx.fill();
ctx.beginPath();
ctx.arc(100, 75, 10, 0, 2 * Math.PI, false);
ctx.fillStyle = "rgb(0, 0, 0)";
ctx.fill();

Questions & Answers

    Comments

      0 of 8192 characters used
      Post Comment

      • profile image

        Mudasir Malik 4 years ago

        that is quite great to read your tutorial, it helped me a lot and hope that this will keep doing help the freshers.

      • profile image

        Vishal Jaiswal 5 years ago

        I Like It and thanks for HELP me.

      • profile image

        jessy 5 years ago

        is it possible to add a text in to a circle in canvas???????

      • profile image

        sdsad 6 years ago

        sadasd

      • vbulletinskins profile image

        vbulletinskins 6 years ago

        useful tutorial. Thanks for sharing it!

      • InduswebiTech profile image

        InduswebiTech 6 years ago from Rama Road, Kirti Nagar, New Delhi, India

        wow .... really usefull information thanks for sharing it with us....

        www.induswebi.com

      • simeonvisser profile image
        Author

        simeonvisser 6 years ago

        I'm glad it was useful to you :)

      • profile image

        cweed 6 years ago

        Hey I've been searching for a tutorial to explain arc() and specifically its arguments in simple plain English. There aren't many out there - yours is amazing though, thank you!

      • brennawelker profile image

        brennawelker 6 years ago

        Wonderful tutorial! You had a great job on this.

      • simeonvisser profile image
        Author

        simeonvisser 7 years ago

        @dalogi: No problem, I had to play a bit with it myself as well before it became clear. I'm @simeonvisser on Twitter, I've started to follow you :)

      • profile image

        dalogi 7 years ago

        I've looked *everywhere* for a simple explanation into radians, and been confused when trying to apply them to HTML5 charts. Until I came to this page. Thank you so much Simon. Truly awesome tutorial! Keep up the good work and would be great to hook up on Twitter to stay up to date with your offereings. I'm @dalogi btw ;)

      • simeonvisser profile image
        Author

        simeonvisser 7 years ago

        @life.object: Thanks!

        @thisisoli: I know. I'm using the latest versions of several browsers but many HTML5 features have not even been implemented yet. I intend to write more tutorials when I can play around with these new HTML5 features. I should also look into CSS3 more. HTML5 and CSS3 make a great combination.

      • thisisoli profile image

        thisisoli 7 years ago from Austin, Texas (From York, England!)

        Great hub :) I have been playing around with CSS3, but HTML5 is definitely calling!

      • life.object profile image

        life.object 7 years ago from Lahore, Pakistan

        Amazing Tutorial

      • simeonvisser profile image
        Author

        simeonvisser 7 years ago

        Thanks! :)

      • psychicdog.net profile image

        psychicdog.net 7 years ago

        Awesome tutorial. Thanks for providing this great info simonvisser

      working

      This website uses cookies

      As a user in the EEA, your approval is needed on a few things. To provide a better website experience, owlcation.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

      For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: "https://owlcation.com/privacy-policy#gdpr"

      Show Details
      Necessary
      HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
      LoginThis is necessary to sign in to the HubPages Service.
      Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
      AkismetThis is used to detect comment spam. (Privacy Policy)
      HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
      HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
      Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
      CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
      Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
      Features
      Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
      Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
      Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
      Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
      Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
      VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
      PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
      Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
      MavenThis supports the Maven widget and search functionality. (Privacy Policy)
      Marketing
      Google AdSenseThis is an ad network. (Privacy Policy)
      Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
      Index ExchangeThis is an ad network. (Privacy Policy)
      SovrnThis is an ad network. (Privacy Policy)
      Facebook AdsThis is an ad network. (Privacy Policy)
      Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
      AppNexusThis is an ad network. (Privacy Policy)
      OpenxThis is an ad network. (Privacy Policy)
      Rubicon ProjectThis is an ad network. (Privacy Policy)
      TripleLiftThis is an ad network. (Privacy Policy)
      Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
      Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
      Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
      Statistics
      Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
      ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
      Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)