How Conway Canvas Works

Overview

Conway Canvas is a single-page web application that runs entirely in the browser. There is no server-side computation — everything from the simulation engine to the pattern library is handled client-side using vanilla JavaScript and the HTML5 Canvas API.

This page gives you a behind-the-scenes look at the key systems that make Conway Canvas work.

The Simulation Engine

At the heart of Conway Canvas is a HashSet-based Game of Life engine. Instead of storing the entire grid as a 2D array (which would waste memory on empty cells), we only track living cells in a JavaScript Set.

How a generation step works

• For every living cell, we examine its eight neighbors.
• We count how many neighbors are alive.
• We apply Conway's four rules: underpopulation, survival, overpopulation and reproduction.
• The result is a new Set of living cells — the next generation.

This sparse representation means Conway Canvas can handle patterns with thousands of living cells on a grid that is effectively infinite — no fixed boundaries, no wrapping.

Rendering with HTML5 Canvas

The visible grid is drawn on an HTML5 <canvas> element. On every frame, the renderer:

• Calculates which cells are currently visible based on the viewport offset and zoom level.
• Draws only the visible cells — no off-screen work.
• Renders grid lines at appropriate zoom levels (hidden when zoomed out far).
• Overlays ghost previews for stamps, selections and shape tools.

Panning and zooming are handled via mouse drag, scroll wheel and touch gestures (pinch-to-zoom). The coordinate system smoothly translates between screen pixels and grid cells.

Pattern Library & RLE Format

Conway Canvas ships with a built-in library of 120+ classic Game of Life patterns, organized into categories:

• Still Lifes — stable configurations that never change (Block, Beehive, Loaf…)
• Oscillators — patterns that cycle through a fixed sequence (Blinker, Pulsar, Pentadecathlon…)
• Spaceships — patterns that move across the grid (Glider, LWSS, HWSS…)
• Methuselahs — small patterns that take many generations to stabilize (R-pentomino, Acorn, Diehard…)
• Guns — patterns that emit streams of spaceships (Gosper Glider Gun…)
• Puffers — moving patterns that leave debris behind

Patterns are stored internally as coordinate arrays. Import and export use the RLE (Run Length Encoded) format — the standard format used by the Game of Life community and LifeWiki.

Drawing & Editing Tools

Conway Canvas provides a creative toolset beyond simple cell toggling:

• Stamp tool — place patterns from the library or your own custom stamps onto the canvas.
• Select tool — select a rectangular region to copy, fill randomly, or export.
• Pan tool — navigate the infinite grid by dragging.
• Erase tool — remove living cells by painting over them.
• Brush stamping — hold and drag to stamp patterns repeatedly along a path.
• Transforms — rotate 90°, flip horizontally or vertically before placing.

All drawing operations support undo/redo with a history stack, so you can freely experiment without fear of losing your work.

Progressive Web App (PWA)

Conway Canvas is a fully installable Progressive Web App. This means:

• Install on any device — add it to your home screen on Android, iOS, Windows, macOS or Linux for a native app experience.
• Offline capable — a Service Worker caches all assets so you can run simulations without an internet connection.
• Fast loading — assets are pre-cached and served locally, resulting in near-instant startup times.
• Auto-updating — when a new version is deployed, the Service Worker fetches fresh assets on the next visit.

Performance & Optimization

Several techniques keep Conway Canvas fast, even with complex patterns:

• Sparse data structure — only living cells are stored, not the entire grid.
• Viewport culling — only visible cells are rendered each frame.
• requestAnimationFrame — simulation and rendering are synced to the display refresh rate.
• Adjustable speed — simulation runs at 1–60 generations per second, configurable in real time.
• Minified & compressed — HTML is minified, assets are served with gzip and Brotli compression.

Responsive Design & Touch Support

Conway Canvas adapts to any screen size:

• Desktop — full four-column layout with tools, library, canvas and properties panel.
• Tablet — collapsible side panels with overlay navigation and a bottom action bar.
• Mobile — optimized touch controls with pinch-to-zoom, tap-to-place and swipe-to-pan.

All interactive elements meet minimum touch target sizes (44px) for comfortable use on touchscreens.

Open Standards

Conway Canvas is built on open web standards with zero dependencies:

• Vanilla JavaScript — no frameworks, no build step, no npm packages.
• HTML5 Canvas API — hardware-accelerated 2D rendering.
• Web App Manifest — for PWA installation and metadata.
• Service Worker API — for offline caching and background updates.
• RLE format — industry-standard pattern interchange format.

The entire application is a single HTML file with inline CSS and JavaScript — lightweight, fast and easy to deploy.

▶ Try Conway Canvas now