Summary  
This chapter explains how to use the `arc()` method to draw circles and arcs by specifying center coordinates, radius, start and end angles, and direction, then shows how to combine these arcs with straight lines (via `beginPath()`, `moveTo()`, and `lineTo()`) to build more complex shapes.

General domain of usage  
2D graphics rendering

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHN0eWxlPgogICAgICAjbXlDYW52YXMgewogICAgICAgIGJvcmRlcjogMnB4IHNvbGlkICM0NDQ7CiAgICAgICAgYmFja2dyb3VuZDogI2ZhZmFmYTsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8Y2FudmFzIGlkPSJteUNhbnZhcyIgd2lkdGg9IjI1MCIgaGVpZ2h0PSIyMjAiPjwvY2FudmFzPgoKICAgIDxzY3JpcHQ+CiAgICAgIGNvbnN0IGNhbnZhcyA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJteUNhbnZhcyIpOwogICAgICBjb25zdCBjdHggPSBjYW52YXMuZ2V0Q29udGV4dCgiMmQiKTsKCiAgICAgIC8vIERyYXcgYSBmdWxsIGNpcmNsZSBhbmQgZmlsbCBpdAogICAgICBjdHguYmVnaW5QYXRoKCk7CiAgICAgIGN0eC5hcmMoMTAwLCAxMDAsIDUwLCAwLCAyICogTWF0aC5QSSwgZmFsc2UpOyAvLyBjZW50ZXIgKDEwMCwxMDApLCByYWRpdXMgNTAKICAgICAgY3R4LmZpbGxTdHlsZSA9ICJza3libHVlIjsKICAgICAgY3R4LmZpbGwoKTsKICAgICAgY3R4LnN0cm9rZSgpOwogICAgPC9zY3JpcHQ+CiAgPC9ib2R5Pgo8L2h0bWw+

When you use the `arc()` method on a canvas context, you can draw circles and arcs by defining several parameters. The `arc()` method takes these arguments: the x and y coordinates for the center of the circle, the radius, the start angle, the end angle, and a boolean for the drawing direction (anticlockwise or clockwise). The angles are measured in radians, not degrees. A full circle uses a start angle of `0` and an end angle of `2 * Math.PI`. The direction parameter is optional; `false` means clockwise, and `true` means anticlockwise.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHN0eWxlPgogICAgICAjbXlDYW52YXMgewogICAgICAgIGJvcmRlcjogMnB4IHNvbGlkICM0NDQ7CiAgICAgICAgYmFja2dyb3VuZDogI2ZhZmFmYTsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8Y2FudmFzIGlkPSJteUNhbnZhcyIgd2lkdGg9IjQyMCIgaGVpZ2h0PSIyMjAiPjwvY2FudmFzPgoKICAgIDxzY3JpcHQ+CiAgICAgIGNvbnN0IGNhbnZhcyA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJteUNhbnZhcyIpOwogICAgICBjb25zdCBjdHggPSBjYW52YXMuZ2V0Q29udGV4dCgiMmQiKTsKCiAgICAgIC8vIERyYXcgYSBwaWUgc2xpY2UgKHF1YXJ0ZXIgY2lyY2xlKQogICAgICBjdHguYmVnaW5QYXRoKCk7CiAgICAgIGN0eC5tb3ZlVG8oMjAwLCAxMDApOwogICAgICBjdHguYXJjKDIwMCwgMTAwLCA1MCwgMCwgMC41ICogTWF0aC5QSSwgZmFsc2UpOwogICAgICBjdHguY2xvc2VQYXRoKCk7CiAgICAgIGN0eC5maWxsU3R5bGUgPSAib3JhbmdlIjsKICAgICAgY3R4LmZpbGwoKTsKICAgICAgY3R4LnN0cm9rZSgpOwoKICAgICAgLy8gRHJhdyBhIHNlbWktY2lyY2xlCiAgICAgIGN0eC5iZWdpblBhdGgoKTsKICAgICAgY3R4LmFyYygzMjAsIDEwMCwgNTAsIDAsIE1hdGguUEksIGZhbHNlKTsKICAgICAgY3R4LmxpbmVUbygzMjAsIDEwMCk7IC8vIGNvbm5lY3QgYmFjayB0byBjZW50ZXIgaWYgbmVlZGVkCiAgICAgIGN0eC5jbG9zZVBhdGgoKTsKICAgICAgY3R4LmZpbGxTdHlsZSA9ICJsaWdodGdyZWVuIjsKICAgICAgY3R4LmZpbGwoKTsKICAgICAgY3R4LnN0cm9rZSgpOwogICAgPC9zY3JpcHQ+CiAgPC9ib2R5Pgo8L2h0bWw+

You can combine **arcs** and straight lines to build more complex shapes. For instance, by connecting lines to the start or end points of an arc, you can create **pie slices**, **rounded rectangles**, or even cartoon-like figures. Use `beginPath()` before starting a new shape, and connect your arcs with `lineTo()` or `moveTo()` as needed. Experiment with different angles and directions to achieve the shape you want.

Which method is commonly used to draw a circle on the canvas?

What does the startAngle and endAngle parameter in `arc()` represent?

Create visual and interactive projects with the HTML Canvas API using plain JavaScript. Draw shapes, render text, work with images, and control colors, gradients, and pixels. Animate objects, handle user input, and build simple games and visual effects step by step.

Learn how the Canvas element works and how to access its drawing context. Work with coordinates and master essential drawing techniques for lines, shapes, and paths. Build the foundation needed for everything from graphics to games.

Enhance your visuals with text rendering, image drawing, gradients, and patterns. Explore the basics of pixel manipulation and add simple user interaction with mouse and keyboard input. Create richer and more expressive canvas graphics.

Use the Canvas API to animate objects, simulate motion, and build interactive experiences. Combine physics, drawing operations, and input handling to create small games and visual effects. Apply all your skills in fun, practical mini-projects.

Circles and Arcs

1. Which method is commonly used to draw a circle on the canvas?

2. What does the startAngle and endAngle parameter in `arc()` represent?

Awesome!

Circles and Arcs

1. Which method is commonly used to draw a circle on the canvas?

2. What does the startAngle and endAngle parameter in `arc()` represent?

Circles and Arcs

1. Which method is commonly used to draw a circle on the canvas?

2. What does the startAngle and endAngle parameter in arc() represent?

Awesome!

Circles and Arcs

1. Which method is commonly used to draw a circle on the canvas?

2. What does the startAngle and endAngle parameter in arc() represent?

2. What does the startAngle and endAngle parameter in `arc()` represent?

2. What does the startAngle and endAngle parameter in `arc()` represent?