Example 9: Rainbow Arch w 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 + ')';
  }
  
  function arch(dc,color,cx,cy,rad)
  {
    dc.strokeStyle = color;
    dc.beginPath();
    dc.arc(cx, cy, rad, Math.PI, 2*Math.PI, false);
    dc.stroke();
  }
  
  var cx = width/2;
  var cy = height;
  var rainbowThick = width/10;
  var outerRad = width*.45;
  
  dc.lineWidth = 2; // This line prevents moire artifacts from appearing in the arch - turn it off to see what happens
                    // Because extra pixels are being painted, we have to compensate by using a lighter alpha value
  
  for (var i = 0; i < rainbowThick; ++i) {
    var ratio = i/rainbowThick;
    var hue = Math.floor(360*ratio*ratio);
    var sat = 100;
    var lum = 50;
    var alpha = Math.sin(Math.PI*ratio) * 1.5 / 2; // We divide by 2 here to compensate for the extra line width
    arch(dc, hslaColor(hue,sat,lum,alpha), cx, cy, outerRad-i);
  }
  
}