title: How can I create a shimmer over time animation with a canvas element?
body: <p>So I know most people don't prefer to have odd colors behind text but, my site <a href="http://www.cbradiowaves.com" rel="nofollow">http://www.cbradiowaves.com</a> is supposed to look more like a newspaper. Anyways I'm using a canvas element to create a gradient for the background and it loads pretty quickly however I had this really cool idea that I could make the background appear to shimmer if I could only create a loop for the inputs to the canvas element settings. I think there will be an easy solution for an experienced javascript programmer.</p>
  
  <p>Here's my code:</p>
  
  <pre><code>&lt;canvas id="background" width="1020" height="1020"
  style="border:0px solid #d3d3d3;"&gt;
  Your browser does not support the HTML5 canvas tag.&lt;/canvas&gt;
  
  &lt;script&gt;
  var c = document.getElementById("background");
  var ctx = c.getContext("2d");
  
  // Create gradient
  var grd = ctx.createRadialGradient(100,100,100,90,800,850);
  grd.addColorStop(0,"white");
  grd.addColorStop(1,"silver");
  
  // Fill with gradient
  ctx.fillStyle = grd;
  ctx.fillRect(0,0,1020,1020);
  &lt;/script&gt;
  </code></pre>
  
  <p>The line that needs to be incremented over time to create an animation is this one:</p>
  
  <pre><code>var grd = ctx.createRadialGradient(100,100,100,90,800,850);
  </code></pre>
  
  <p>I think that javascript has the power to do this probably with a function but it is escaping me.</p>