JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<canvas id="canvas"></canvas>

CSS

#canvas {
  border:1px solid black;
}

JavaScript

var canvas = document.getElementById("canvas"),
		ctx = canvas.getContext("2d");
var w = 240, h = 180;

canvas.width = w;
canvas.height = h;

var groundHeight = [50];
for(x = 1; x < w - 1; x++) {
	groundHeight[x] = (groundHeight[x - 1] + (Math.random() - 0.5) * 3);
}
console.log(groundHeight);

for(x = 0; x < w; x++) {
	var length = Math.random() * 10 + 10;
  ctx.strokeStyle = "#8fe580";
	line(x, h - groundHeight[x], x, h);
  ctx.strokeStyle = "#78c46c";
	line(x, h - groundHeight[x], x, h - groundHeight[x] + length);
  ctx.strokeStyle = "#5cad60";
	line(x, h - groundHeight[x], x, h - groundHeight[x] + length * (Math.random() * 0.3 + 0.3));
  ctx.strokeStyle = "#665134";
  line(x, h, x, h - groundHeight[x] + 35 - Math.random() * 10);
  ctx.strokeStyle = "#41342b";
  line(x, h, x, h - groundHeight[x] + 45 - Math.random() * 5);
}


function line(x1, y1, x2, y2) {
	ctx.beginPath();
  ctx.moveTo(Math.round(x1) + 0.5, Math.round(y1));
  ctx.lineTo(Math.round(x2) + 0.5, Math.round(y2));
  ctx.stroke();
}