From 8272cfc9f32bb50e93f1cc42d9f07b9617c9986c Mon Sep 17 00:00:00 2001
From: MacDue <macdue@dueutil.tech>
Date: Mon, 23 Jan 2023 00:44:14 +0000
Subject: [PATCH] Base: Add a radial gradient with transparent end stops canvas
 demo

---
 Base/res/html/misc/canvas-gradients.html | 41 +++++++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

diff --git a/Base/res/html/misc/canvas-gradients.html b/Base/res/html/misc/canvas-gradients.html
index 82a27b102a..1a71069acb 100644
--- a/Base/res/html/misc/canvas-gradients.html
+++ b/Base/res/html/misc/canvas-gradients.html
@@ -2,7 +2,9 @@
 <h1>Canvas Gradients</h1>
 <h2>Radial Gradients</h2>
 <em>MDN example</em><br>
-<canvas id="mdnRadial" width="200" height="200"></canvas>
+<canvas id="mdnRadial" width="200" height="200"></canvas><br>
+<em>Balls (transparent end stops)</em><br>
+<canvas id = "balls"></canvas>
 <h3>Interactive Radial Gradients (mouse over)</h3>
 <hr>
 <em>A radial gradient</em><br>
@@ -34,7 +36,44 @@
   ctx.fillRect(20, 20, 160, 160);
 }
 </script>
+<script>
+{
+  const canvas = document.getElementById('balls');
+  var ctx = canvas.getContext('2d');
 
+  const radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
+  radgrad.addColorStop(0, '#A7D30C');
+  radgrad.addColorStop(0.9, '#019F62');
+  radgrad.addColorStop(1, 'rgba(1,159,98,0)');
+
+  const radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);
+  radgrad2.addColorStop(0, '#FF5F98');
+  radgrad2.addColorStop(0.75, '#FF0188');
+  radgrad2.addColorStop(1, 'rgba(255,1,136,0)');
+
+  const radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);
+  radgrad3.addColorStop(0, '#00C9FF');
+  radgrad3.addColorStop(0.8, '#00B5E2');
+  radgrad3.addColorStop(1, 'rgba(0,201,255,0)');
+
+  const radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);
+  radgrad4.addColorStop(0, '#F4F201');
+  radgrad4.addColorStop(0.8, '#E4C700');
+  radgrad4.addColorStop(1, 'rgba(228,199,0,0)');
+
+  ctx.fillStyle = radgrad4;
+  ctx.fillRect(0,0,150,150);
+
+  ctx.fillStyle = radgrad3;
+  ctx.fillRect(0,0,150,150);
+
+  ctx.fillStyle = radgrad2;
+  ctx.fillRect(0,0,150,150);
+
+  ctx.fillStyle = radgrad;
+  ctx.fillRect(0,0,150,150);
+}
+</script>
 <script>
 // Interactive radial gradients... The MacDue debugging experience live!