Draw circles in HTML Canvas using .arc
Circles are one of the most difficult and prestigious shapes to achieve in Canvas. No circle method is provided, instead, we must utilize the .arc method to achieve circle happiness.
The .arc method however is a bit funny, it doesn’t use degrees like we’re used to, instead it uses radians. So in this lesson we’ll also learn how we can use some maths to be able to enter the familiar degrees.
[00:00] Drawing a circle sadly isn't as easy as drawing something like a rectangle in canvas. A circle is going to need three different method calls, if we will. The first would be context., and then we'll say beginpath.
[00:19] We have to begin a path, because there is no circle method. At this point, we actually have to draw a path that will draw the circle for us. Next up, we will use a context.arc method, which I copy and pasted here in order to show you the million parameters that we get to pass to this method.
[00:40] We going to start off by saying context.arc, and then the first thing is the center x and center y. This is the center of the circle, or the arc where it will be. Let's just go ahead and just say, I don't know, 50, 50. I'm fine it.
[00:57] Radius of, we'll say 20, not a huge circle. Next, we have the start angle and the end angle. This is where the fun begins. Both of these angles need to be in radians. Now, most of us think in degrees. One radian is equal to approximately 57 degrees.
[01:18] If we want to specify degrees here for our start and end angles, we'll need to use this formula to convert degrees over to radians. With this formula, let's go ahead and draw our first circle. We'll say math.pi divided by 180, and let's go ahead and start at 0Then we're going to go all the way around to draw the circle, math.pi divided by 180 times 360. 360 degrees in a circle, in case you didn't know. Then for the last one, it's a Boolean, is_anticlockwise. Right now, it will not matter whether we say true or false, because we are either going to start at 0and circle around to 360, or we're going to start at 360 and circle around to 0True or false doesn't really matter if you are using arc to draw a full circle. I will show you this as soon as we finish our circle. We're going to fill it, just blackness, nothing fancy. Then we need to make sure and end our path, which I actually don't even think it's endpath. I think it's something called closepath, because canvas.
[02:43] To prove that it doesn't matter what you put here, ho-ho, ho-ho, ho-ho. If we take it away, though, what happens, I wonder? is_anticlockwise actually defaults to false. If you don't specify anything, it's going to draw a circle in a clockwise fashion.
[03:06] Now, some might question our math here, and say what if we take 180, and we times it by 0and we get 0Shouldn't we technically be able to times this by 0or actually, just say 0Whatever you times by 0should be 0the glorious 0Then I'll do the same thing with 180 divided by 360, .5. Then divide it by 05. Oh, isn't that beautiful? You don't always have to have a long and lengthy thing here, just as long as you know what you're talking about.
dividing by 0.5 is the same as multiplying by 2 however, you are right, in mathematics, 360 degrees is universally known as 2 pi radians.
Shouldn't it be:
ctx.arc(50, 50, 20, 0, Math.PI * 2);
and not
ctx.arc(50, 50, 20, 0, Math.PI/0.5); ?
Because 360/180 = 2. Don't understand how you came up with 0.5.