Use HTML Canvas arcTo, moveTo, and lineTo to draw a piece of a pie chart
You might think that drawing a piece of a pie possible with the .arc method. However, in this lesson, you'll see why that is impossible. Instead we must draw a pie piece with the .arcTo canvas method.
.arcTo takes x1, y1, x2, y2 and radius to draw a nifty arc shape. You then must use the moveTo and lineTo methods to complete the beautiful piece of a pie. As a bonus, the clearRect method is used to demonstrate clearing the canvas!
[00:01] Now that we have multiple circles with lots of strokes and fills under our belt, the next thing you might want to do is draw a piece of a pie, like the triangle piece of a pie chart. Whenever I was playing with the arc method, I was thinking, hey, we should be able to do that, right?
[00:21] If we want to start at the top, and we want to go to the side, we only want to do a 45-degree angle, you see that bad things are happening. It does in fact start at the top, and then go to the side, give me a 45-degree arc here, but it doesn't actually connect into a pie. I'm like hey, what's going on here?
[00:45] No matter how many times you play with the start angle and the end angle, you're never actually going to get a pie shape from .arc. In order to illustrate this I did a really quick for loop, and we have var i = 0and a loop function. Every time it loops, if i++ < math.pi*2, which is a full circle.
[01:14] If i is less than a full circle, draw a piece of this pie. I'm making it a purple pie. Otherwise, I want you to go ahead and reset i, clear the rectangle which you can say with xy, the starting point of where you want to clear, and then the area, so 500 by 500 which of course is the width and height of our canvas.
[01:40] I want to go ahead and reset i, clear the canvas, and set the timeout again, which of course our draw function is doing. I'm only doing this timeout, because we want to actually see the pie draw, we don't want to jump to the end state.
[01:56] Now we're getting this oh so beautiful circle drawing in, but it illustrates what I'm trying to get across about how our .arc method is never actually going to get us to this shape, no matter what we do to the start or end angle.
[02:13] What we can do, I'm going to do ahead and get rid of that and bring back our -- refresh -- bring back our non-working arc. What we can do, is we can say arcTo, and arcTo has different parameters, so it has an x1y1, x2y2, and a radius that arcTo takes.
[02:40] If we look at this beautiful image that I found on W3, you see that x1y1 is the first point, x2y2 is the second point, and radius is how big the circle is that's going to define the arc. If we go back to our arcTo method, we're going to say 150 to 20, 150 to 70, and then a radius of 50.
[03:10] You're not going to see anything right now, and that's because we need to actually context.MoveTo, so we'll say 100, 70, and this is going to move to this spot. Then we'll say context.lineTo to draw a line, and we want it to be at 100 and 20, and this is going to draw a horizontal line.
[03:44] Then we're going to create our arc. Next we need another lineTo, and this one's going to be 100 and 70. Beautiful. Now when we refresh, you see that we actually a piece of the pie. We're going to draw...actually I think I lied here, I think this is a vertical line, and this one is going to be draw a horizontal line. Cool.
[04:15] We're going to start off, move the cursor to 100 and 70. 100 on the x, 70 on the y. Then we're going to make a line to 100 and 20, so we just moved up 50 pixels, which makes sense, 70 minus 20 is 50.
[04:37] We move up 50 pixels, we draw our arc, and then we need to lineTo 170, which is guess what? That's where we started. Makes sense? Piece of the pie. We learned today that you cannot in fact use context.arc to draw a pie shape, if that is what you wish. You must use arcTo, along with the moveTo and lineTo methods.
Hi, I think that it is possible with .arc method if you moveTo center of circle before drawing and set counterclockwise to true:
context.moveTo(51, 51); context.arc(51, 51, 50, 0, Math.PI/180*-90, true);
context.fill(); context.closePath(); context.stroke();
Actually, adding a second context.lineTo(100, 70); is not necessary and redundant. It adds nothing. Adding just context.lineTo(100, 20); after context.moveTo(100, 70); creates the piece of the pie.
I double checked, and yes, it would be necessary to have a second context.lineTo(100, 70) after context.arcTo() if you were using context.stroke(); instead of context.fill();