In early 2000s classics like Scorched Earth and Worms, one of the most satisfying elements of the gameplay loop was **destructible terrain**. Watching a high-yield mortar shell carve a perfect circular crater out of a mountain landscape transformed the spatial strategy dynamically. However, recreating this behavior natively in a web browser without falling back on heavy external physics frameworks like Unity or PlayCanvas requires a solid understanding of procedural generation mathematics, bitmapped arrays, and pixel-compositing configurations.
When developing War Tanks, our flagship artillery game, we wanted to ensure the landscape loaded under 2 seconds and ran at a smooth 60fps on both budget mobile devices and high-end desktop browsers. The solution lay in architecting a custom destructible terrain engine using the native HTML5 Canvas 2D API. In this deep-dive article, we pull back the curtain and show you exactly how to implement this system from scratch.
Phase 1: Procedural Generation via Midpoint Displacement
Before you can destroy a landscape, you must create one. Standard mathematical equations like Math.sin() generate uniform, artificial-looking waves. To construct natural, rugged hills and valleys, we utilize a 1D fractal generation algorithm known as **Midpoint Displacement** (or the Diamond-Square algorithm reduced to one dimension).
The core concept is elegant: start with a straight line between two endpoints, locate the midpoint, displace it vertically by a random amount, and then recursively repeat the process on the resulting sub-segments. Each recursive pass reduces the maximum possible displacement range, creating beautiful, nested micro-variations (valleys) while retaining broad macro-features (mountains).
Here is our production-ready JavaScript implementation of midpoint displacement:
function generateTerrain(width, height, roughness) {
const points = [];
const minHeight = height * 0.3;
const maxHeight = height * 0.85;
// Set initial endpoints
points[0] = Math.random() * (maxHeight - minHeight) + minHeight;
points[width] = Math.random() * (maxHeight - minHeight) + minHeight;
displace(0, width);
function displace(left, right) {
if (right - left <= 1) return;
const mid = Math.floor((left + right) / 2);
const average = (points[left] + points[right]) / 2;
// Calculate displacement range scaled by interval length and roughness
const displacementRange = (right - left) * roughness;
const offset = (Math.random() - 0.5) * displacementRange;
// Clamp the midpoint value between boundaries
points[mid] = Math.max(minHeight, Math.min(maxHeight, average + offset));
// Recursively displace left and right sub-intervals
displace(left, mid);
displace(mid, right);
}
return points;
}By adjusting the roughness scalar (typically between 0.1 and 0.3), you can shift the terrain profile instantly from flat, rolling meadows to towering, jagged alpine ranges.
Phase 2: Rendering the Static Canvas Heightmap
Once the displacement array is fully calculated, we must draw it onto our canvas. In classical games, this was done by drawing hundreds of vertical columns using a for loop. However, calling ctx.lineTo() hundreds of times per frame introduces high rendering overhead.
Instead, we compile the displacement points into a single vector path, close the path at the bottom corners of the canvas, and fill it using a CSS gradient. This leverages GPU-accelerated path filling, which keeps drawing performance extremely high:
function drawTerrain(ctx, points, width, height) {
ctx.beginPath();
ctx.moveTo(0, height); // Start bottom-left
for (let x = 0; x <= width; x++) {
// Draw path connecting each displacement point
ctx.lineTo(x, height - points[x]);
}
ctx.lineTo(width, height); // Close path bottom-right
ctx.closePath();
// Fill terrain with a futuristic dark green gradient
const gradient = ctx.createLinearGradient(0, 0, 0, height);
gradient.addColorStop(0.2, '#16a34a'); // Top grass color
gradient.addColorStop(0.8, '#0b391b'); // Deep soil color
ctx.fillStyle = gradient;
ctx.fill();
}Phase 3: Real-Time Terrain Destruction via Pixel Compositing
Now comes the crucial part: how do we deform this terrain when a projectile impacts the ground? If we relied on recalculating the math displacement array and redrawing the vector path from scratch, we would face three major problems:
- Complex Geometry: Vector paths do not handle overhanging cliffs or multi-craters easily. If an explosion carves a chunk out of a mountain, representing the resulting shape as a single 1D continuous path becomes mathematically impossible.
- Performance bottlenecks: Recalculating complex vectors on every collision causes CPU-bound micro-stutters during heavy battles.
- Orphaned Floating Terrain: Vector paths cannot easily represent a floating chunk of earth that has been severed from the main mountain.
To bypass these bottlenecks, we use a raster-based rendering approach leveraging HTML5 Canvas **Global Compositing Operations**. Specifically, the "destination-out" blend mode.
When you set ctx.globalCompositeOperation = "destination-out", any new shape you draw onto the canvas acts as a **pixel eraser** — it cuts out the overlap area, turning solid pixels transparent. This operates at the GPU hardware blend layer, offering exceptional execution speeds.
Here is our modular function for executing dynamic terrain destruction:
function destroyTerrain(mainCtx, impactX, impactY, blastRadius) {
// 1. Switch to erasing composite mode
mainCtx.globalCompositeOperation = "destination-out";
// 2. Draw a circular radial gradient representing the explosion blast
mainCtx.beginPath();
const grad = mainCtx.createRadialGradient(
impactX, impactY, 0,
impactX, impactY, blastRadius
);
// Erase completely in the center, and feather slightly at the edge
grad.addColorStop(0.9, 'rgba(0,0,0,1)');
grad.addColorStop(1, 'rgba(0,0,0,0)');
mainCtx.fillStyle = grad;
mainCtx.arc(impactX, impactY, blastRadius, 0, Math.PI * 2);
mainCtx.fill();
// 3. IMPORTANT: Reset back to standard composite mode for future drawing!
mainCtx.globalCompositeOperation = "source-over";
}This simple function handles complex, overlapping craters, vertical tunnels, and even severed floating dirt islands natively without a single line of complex vector calculus!
Phase 4: High-Performance Collision Detection on Erased Canvas
Once pixels are erased, standard mathematical curves no longer reflect the actual terrain layout. How does our game engine detect when a tank or projectile impacts these newly carved craters? We must query the transparent pixels directly.
The browser provides this functionality through ctx.getImageData(). However, calling `getImageData` every frame is notorious for causing CPU stalls. To keep the frame rate locked at 60fps, we maintain a secondary, lightweight **1D Height Array** in memory alongside the visual canvas, or only read a single 1x1 pixel block directly beneath our moving vectors using the following helper:
function isImpactDetected(ctx, x, y) {
// Read only a single pixel at the target coordinate
const imgData = ctx.getImageData(Math.floor(x), Math.floor(y), 1, 1).data;
// Check the Alpha channel (index 3). If alpha is 0, the pixel is empty/transparent.
// If alpha > 0, we have hit solid terrain!
return imgData[3] > 0;
}Conclusion & Future Optimization Paths
By shifting from CPU-intensive math displacement recalculations to GPU-accelerated raster compositing, we achieve a robust, highly stable destructible terrain system that runs flawlessly across all devices. In future iterations, you can expand this engine by introducing pixel-particle fallbacks — reading the boundary of erased pixels and spawning falling debris particles (sand physics) using Cellular Automata algorithms (Sand-Spiel style) to make the terrain feel even more alive.
Try out these exact techniques in your own projects! You can see them in active execution right on our platform by launching War Tanks natively in the hub today.
