- 6Use HTML Canvas arcTo, moveTo, and lineTo to draw a piece of a pie chart5m 3s
Use HTML Canvas arcTo, moveTo, and lineTo to draw a piece of a pie chart
Share this video with your friends
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!
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();
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();