From 02f6c978b13eddc1a18822bad4fd12125bb4229e Mon Sep 17 00:00:00 2001
From: Marco van Dijk <marco@stronk.rocks>
Date: Fri, 10 Mar 2023 17:08:11 +0100
Subject: [PATCH] Fix ball sizing

---
 gradientBall.html | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/gradientBall.html b/gradientBall.html
index b9b8465..dcaaeea 100644
--- a/gradientBall.html
+++ b/gradientBall.html
@@ -98,14 +98,12 @@
 		grd.addColorStop(1, `hsla(${h}, ${s}%, ${l}%, 0)`);
 
 		ctx.beginPath();
-		// Rotate Ball around center
-		ctx.translate(midPoint.x, midPoint.y);
-		ctx.translate(0, distance);
+		// Rotate canvas around the ball
+		ctx.translate(midPoint.x, midPoint.y + distance);
 		ctx.rotate(0.001 * rotate);
-		ctx.translate(-midPoint.x, -midPoint.y);
-		ctx.translate(0, -distance);
+		ctx.translate(-midPoint.x, -midPoint.y - distance);
 		// Draw Ball
-		ctx.arc(midPoint.x, midPoint.y, midPoint.x - 2, 0, Math.PI * 2, false);
+		ctx.arc(midPoint.x, midPoint.y, radius, 0, Math.PI * 2, false);
 		ctx.fillStyle = grd;
 		ctx.fill();
 		ctx.closePath();
@@ -113,4 +111,4 @@
 		window.requestAnimationFrame(update);
 	}
 	window.requestAnimationFrame(update);
-</script>
\ No newline at end of file
+</script>