Base: Add a radial gradient with transparent end stops canvas demo

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!