Move horizon out. Stretch to edge of canvas. Fade lines in distance. Add a fill to cover previous lines.
[php lang=”JavaScript”]$(function() {
var canvas, context, width, height, x, x1, x2, y, z = 5000, fl = 350, xres = 5, zres = 5, xcenter, ycenter, scale;
canvas = $(“#canvas”).get(0);
context = canvas.getContext(“2d”);
width = canvas.width;
height = canvas.height;
xcenter = width / 2;
ycenter = height / 2;
context.fillStyle = “#ffffff”;
while(z > 0) {
scale = fl / (fl + z);
x1 = xcenter – width / scale / 2 * scale;
x2 = xcenter + width / scale / 2 * scale;
y = ycenter + (200 + Math.random() * 5) * scale;
context.strokeStyle = “rgba(0,0,0,” + scale + “)”;
context.beginPath();
context.moveTo(x1, y);
for(x = x1; x <= x2; x += xres) {
y = ycenter + (200 + Math.random() * 5) * scale;
context.lineTo(x, y);
}
context.lineTo(x, height);
context.lineTo(0, height);
context.closePath();
context.fill();
context.stroke();
z -= zres;
}
});[/php]
Result.