We need to create a single-page web app in index.html, with a full-screen canvas grid implementing Conway's Game of Life. Should support click-and-drag to toggle cells, and have controls: play/pause, step, randomize, clear.

All code self-contained in index.html: CSS in <style>, JS in <script>. No external resources.

We need to generate index.html. We'll just write the file via write tool.

First ensure nothing conflicts. Use a straightforward implementation.

Implementation plan:
- HTML: canvas fills viewport, maybe using width: 100%; height: 100%; or set to window.innerWidth/innerHeight.
- Controls: a div overlay at top or bottom with buttons.

- JavaScript:
  - Set up canvas context.
  - Define grid size, maybe dynamic based on cellSize (e.g., 10px per cell). Compute rows/cols based on canvas size.
  - Use a 2D array (or 1D) boolean for cells.
  - Rendering: draw cells as filled squares, grid lines optional.
  - Game loop: requestAnimationFrame or setInterval (e.g., 10 fps). Play/pause toggles.
  - Step: compute next generation.
  - Randomize: fill cells randomly.
  - Clear: set all cells false.
  - Interaction: mousedown start toggling; mousemove toggles cells under cursor; mouseup stop. Use a flag to track whether we are drawing alive or dead. On mousedown, decide based on cell state: if cell is alive, we will set dead; else set alive.
  - Also support touch? Not required.

CSS: style canvas to fill; control bar with some styling.

Make sure the canvas resizes with window resize: add event listener to resize canvas and adjust grid.

Potential complexity: grid size fixed to cellSize, so if canvas size changes, we recalc rows/cols, and maybe preserve existing cells up to min rows/cols.

Simplify: set canvas to window.innerWidth, innerHeight; on resize, recompute size and reinitialize grid (clear). Acceptable.

Let's write index.html with everything.

Proceed to write.