YouTip

## HTML Canvas arc() Method The `arc()` method of the HTML Canvas 2D Context API is used to create a circular arc (or a full circle) centered at a specified point. To render the created path onto the canvas, you must follow the `arc()` method with either the `stroke()` or `fill()` method. --- ## Syntax ```javascript context.arc(x, y, radius, startAngle, endAngle, counterclockwise); ``` ### Parameter Values | Parameter | Type | Description | | :--- | :--- | :--- | | `x` | Number | The x-coordinate of the center of the circle. | | `y` | Number | The y-coordinate of the center of the circle. | | `radius` | Number | The radius of the circle (must be non-negative). | | `startAngle` | Number | The starting angle of the arc, measured in **radians** from the positive x-axis (the 3 o'clock position). | | `endAngle` | Number | The ending angle of the arc, measured in **radians**. | | `counterclockwise` | Boolean | *Optional.* Specifies the drawing direction.
• `false` (Default): Clockwise.
• `true`: Counterclockwise. | --- ## Understanding Angles in Canvas Angles in the HTML Canvas API are measured in **radians**, not degrees. To convert degrees to radians, you can use the following formula: $$\text{Radians} = \text{Degrees} \times \frac{\pi}{180}$$ In JavaScript, this is written as: ```javascript var radians = (Math.PI / 180) * degrees; ``` ### Key Angle Reference Points (Clockwise Direction) * **0 Radians** ($0 \times \pi$): 3 o'clock position (Right) * **0.5 $\pi$ Radians** ($90^\circ$): 6 o'clock position (Bottom) * **1.0 $\pi$ Radians** ($180^\circ$): 9 o'clock position (Left) * **1.5 $\pi$ Radians** ($270^\circ$): 12 o'clock position (Top) * **2.0 $\pi$ Radians** ($360^\circ$): Full circle --- ## Code Examples ### 1. Drawing a Full Circle To draw a complete circle, set the `startAngle` to `0` and the `endAngle` to `2 * Math.PI`. ```html ``` ### 2. Drawing a Semi-Circle (Half Circle) This example draws a semi-circle from the 3 o'clock position ($0$) to the 9 o'clock position ($\pi$) in a clockwise direction. ```javascript ctx.beginPath(); ctx.arc(150, 75, 50, 0, Math.PI, false); ctx.stroke(); ``` ### 3. Creating a Filled Pie Slice (Sector) To create a pie slice, you should move the path to the center of the circle using `lineTo()` before or after drawing the arc, and then use `fill()`. ```javascript ctx.beginPath(); ctx.moveTo(150, 75); // Move to the center of the circle ctx.arc(150, 75, 50, 0, 1.5 * Math.PI, false); // Draw arc from 0 to 270 degrees ctx.closePath(); // Close path back to the center ctx.fillStyle = "#4CAF50"; ctx.fill(); ``` --- ## Important Considerations 1. **Path Connection:** If there is already an active sub-path when `arc()` is called, the canvas engine will automatically draw a straight line from the current path's end point to the starting point of the new arc. To prevent this unwanted line, always call `beginPath()` before starting a new shape. 2. **Negative Radius:** Passing a negative value for the `radius` parameter will throw an `IndexSizeError` DOM exception. 3. **Browser Support:** The `arc()` method is fully supported in all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It is supported in Internet Explorer 9 and above.