Draw a Circle in Html Canvas

  Have questions? Discuss this HTML5 / Sail tutorial with others on the forums.

When cartoon in the canvas, a (very superior) shape you will often desire to draw is a circle:

While the circle seems similar something that would be like shooting fish in a barrel to draw, every bit yous volition see shortly, it has some bizarre behaviors that you need to know about. This tutorial will help you out with that and more.

Let's get started!

Meet the Arc Function

The way you draw a circle in your canvas by using the handy arc part. This function and the arguments you demand to specify in order to apply it look as follows:

arc(centerX, centerY, radius, startAngle, endAngle, isAntiClockwise);

These arguments are of import in helping y'all draw the circle that y'all want, and so permit'due south look in detail what all of these arguments practise.

centerX and centerY

The centerX and centerY arguments are pretty straightforward to understand. They specify where the center of your circle will be positioned inside the canvas:

Retrieve, the sail lives in an inverted Cartesian system. What this means is that the x value increases every bit you move right, and the y value increases as yous go down. This might be a niggling different than what you may recollect from graphing equations in school.

Radius

The radius specifies the straight line altitude of your circle from its center to any edge:

The larger your radius, the bigger your circle will be. The smaller your radius, the smaller your circle will be. If you provide a negative value, JavaScript will throw a nice IndexSizeError exception, and so yous don't want to exercise that.

startAngle, endAngle, and isAntiClockwise

Now, nosotros finally get to the interesting stuff. These three arguments are interesting and closely related to drawing your circumvolve. Equally you lot probably know, a circumvolve is made up of 360 degrees:

In that location are 2 important details to note - details that will probably shatter your belief in all that is good in this earth. The first is that the angles increment clockwise for a circumvolve when fatigued in the sail:

The second detail is that JavaScript doesn't work with degrees. In JavaScript land, you bargain with everything in terms of radians:

In one case you understand these ii details, you crossed a big hurdle in mentally existence able to visualize what your arc office will create.

Note: Converting from Degrees to Radians

To catechumen from degrees to radians, just use the following expression: var radians = (Math.PI / 180) * degrees.

Ok, allow'southward now take a step forrad and work through how the startAngle, stopAngle, and isAntiClockwise arguments play a role. There are three steps you need to follow:

1. Mark your startAngle.
2. Mark your stopAngle.
3. Draw a line on the circumference either clockwise or anticlockwise depending on whether your value for isAntiClockwise is truthful or simulated.
4. If you are filling in your circle, fill in the region enclosed by the circumference and the straight line between the points referenced by startAngle and stopAngle.

Permit'due south expect through an example of this. Allow'due south say your showtime angle is ᴨ / 2, and your end angle is ᴨ. You are also anticlockwise and centered at 200, 200 with a radius of 93.

Given those values, the arc role would look every bit follows:

arc(200, 200, 93, Math.PI / ii, Math.PI, true);

If you had to visualize this, here is what your circle with but the stroke divers would look like:

If you filled in this circle, here is what you would see:

Notice that your circle's start and cease points are defined past your startAngle (ᴨ / two) and your endAngle (ᴨ). Because y'all are going anti-clockwise, notice that the outline and the colored region goes all the way around the circle on the long side.

If you lot switch from beingness anticlockwise to being clockwise but continue all of your other values the aforementioned, your arc part now looks every bit follows:

arc(200, 200, 93, Math.PI / 2, Math.PI, false);

Equally a result of the direction beingness changed, your circle takes a dissimilar turn (ha!):

Whenever yous run into the arc part and demand to visualize what the concluding circle looks like, use the four steps I described earlier. Those steps hold for whatever combination of startAngle, endAngle, and true/simulated you provide for the anti-clockwiseness of your circumvolve.

Displaying the Circle

Ok, now that you know all well-nigh the arc function and how you can mentally depict your circle, it'south time to describe it for realz. Let's say that that you have some starting code that looks equally follows:

var mainCanvas = document.getElementById("myCanvas"); var mainContext = mainCanvas.getContext("2nd");  var canvasWidth = mainCanvas.width; var canvasHeight = mainCanvas.height;  role draw() {  } depict();

This code but takes care of simply getting your canvas (whose id value is myCanvas) prepped for drawing content. In that location is nothing fancy going on here, so allow's ready that. Modify your depict role by adding the post-obit lawmaking:

office draw() { 	// depict the colored region 	mainContext.beginPath(); 	mainContext.arc(200, 200, 93, Math.PI / ii, Math.PI, true); 	mainContext.fillStyle = '#FF6A6A'; 	mainContext.fill(); 	 	// draw the stroke 	mainContext.lineWidth = 20; 	mainContext.strokeStyle = '#FF0000'; 	mainContext.stroke(); }

If you lot preview in your browser right now, you will see something that looks every bit follows:

We've already seen this weird semi-circle in the previous section, it is squeamish to see it being drawn from bodily code equally opposed to just plain English language words. Earlier we wrap things upward, let'southward finish (ironically) by looking at the code for how to depict a full circle:

function describe() { 	// draw the colored region 	mainContext.beginPath(); 	mainContext.arc(200, 200, 93, 0, two * Math.PI, true); 	mainContext.fillStyle = "#E2FFC6"; 	mainContext.fill();  	// depict the stroke 	mainContext.lineWidth = 20; 	mainContext.strokeStyle = "#66CC01"; 	mainContext.stroke(); }

When you preview this in your browser, y'all'll see something that looks like this:

Yous can tell past looking at the arguments nosotros passed in to the arc method for why that is. The startAngle value is 0, and the endAngle value is 2ᴨ. We don't leave whatever room for any spoiled radians to become off and do something crazy.

Conclusion

Well, that's all there is to drawing circles on the canvas. As you've seen by now, there is no elementary circumvolve method that draws a circle for y'all. Instead, you lot have the more general arc method that provides you lot with a lot of piddling buttons to push and to customize what your circle looks like. With generality, you often get complication. Where there is complexity, you'll probably notice me writing almost information technology. Now, isn't that the most blench-worthy conclusion you've probably ever read? I certainly hope so :P

Got a question or just want to chat? Annotate below or drop by our forums (they are actually the same thing!) where a bunch of the friendliest people you'll e'er run into will be happy to aid yous out!

When Kirupa isn't decorated writing about himself in tertiary person, he is practicing social distancing…even on his Twitter, Facebook, and LinkedIn profiles.

Hit Subscribe to get cool tips, tricks, selfies, and more than personally hand-delivered to your inbox.

lohrjonster.blogspot.com

Source: https://www.kirupa.com/html5/drawing_circles_canvas.htm

Share this post