Question

Here you will complete the same task as in the dartboard exercise, using the value of i instead of an outside variable.
Make sure your dartboard:

Consists of 4 concentric circles
Has the center circle placed in the middle of the canvas with a radius of 25
Has three circles surrounding the middle, that each increase in radius by 25 pixels
Use the value of i to control the radius of the circles
Hint: Determine how to use extended for loop parameters to produce the exact radius values you need (25, 50, 75, 100).

Answer 1

To create a dartboard with 4 concentric circles where the radius increases by 25 pixels, you can use a loop to draw each circle. You'll want to use the value of `i` to control the radius of each circle within a for loop.

Here's a code snippet demonstrating how to achieve this, assuming you are using a programming environment that supports drawing on a canvas, such as JavaScript with HTML5 Canvas.

```javascript
// Setup the canvas
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Center position
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;

// Draw circles
for (let i = 1; i <= 4; i++) {
// Calculate the radius (25, 50, 75, 100)
const radius = i * 25;

// Draw the circle
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, false);
ctx.strokeStyle = 'black'; // Circle color
ctx.lineWidth = 2; // Circle width
ctx.stroke();
}
```

### Explanation of the Code:
1. **Canvas Setup:**
- It starts by selecting a canvas element from the HTML (assumed to have an ID of `myCanvas`).
- The `getContext('2d')` method is called to get the 2D rendering context.

2. **Calculating Center Position:**
- The center of the canvas is calculated to help position the circles in the middle.

3. **Drawing Circles:**
- A `for` loop runs from `1 to 4` (inclusive), where `i` takes values 1, 2, 3, and 4.
- The radius for each circle is calculated as `i * 25`, resulting in the radii of `25`, `50`, `75`, and `100` respectively.

4. **Creating Each Circle:**
- For each iteration, a new path is started with `ctx.beginPath()`.
- The circle is drawn using `ctx.arc()` with the computed radius.
- After defining the properties such as stroke style and line width, the circle is drawn with `ctx.stroke()`.

Make sure to have a canvas element in your HTML:

```html
<canvas id="myCanvas" width="200" height="200"></canvas>
```

This code, when run inside a JavaScript environment with the appropriate HTML, will create a dartboard of concentric circles on the canvas. Each circle will be outlined, with their radii increasing by 25 pixels from the center outwards.