Add overlay

Starlight-Renderer.js

@@ -13,7 +13,8 @@ class StarlightRenderer
 	constructor(canvas)
 	{
 		// The colour of the sky in the background.
-		this.skyColour = "hsla(248, 100%, 23%, 1)";
+		this.skyColour1 = "hsla(248, 100%, 23%, 1)";
+		this.skyColour2 = "hsla(248, 100%, 5%, 1)";
 		
 		this.starCount = 1000;
 		this.starSize = new Range(2, 10);
@@ -61,6 +62,31 @@ class StarlightRenderer
 		}
 	}
 	
+	generateGradients(canvas, context)
+	{
+		this.generateBackgroundGradient(canvas, context);
+		this.generateOverlayGradient(canvas, context);
+	}
+	
+	generateBackgroundGradient(canvas, context)
+	{
+		this.backgroundGradient = context.createRadialGradient(
+			canvas.width / 2, canvas.height, canvas.height / 5,
+			canvas.width / 2, canvas.height, canvas.height * 1.2
+		);
+		this.backgroundGradient.addColorStop(0, this.skyColour1);
+		this.backgroundGradient.addColorStop(1, this.skyColour2);
+	}
+	generateOverlayGradient(canvas, context)
+	{
+		this.overlayGradient = context.createRadialGradient(
+			canvas.width / 2, canvas.height, canvas.height / 5,
+			canvas.width / 2, canvas.height, canvas.height * 1.2
+		);
+		this.overlayGradient.addColorStop(0, "hsla(248, 100%, 2%, 0.6)");
+		this.overlayGradient.addColorStop(1, "hsla(248, 100%, 2%, 0.01)");
+	}
+	
 	nextFrame()
 	{
 		this.update();
@@ -85,12 +111,16 @@ class StarlightRenderer
 	render(canvas, context)
 	{
 		// Background
-		context.fillStyle = this.skyColour;
+		context.fillStyle = this.backgroundGradient;
 		context.fillRect(0, 0, this.canvas.width, this.canvas.height);
 		
 		// Stars
 		for(let star of this.stars)
 			star.render(context);
+		
+		// Overlay
+		context.fillStyle = this.overlayGradient;
+		context.fillRect(0, 0, this.canvas.width, this.canvas.height);
 	}
 	
 	/**
@@ -100,6 +130,7 @@ class StarlightRenderer
 		this.canvas.width = window.innerWidth;
 		this.canvas.height = window.innerHeight;
 		
+		this.generateGradients(this.canvas, this.context);
 		//this.render(this.context);
 	}