The user wants me to build Conway's Game of Life as a single-page web app in a single file, `index.html`. I need to create this in the current directory `/workspace`, make it fully self-contained with `<style>` and `<script>` tags, use no external resources, and ensure the tool output shows `index.html` present at the end.

Requirements:
- Full-screen canvas grid
- Click-and-drag to toggle cells
- Controls: play/pause, step, randomize, clear
- No external resources, CDNs, or network requests
- Single self-contained HTML file with CSS and JS inline

I'll write a complete `index.html` file using the `write` tool.

Plan for the HTML:
- Full-screen canvas using CSS (body margin 0, canvas display block, width/height 100vh/100vw, or using JS to resize)
- The Game of Life logic:
  - Grid of cells (2D array)
  - Current grid and next grid
  - Count neighbors with wrapping (toroidal) or non-wrapping? I'll do non-wrapping for simplicity, but wrapping is more fun. Let me do wrapping since it's standard for a nice experience.
  - Rules:
    - Underpopulation: live cell with < 2 neighbors dies
    - Survival: live cell with 2 or 3 neighbors lives
    - Overpopulation: live cell with > 3 neighbors dies
    - Reproduction: dead cell with exactly 3 neighbors becomes alive
- Canvas rendering:
  - Draw a grid (thin lines for cell borders)
  - Live cells filled with a color, dead cells transparent or with a light bg
  - Use requestAnimationFrame for the loop, but control with play/pause state
  - Maybe set an interval or use timestamp-based stepping for speed control
- Mouse interaction:
  - mousedown: start toggling
  - mousemove with button down: toggle cells along path
  - mouseup / mouseleave: stop toggling
  - Properly map mouse coordinates to grid cell coordinates, accounting for canvas size and cell size
- Controls:
  - Play/Pause: a button toggles state
  - Step: advance one generation
  - Randomize: fill grid randomly
  - Clear: set all cells to dead
  - Maybe also speed control or generation counter
  - Style the buttons nicely, maybe overlay them on the canvas
- Responsive: handle window resize to redraw/resize canvas

Let me design the code:
- HTML structure: canvas element, a toolbar div with buttons
- CSS: full-screen canvas, toolbar positioned at top or bottom, styled buttons
- JS:
  - constants: CELL_SIZE, initially maybe 20px
  - state: cols, rows, grid, running, interval
  - functions: init, resize, createGrid, randomize, clear, draw, update, step, gameLoop
  - event listeners for mouse and buttons

I'll keep it clean and robust.

Detailed JS design:
```javascript
const canvas = document.getElementById('grid');
const ctx = canvas.getContext('2d');

const CELL_SIZE = 20;
let cols, rows;
let grid;
let isRunning = false;
let animationId;
let lastTime = 0;
const FPS = 10; // or maybe adjustable
let generation = 0;

function createGrid(cols, rows) {
  return Array.from({ length: rows }, () => Array(cols).fill(0));
}

function resize() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  cols = Math.ceil(canvas.width / CELL_SIZE);
  rows = Math.ceil(canvas.height / CELL_SIZE);
  // Need to preserve old grid data when resizing
  const oldGrid = grid;
  const oldCols = cols; // Wait, cols is being updated. Need to store oldCols and oldRows before resize.
  // Actually better: read cols/rows before updating, or just create new grid and map old data.
}
```

Wait, when resizing we want to preserve existing cells. So:
```javascript
let cols = 0, rows = 0;

function resize() {
  const oldGrid = grid;
  const oldCols = cols;
  const oldRows = rows;
  
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  cols = Math.ceil(canvas.width / CELL_SIZE);
  rows = Math.ceil(canvas.height / CELL_SIZE);
  grid = createGrid(cols, rows);
  
  if (oldGrid) {
    for (let r = 0; r < Math.min(rows, oldRows); r++) {
      for (let c = 0; c < Math.min(cols, oldCols); c++) {
        grid[r][c] = oldGrid[r][c];
      }
    }
  }
  
  draw();
}
```

Randomize:
```javascript
function randomize() {
  for (let r = 0; r < rows; r++) {
    for (let c = 0; c < cols; c++) {
      grid[r][c] = Math.random() > 0.7 ? 1 : 0; // 30% chance of life
    }
  }
  generation = 0;
  draw();
}
```

