terrain.js

let canvas = document.createElement("canvas");
canvas.width = 600;
canvas.height = 400;
let ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
const step = 10;
const bumpiness = 10;

function lerp(a, b, t) {
  return a * (1 - t) + b * t;
}

function drawTerrain() {

  let peaks = [];
  for (let x = 0; x <= canvas.width/step; x++) {
    peaks.push(Math.random());
  }  
  
  ctx.beginPath();
  
  for (let x = 0, peakCount = 0; x < canvas.width; x += step, peakCount++) {        
    for (let i = 0; i < step; i++) {     
          
      let peakA = peaks[peakCount] || 0;
      let peakB = peaks[peakCount+1] || 0;
      
      let xlerp = lerp(x, x + step, i/step);
      let ylerp = bumpiness * lerp(peakA, peakB, i/step) + canvas.height / 2;
      
      ctx.moveTo(xlerp, ylerp|0);
      ctx.lineTo(xlerp, canvas.height);
    }
  }
  
  ctx.stroke();
}

drawTerrain();