Added gradient under frequency display

diff --git a/static/player.html b/static/player.html
index e91da14a1ab627c5c34d0fd5ddd2804bd3e0e401..a33e0741e2495fcbd179480149a3f01226cdbdd8 100644 (file)
--- 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.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);
        }
 
        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.strokeStyle = "rgb( 43 85 54 )";
        ctx.lineWidth = 2;

+       ctx.fill();

        ctx.stroke();
 
        requestAnimationFrame(renderFrame);
        ctx.stroke();
 
        requestAnimationFrame(renderFrame);