Clear:
```javascript
function clearGrid() {
  grid = createGrid(cols, rows);
  generation = 0;
  draw();
}
```

Step / update:
```javascript
function countNeighbors(x, y) {
  let sum = 0;
  for (let i = -1; i < 2; i++) {
    for (let j = -1; j < 2; j++) {
      let col = (x + j + cols) % cols;
      let row = (y + i + rows) % rows;
      sum += grid[row][col];
    }
  }
  sum -= grid[y][x];
  return sum;
}

function step() {
  let next = createGrid(cols, rows);
  for (let r = 0; r < rows; r++) {
    for (let c = 0; c < cols; c++) {
      let state = grid[r][c];
      let neighbors = countNeighbors(c, r);
      if (state === 0 && neighbors === 3) {
        next[r][c] = 1;
      } else if (state === 1 && (neighbors < 2 || neighbors > 3)) {
        next[r][c] = 0;
      } else {
        next[r][c] = state;
      }
    }
  }
  grid = next;
  generation++;
  draw();
}
```

Draw:
```javascript
function draw() {
  ctx.fillStyle = '#1a1a1a'; // background
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  // Draw dead cells with grid lines? Or live cells filled.
  // Let's fill the background with a dark color, live cells with green, and draw grid lines.
  // Actually drawing grid lines for a large canvas can be expensive but fine for moderate size.
  
  ctx.strokeStyle = '#333'; // grid line color
  ctx.lineWidth = 1;
  
  for (let r = 0; r < rows; r++) {
    for (let c = 0; c < cols; c++) {
      let x = c * CELL_SIZE;
      let y = r * CELL_SIZE;
      
      if (grid[r][c] === 1) {
        ctx.fillStyle = '#2ecc71'; // live cell color
        ctx.fillRect(x, y, CELL_SIZE, CELL_SIZE);
      }
      
      // Draw grid cell border
      ctx.strokeRect(x, y, CELL_SIZE, CELL_SIZE);
    }
  }
  
  // Update generation display
  document.getElementById('generation').textContent = `Gen: ${generation}`;
}
```

Wait, calling strokeRect for every cell could be heavy. We can just draw live cells as filled rectangles and live cells are on top of the background. The grid lines could be drawn by just drawing horizontal and vertical lines, but strokeRect for each is simpler. For a full-screen canvas with 20px cells, on a 1920x1080 screen that's 96x54 = 5184 cells. That's fine for strokeRect. Actually let's avoid per-cell strokeRect and just draw a background fill for dead cells? No, we want grid lines. Let's draw background once, then live cells, then draw lines once using lines. Or we can use `ctx.beginPath`, fillRect live cells, then stroke all grid lines... but strokeRect is fine. Let's optimize by drawing background and then only drawing live cells, and drawing grid lines by a loop of lines or just accept the strokeRect.

Actually, drawing all grid lines every frame is unnecessary. We can draw dead cells in one color and live cells in another, but we still need the grid lines. On a high-res screen, 5000 strokeRect operations is fast enough.

Wait, the user might want to toggle cells while paused. The mouse event handlers:
- Need to track which grid cell the mouse is over.
- On mousedown, toggle the cell (0->1 or 1->0), set a `dragging` flag.
- On mousemove with dragging, we can either toggle cells along the path or just set cells to a specific value (like the value of the first clicked cell). The classic behavior is: the first click determines the "brush" (dead or alive), then dragging paints with that brush. I'll implement it so that on mousedown, we toggle the first cell and remember that state as the "paint value", then on mousemove we set cells to that value. This allows both erasing and drawing.

```javascript
let isDragging = false;
let dragState = 1; // default to paint alive

canvas.addEventListener('mousedown', (e) => {
  const col = Math.floor(e.clientX / CELL_SIZE);
  const row = Math.floor(e.clientY / CELL_SIZE);
  if (col >= 0 && col < cols && row >= 0 && row < rows) {
    grid[row][col] = grid[row][col] ? 0 : 1; // toggle first cell
    dragState = grid[row][col]; // set brush to new state
    isDragging = true;
    draw();
  }
});

canvas.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  const col = Math.floor(e.clientX / CELL_SIZE);
  const row = Math.floor(e.clientY / CELL_SIZE);
  if (col >= 0 && col < cols && row >= 0 && row < rows) {
    grid[row][col] = dragState;
    draw();
  }
});

window.addEventListener('mouseup', () => {
  isDragging = false;
});

// Also prevent accidental text selection while dragging
canvas.addEventListener('selectstart', e => e.preventDefault());
```

