Okay, I need to create a single-page web app for Conway's Game of Life with the specified features. Let me break down what's required.

First, the HTML structure. I'll need a canvas element for the grid and some buttons for controls. The canvas should be full-screen, so I'll set its style to cover the viewport. The buttons for play/pause, step, randomize, and clear will be placed at the top.

Next, the CSS. I'll style the body to have no margin and overflow hidden to make the canvas full-screen. The controls should be positioned absolutely at the top. The canvas itself will take the full width and height. Buttons need some padding and spacing.

For JavaScript, I'll start by setting up the canvas and context. The grid size can be determined based on the window size, maybe 30x30 cells. Each cell's size will be calculated by dividing the canvas dimensions by the number of cells.

The game logic: the grid will be a 2D array of booleans. The next generation is computed based on the number of live neighbors each cell has. I'll need a function to count neighbors and another to update the grid.

Controls: 
- Play/Pause: Toggle a running variable and change the button text.
- Step: Advance one generation manually.
- Randomize: Set each cell to alive with a 50% chance.
- Clear: Set all cells to dead.

Click and drag to toggle cells: Add event listeners for mouse down, move, and up. When dragging, check if the mouse is over a cell and toggle it. Need to handle the coordinates correctly, converting pixel positions to grid indices.

The main loop: If running, use requestAnimationFrame to update and draw the grid. The draw function will clear the canvas and redraw each cell based on its state.

Testing: Ensure that the grid updates correctly, controls work as expected, and dragging toggles cells. Also, handle window resizing if needed, though the example might not include dynamic resizing for simplicity.

Putting it all together in one HTML file with inline CSS and JS. Make sure there are no external dependencies. Use <style> for CSS and <script> for JS within the HTML.

Potential issues: Handling the initial canvas size correctly, ensuring the grid is properly updated on interactions, and the game loop runs smoothly. Also, making sure the drag event doesn't trigger unexpected behavior, like text selection, by preventing default actions.

Now, I'll structure the code step by step, ensuring all elements are included and work together.

Okay, the user wanted a single-page web app for Conway's Game of Life with specific features. I used the write function to create index.html with all the necessary HTML, CSS, and JavaScript in one file. Let me check if all the requirements are met.

The HTML structure includes a full-screen canvas and control buttons. The CSS styles the body and canvas to fill the screen, and positions the controls at the top. The JavaScript handles the game logic, including the grid updates, event listeners for controls, and mouse interactions for toggling cells.

I should verify that the code includes play/pause, step, randomize, and clear buttons. The event listeners for these buttons are present and correctly linked. The drag functionality is handled with mouse events, toggling cells as the user moves the mouse while dragging.

The game loop uses requestAnimationFrame for smooth updates. The grid is initialized with the correct dimensions based on the window size and cell size. The randomize and clear functions modify the grid appropriately. The step button triggers a single update.

I think all the features are covered. The code is self-contained, with no external dependencies. The file is written as index.html in the current directory. The user can open this file in a browser to run the Game of Life with the specified controls and interactions.