We are building a self-contained index.html file.
 Requirements:
   - Full-screen canvas for Conway's Game of Life
   - Click and drag to toggle cells (draw live cells when dragging, but also allow toggling dead cells? The problem says "toggle", so we should invert the state of the cell)
   - Play/Pause button, Step button, Randomize, Clear
   - No external resources

 Design:
   - We'll create a canvas that fills the entire window (100% width and height)
   - We'll use a grid of cells with a fixed cell size (e.g., 10px). We can adjust the grid dimensions based on window size.
   - We'll have a toolbar at the top for buttons: Play/Pause, Step, Randomize, Clear.

 Steps:
   1. HTML structure: body with a div container for the canvas and a div for controls (toolbar). The canvas will be absolutely positioned to fill the container, and the container will fill the window. The toolbar will be fixed at the top.
   2. CSS for styling: remove default margins, set the container to fill the window, and style the buttons.
   3. JavaScript:
        - Set up the canvas: get context, set dimensions to window size, calculate grid columns and rows.
        - Create a 2D array for the current state and a next state (for simulation).
        - Implement drawing the grid.
        - Implement functions for:
            - Toggling a cell (on click and during drag)
            - Play/Pause: start/stop the simulation loop using requestAnimationFrame or setInterval.
            - Step: update one generation.
            - Randomize: fill the grid randomly.
            - Clear: set all to dead.
        - Event listeners:
            - Click: toggle the cell at the mouse position.
            - Mousedown: start a drag operation. We'll track mousemove and toggle cells while dragging until mouseup.
            - Mousemove: if dragging, toggle cells at the current position (but only if the cell under the mouse hasn't been toggled in this drag to avoid toggling multiple times the same cell).
            - Resize: adjust the grid to new window size (clear and recalculate, then redraw).

   Note: We need to throttle the mousemove toggling to avoid flooding. Alternatively, we can check that we are over a new cell and not the same one repeatedly.

   We'll use a flag `isDrawing` to indicate we are in a drag operation. Also, track the last cell that was drawn to avoid toggling the same cell repeatedly during a drag.

 Implementation:

   Grid as a 2D array of booleans: `grid[rows][cols]`, false for dead, true for alive.

   Functions:
     - initGrid(): create a grid of zeros.
     - randomize(): set each cell to random state (Math.random() > 0.5)
     - clearGrid(): set all to false.
     - nextGeneration(): compute the next state based on Conway's rules and update the grid.
     - drawGrid(): loop over the grid and draw each live cell.

   Canvas drawing: we'll use a fixed cell size (we'll set to 10px). Because the window may not be divisible by 10, we adjust the grid size to fit the entire window.

   How to handle resize? We can recalc the grid dimensions and then reinitialize the grid (and redraw). But note: we don't want to lose the current state unless necessary? Actually, when the window resizes, the grid must change because the number of rows and columns changes. So we clear and make a new grid of the new dimension, but we might copy the old state? However, copying from an old grid of a different size isn't straightforward. We could:
        Option 1: Keep the existing grid and center it? Or scale? That might be complex.
        Option 2: Not preserve state on resize? Or only preserve when the grid size doesn't change? Actually, on resize the grid size changes, so we have to reinitialize.

   Alternatively, we can fix the cell size and then set the canvas to the maximum multiple of the cell size. Then we keep the grid consistent. But then the canvas doesn't cover the entire window? The requirement says "full-screen", so we must cover the entire window. We can do:

        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        Then set:
            const rows = Math.floor(canvas.height / cellSize);
            const cols = Math.floor(canvas.width / cellSize);

        And then the grid is independent of the window size? But when the window resizes, the grid must be recalculated and we have to reinitialize the grid. And we lose the current state.

   To keep it simple, we'll reinitialize the grid on resize. We can store the current state and try to map it to the new grid? It's a lot of work and not required.

   Alternatively, we can avoid resizing the grid during the game? We'll just set the canvas to the full window, but our grid dimensions are fixed? No, because the window size might change.

   We are going to:

        - On window resize: recalc the number of rows and columns, reinitialize the grid, and start over.

   This is acceptable because the problem doesn't specify preserving state on resize. So we will clear and start fresh.

   However, note: the problem says "full-screen", so we must cover the entire window.

   Another idea: make the cell size flexible? We can set the cell size to 10px, but if the window is not divisible, we'll have a border. We can also adjust the cell size? That's more complex.

   We'll fix the cell size, then set the canvas to the maximum multiple of the cell size. But then there will be empty space. Alternatively, we can stretch the drawing to fill the window? We can use CSS to stretch the canvas, but then the grid would be distorted.

   Another common approach: use a fixed grid that doesn't change with window size? But then it's not full-screen.

   We'll do:

        const cellSize = 10; // pixels per cell
        const width = window.innerWidth;
        const height = window.innerHeight;
        const rows = Math.floor(height / cellSize);
        const cols = Math.floor(width / cellSize);

        Then set the canvas width and height to cols*cellSize and rows*cellSize. Then we have a grid that fits without gaps, but there might be a gap at the edges. We'll center the canvas? Or do we want it to fill? We can use CSS to set the body to 100% and the canvas to 100%, but then the grid is stretched? We don't want that.

   Alternatively, we can set:

        canvas.style.width = '100%';
        canvas.style.height = '100%';

        and then set the internal size to the actual pixel dimensions (cols * cellSize, rows * cellSize). But then the canvas is stretched? We don't want to stretch because the cells would be distorted.

   We want the grid to look crisp, so we set:

        canvas.width = cols * cellSize;
        canvas.height = rows * cellSize;
        canvas.style.width = '100%';
        canvas.style.height = '100%';

        But this does not fill because the canvas is at a different aspect ratio? And the CSS size would cause stretching.

   We decided: we'll set the canvas to the exact grid size and then center it with margin:auto? But the problem says full-screen, meaning the entire window.

   Alternatively, we can use the entire window by using a scaling transform? We could set the canvas size to the grid size and then use CSS to fill and scale while preserving aspect ratio? That's not trivial.

   We'll change the approach: use the entire window, and dynamically set the cell size to be as big as we can while keeping integer cells? But we want integer cells. We can use:

        const cellSize = 10; // we'll stick to 10, but then we don't fill the entire window

   We'll stick to a fixed cell size and accept that there will be unused space. Or, we can change the cell size to be 10px but then we let the grid cover from (0,0) to (cols*cellSize, rows*cellSize). We set the canvas to exactly cols*cellSize and rows*cellSize. Then we position it in the top-left, and the rest is body background. We can set the body background to black to match.

   But the problem says "full-screen", so we want the entire area to be the grid. We'll adjust the cell size to fill the window? How? We don't want to change the number of cells because that would lose state. We can do:

        Instead, on resize we recalc the grid? So we'll have:

            let rows = Math.floor(window.innerHeight / cellSize);
            let cols = Math.floor(window.innerWidth / cellSize);

        And then reinitialize the grid? So we lose state? That's acceptable if we don't have a requirement to preserve state on resize.

   We'll go with:

        - Fixed cell size (10px)
        - On window resize, recalc rows and cols, then reinitialize the grid (with random? or clear? We'll do clear) and redraw.

   Alternatively, we can make the cell size 10px and then adjust the grid dimensions to use all available space? But the grid resizing happens and we lose state. That's acceptable.

   Steps:

        function init() {
            // Get the canvas and set up the grid
            // Set initial grid state to clear
            // Then add event listeners
        }

        function resize() {
            // Recalc the grid dimensions and reinitialize the grid array
            // Then redraw
        }

        window.addEventListener('resize', resize);

   But note: we should use requestAnimationFrame and debounce the resize to avoid too many events.

   However, for simplicity, we'll just reinitialize on resize.

   Now, for the drag toggling: we want to toggle the cell under the mouse on mousedown, then on mousemove we toggle each cell we pass over (but only once per cell per drag).

   We can do:

        let drawing = false;
        let lastX = -1;
        let lastY = -1; // store the last cell we toggled to avoid duplicates

        canvas.onmousedown = (e) => {
            drawing = true;
            let {x, y} = getCellCoord(e);
            if (x !== lastX || y !== lastY) {
                // Toggle the cell at (x, y)
                grid[y][x] = !grid[y][x]; // toggle
                lastX = x;
                lastY = y;
                drawGrid();
            }
        };

        canvas.onmousemove = (e) => {
            if (drawing) {
                let {x, y} = getCellCoord(e);
                if (x !== lastX || y !== lastY) {
                    grid[y][x] = !grid[y][x];
                    lastX = x;
                    lastY = y;
                    drawGrid();
                }
            }
        };

        canvas.onmouseup = () => {
            drawing = false;
            lastX = lastY = -1;
        };

   But note: what if you drag and the mouse moves outside the canvas? We should handle mouseup outside: we can set the event on the window.

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

   Alternatively, we can set:

        canvas.onmouseleave = () => {
            // if drawing, then we leave, but we don't want to break the drag if comes back?
            // But if the mouse leaves, we can stop the current drag, but it might come back and we want to continue? Actually, we can break the drag only when leaving.
            // Or, we can ignore and when the mouse re-enters, we check the state? How? We are using a global drawing flag.
        }

   We'll do:

        window.addEventListener('mouseup', () => {
            drawing = false;
            lastX = lastY = -1;
        });

   Then, even if the mouse goes out and comes back, we don't start drawing until the next mousedown.

   We also want to avoid toggling the same cell multiple times during a drag? The above code does that.

   Now, for the game loop:

        let isPlaying = false;
        let frameId = null;

        function gameLoop() {
            nextGeneration();
            drawGrid();
            if (isPlaying) {
                frameId = requestAnimationFrame(gameLoop);
            }
        }

        function playPause() {
            isPlaying = !isPlaying;
            if (isPlaying) {
                gameLoop();
            } else {
                cancelAnimationFrame(frameId);
            }
        }

   However, note: we might want to throttle the simulation to a specific FPS? Conway's Game of Life doesn't require high FPS. We'll use a fixed interval, e.g., 100ms per generation.

        We can use setInterval for the simulation:

            if (isPlaying && !intervalId) {
                intervalId = setInterval(() => {
                    nextGeneration();
                    drawGrid();
                }, 1000 / 10); // 10 fps? or 5 fps? Let the user adjust? No, fixed.

        Alternatively, we can use requestAnimationFrame but adjust the timing.

        We'll use setInterval because it's simpler and we don't need smooth animation.

   Steps:

        let intervalId = null;

        function playPause() {
            isPlaying = !isPlaying;
            if (isPlaying) {
                intervalId = setInterval(() => {
                    step(); // step does nextGeneration and draw
                }, 200); // 200ms per step -> 5 fps
            } else {
                clearInterval(intervalId);
                intervalId = null;
            }
        }

   We'll write a step function that we can use for the button and for the loop.

   Finally, we write:

        function step() {
            nextGeneration();
            drawGrid();
        }

   And the buttons:

        <button id="playPause">Play/Pause</button>
        <button id="step">Step</button>
        <button id="random">Randomize</button>
        <button id="clear">Clear</button>

   We assign the event handlers to these.

   We'll write the code now.

   Important: the entire app is in one file.

   Let's write the HTML structure:

        <!DOCTYPE html>
        <html>
        <head>
            <title>Conway's Game of Life</title>
            <style>
                /* reset */
                body {
                    margin: 0;
                    padding: 0;
                    overflow: hidden;
                    background: #000;
                }

                #controls {
                    position: fixed;
                    top: 0;
                    left: 0;
                    right: 0;
                    background: rgba(0,0,0,0.5);
                    padding: 10px;
                    display: flex;
                    gap: 10px;
                }

                button {
                    padding: 5px 10px;
                }

                #canvas-container {
                    position: absolute;
                    top: 50px; /* below the controls */
                    left: 0;
                    right: 0;
                    bottom: 0;
                }

                canvas {
                    /* We set the canvas size in JavaScript */
                    display: block;
                    background: #000;
                }
            </style>
        </head>
        <body>
            <div id="controls">
                <button id="playPause">Play</button>
                <button id="step">Step</button>
                <button id="random">Randomize</button>
                <button id="clear">Clear</button>
            </div>
            <div id="canvas-container">
                <canvas id="gameCanvas"></canvas>
            </div>
            <script>
                // ... JavaScript code here ...
            </script>
        </body>
        </html>

   Note: We are using a fixed height for the controls? Instead, we can make the canvas-container absolute with top: [height of controls]. We set the controls to 50px height? Or we make it flexible? We set the canvas-container to top:0 and then adjust the canvas to start below the controls.

   Alternatively, we set the controls as fixed at top, and the canvas-container as fixed below the controls? We can set:

        body: full window, canvas-container as fixed with top:50px and rest to bottom.

   But we set:

        #controls { fixed, top:0, left:0, right:0, height:50px; ... }
        #canvas-container { position: fixed; top:50px; left:0; right:0; bottom:0; }

   Now, the canvas inside canvas-container should have 100% width and 100% height? In JavaScript we set:

        let canvas = document.getElementById('gameCanvas');
        let container = document.getElementById('canvas-container');
        // We want the canvas to fill the container? But we set the canvas to a grid of fixed cells. How?

        Alternatively, we set the canvas to the container dimensions? 

        We do:

            canvas.width = container.clientWidth;
            canvas.height = container.clientHeight;

        But then we must recalc the grid rows and columns based on the container size and cellSize.

   We'll adjust the resize to account for the container:

        function resize() {
            const container = document.getElementById('canvas-container');
            const width = container.clientWidth;
            const height = container.clientHeight;
            const cellSize = 10;

            canvas.width = width;
            canvas.height = height;

            // But now the grid is of size (Math.floor(width / cellSize) cols by (Math.floor(height / cellSize)) rows.
            // However, if we round down, we have to adjust the canvas to the grid? Or we can use floating-point? We want integer cells.

            // We'll set the grid to integers, and then adjust the canvas to the grid in pixels? How?

            // We'll set the actual canvas dimensions to the grid in integer pixels? We do:

                const cols = Math.floor(width / cellSize);
                const rows = Math.floor(height / cellSize);
                // Now we set:
                canvas.width = cols * cellSize;
                canvas.height = rows * cellSize;

            // Then the canvas is the exact grid size, and we center it? Or use CSS to stretch to container? We set:

                canvas.style.width = '100%';
                canvas.style.height = '100%';

            // but that will stretch the grid. So let's not set style via JS? Instead, we set the CSS for canvas to:

                canvas {
                    width: 100%;
                    height: 100%;
                }

            // but that stretches. Alternatively, we set the container to display:flex and then center the canvas? Then we get borders.

            // After reconsideration: we want the grid to be fixed and the container to scroll? But the problem says full-screen, so we want as much grid as possible without stretching.

            // We decide: the canvas is set to the exact grid size (cols*cellSize, rows*cellSize). Then we use CSS to center the canvas within the container? Or we can set:

                container: {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

            // Then we see the grid centered? But then we don't use the entire container? So we can set the canvas to be as big as possible without exceeding? That's what we did.

            // But the grid must be full-screen meaning the entire container? How? We want to avoid borders? Then we must choose a cell size that divides the container dimensions? That's not feasible.

            // We'll do without stretching and without centering. We set the canvas to the grid size (which is less than the container) and leave the rest as black. The body background is black, so it looks uniform.

            // We set the canvas to:

                canvas.width = cols * cellSize;
                canvas.height = rows * cellSize;

            // And then we don't change the CSS style for the canvas? We set in CSS:

                canvas {
                    display: block;
                    background: #000;
                }

            // Then it will appear in the top-left of the container? Because the container has fixed position and the canvas is a block element.

        }

   So on resize, we set the canvas to the grid dimensions and then reinitialize the grid.

   Now, let's code the JavaScript.

   We'll put everything inside a script tag.

   Due to the complexity and length, I will write the entire index.html file.

   We note: the entire code must be in one file.

   Let's write the HTML and then the JavaScript inside.

   Important: the grid state is stored in `grid` as a 2D array: grid[y][x] for y in [0, rows-1] and x in [0, cols-1].

   The drawing:

        function drawGrid() {
            const ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            // If we want grid lines? We'll skip for performance? Or we can do:
            // Draw live cells as white squares
            ctx.fillStyle = '#fff';
            for (let y = 0; y < rows; y++) {
                for (let x = 0; x < cols; x++) {
                    if (grid[y][x]) {
                        let rectX = x * cellSize;
                        let rectY = y * cellSize;
                        ctx.fillRect(rectX, rectY, cellSize, cellSize);
                    }
                }
            }
        }

   The getCellCoord function:

        function getCellCoord(e) {
            const rect = canvas.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            // Now we convert to grid coordinates:
            const gridX = Math.floor(x / cellSize);
            const gridY = Math.floor(y / cellSize);
            return {x: gridX, y: gridY};
        }

   But note: the canvas might be scaled by CSS? We set the canvas to the grid size, but the container? And then we set the canvas.style.width to 100%? We did not. We set the canvas element's width and height to the grid pixel dimensions. Then the boundingClientRect will have the unscaled dimensions? But if the container is bigger, the canvas will appear at its natural size and may not fill? We did not set any scaling.

   Actually, we set the canvas.style to nothing? Then the canvas will be drawn at its natural size, which we set to (cols*cellSize, rows*cellSize). And then we placed it in the container without scaling? So the coordinates are fine.

   However, we set the container to fixed positioning and the canvas inside. We'll get the mouse coordinates relative to the canvas without scaling? So the above getCellCoord should work.

   We are ready to write the entire index.html.

   Let's code.

   Note: We must ensure that the canvas is created and the context is 2d. We set the cellSize to 10.

   We'll set:

        const cellSize = 10;

   But this is a constant? We can make it variable? But we'll use const.

   We'll write the entire JavaScript at the bottom.

   We'll note: to avoid variable name collision, we'll wrap the JS in an IIFE? Or use let/const at global? It's okay for a single small file.

   Steps:

        let grid = [];
        let rows = 0, cols = 0;
        let isPlaying = false;
        let intervalId = null;
        let dragging = false;
        let lastX = -1, lastY = -1;

        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');

        Then the functions: init(), initGrid(), resize(), getCellCoord(), drawGrid(), nextGeneration(), step(), and event listeners.

   We'll write:

        function initGrid() {
            // Clear the grid (if rows and cols have been set by resize)
            grid = [];
            for (let y = 0; y < rows; y++) {
                let row = [];
                for (let x = 0; x < cols; x++) {
                    row.push(false);
                }
                grid.push(row);
            }
        }

        function resize() {
            // ... as discussed above
        }

        function nextGeneration() {
            // compute next state
            let next = [];
            for (let y = 0; y < rows; y++) {
                next.push([]);
                for (let x = 0; x < cols; x++) {
                    // ... rules
                }
            }
            // copy next to grid
        }

   But note: we are not defining rows and cols until resize, so we must call resize on startup.

   Let's code step by step in the script.

   Due to the length, I will write the entire index.html in one go.

   We must be cautious: the script may run before the DOM? We can put the script at the bottom of the body.

   Alternatively, we use:

        window.onload = init;

   We'll do:

        function init() {
            // ... get the canvas and controls
            // set up event listeners for buttons and canvas
            // initial resize
            resize();
        }

        window.onload = init;

   Now, the whole thing in one file.

   We write the file.