Example : Rainbow Arch Radial Gradient

refresh(dc, width, height) // Sample code by Jim Bumgardner
{
  dc.clearRect(0,0,width,height);
  
  var skyBlue = '#87CEEB';
  var lightSkyBlue = '#87CEFA';
  var deepSkyBlue = '#00BFFF';
  
  var grad = dc.createLinearGradient(0,0,1,height);
  grad.addColorStop(0, deepSkyBlue);
  grad.addColorStop(.33, skyBlue);
  grad.addColorStop(.66, lightSkyBlue);
  grad.addColorStop(1, 'white');
  
  dc.fillStyle = grad;
  dc.fillRect(0,0,width,height);
  
  function hslaColor(h,s,l,a)
  {
    return 'hsla(' + h + ',' + s + '%,' + l + '%,' + a + ')';
  }
  
  var cx = width/2;
  var cy = height;
  var rainbowThick = width/10;
  var outerRad = width*.45;
  var innerRad = outerRad-rainbowThick;
  
  var rgrad = dc.createRadialGradient(cx, cy, outerRad, cx, cy, innerRad);
  var bands = 7;
  for (var i = 0; i < bands; ++i) {
    var ratio = i/bands;
    var hue = Math.floor(360*ratio*ratio);
    var sat = 100;
    var lum = 50;
    var alpha = Math.sin(Math.PI*ratio) * 1.5;
    rgrad.addColorStop(ratio+.01, hslaColor(hue, sat, lum, alpha));
  }
  rgrad.addColorStop(1,hslaColor(0,0,1,0)); // Insure both edges are transparent
  
  dc.fillStyle = rgrad;
  dc.fillRect(0,0,width,height);
  
  
}