From: Max Value <greenwoodw50@gmail.com>
Date: Sat, 4 Jan 2025 01:35:35 +0000 (+0000)
Subject: Added gradient under frequency display
X-Git-Url: https://git.ozva.co.uk/?a=commitdiff_plain;ds=sidebyside;p=critters-api

Added gradient under frequency display
---

diff --git a/static/player.html b/static/player.html
index e91da14..a33e074 100644
--- a/static/player.html
+++ b/static/player.html
@@ -213,15 +213,25 @@ function renderFrame() {
 
 	ctx.clearRect(0, 0, canvas.width, canvas.height);
 	ctx.beginPath();
-	ctx.moveTo(0, canvas.height - (array[0] * (canvas.height / 255) * 0.75));
+	ctx.moveTo(-2, canvas.height - (array[0] * (canvas.height / 255) * 0.75));
 
 	for (var i = 0; i < points; i++) {
 		var value = array[i * dataStep];
 		ctx.lineTo(pixelStep * i, canvas.height - (value * (canvas.height / 255) * 0.75) + 2);
 	}
+	ctx.lineTo(canvas.width + 2, canvas.height - (array[-1] * (canvas.height / 255) * 0.75) + 2);
+	ctx.lineTo(canvas.width + 2, canvas.height + 2);
+	ctx.lineTo(-2, canvas.height + 2);
+	ctx.closePath();
 
+	let gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
+	gradient.addColorStop(0., "rgb( 43 85 54 / 100% )");
+	gradient.addColorStop(1., "rgb( 43 85 54 / 0% )");
+
+	ctx.fillStyle = gradient;
 	ctx.strokeStyle = "rgb( 43 85 54 )";
 	ctx.lineWidth = 2;
+	ctx.fill();
 	ctx.stroke();
 
 	requestAnimationFrame(renderFrame);