Wait, toggling the first cell might not be ideal if the user intends to draw over existing cells. Better: mousedown sets the cell and dragState = 1 (always paint alive) OR we check the first cell. Actually, in many implementations, mousedown toggles, and then subsequent moves draw the same state as the first click. I've done that above. It's common.

Also, for touch events? The prompt didn't mention mobile, but click-and-drag implies mouse. I'll add basic touch support if easy, otherwise just skip. Let's add basic touch support for completeness since it's simple:
```javascript
canvas.addEventListener('touchstart', (e) => {
  const touch = e.touches[0];
  // map to col/row... but no preventDefault here maybe.
});
```
I'll skip touch for now to keep it concise, unless it's easy. It's easy but not required. I'll skip it.

Play/Pause:
```javascript
function play() { isRunning = true; updateButton(); }
function pause() { isRunning = false; updateButton(); }
function toggle() { isRunning ? pause() : play(); }
function updateButton() {
  document.getElementById('play-btn').textContent = isRunning ? 'Pause' : 'Play';
}

function gameLoop(timestamp) {
  if (isRunning) {
    if (!lastTime) lastTime = timestamp;
    const delta = timestamp - lastTime;
    if (delta > 1000 / FPS) {
      step();
      lastTime = timestamp;
    }
  }
  animationId = requestAnimationFrame(gameLoop);
}
```

Buttons:
- Play/Pause: onclick="toggle()"
- Step: onclick="step()"
- Randomize: onclick="randomize()"
- Clear: onclick="clearGrid()"

Toolbar: position absolute at top center or bottom. I'll do bottom center for a modern look. Semi-transparent.

Also, when playing, we shouldn't allow drawing? Actually, allowing drawing while running is fine and kind of fun. I'll leave it enabled.

Speed control? The user didn't request it. I'll just keep a fixed 10 FPS or maybe 12.

I should also handle the case where the canvas resizes and we need to preserve grid data. That's handled.

Styling:
- Body: margin 0, overflow hidden, font-family sans-serif
- Canvas: display block
- .controls: position fixed, bottom: 20px, left 50%, transform translateX(-50%), display flex, gap 10px, background: rgba(0,0,0,0.7), padding 10px, border-radius 8px, z-index 10
- buttons: styled with padding, border none, border-radius 4px, cursor pointer, font size 14px, transition
- generation counter in the toolbar

Let's write the complete file.

One thing: I need to make sure the generation counter updates during step. Since `draw()` is called in `step()`, it will update.

Let me also make the grid cells slightly smaller with gap? The prompt says "canvas grid", so simple filled rectangles with grid lines is good. I'll use CELL_SIZE = 16 or 20. Let's go with 16 for a nicer resolution. Or 20. 20 is fine.

I also want to make sure that the screen doesn't scroll when buttons are clicked. `event.preventDefault()` in buttons is not necessary but I'll add `outline: none` for buttons. Also, the document body should not show scrollbars.

Let's write the final content.

One more thing: `lastTime` needs to be reset when paused/played? In the loop, if `!isRunning`, we should still call `requestAnimationFrame(gameLoop)` to keep the loop alive, and reset `lastTime` so that when we resume, we don't step immediately with a huge delta.

```javascript
function gameLoop(timestamp) {
  if (isRunning) {
    if (!lastTime) lastTime = timestamp;
    const elapsed = timestamp - lastTime;
    const interval = 1000 / FPS;
    if (elapsed > interval) {
      step();
      lastTime = timestamp - (elapsed % interval); // keep rhythm
    }
  } else {
    lastTime = 0; // reset so we don't jump
  }
  requestAnimationFrame(gameLoop);
}
```
This is better.

Everything looks good. I'll write the file now.

The file has been written successfully. Let me verify it's there and maybe quickly check the contents look correct by reading a bit of it, or just confirm with a bash command.

The file is present. I should provide a brief confirmation and summary of what was built.