title: Canvas arc and fill with gradient
body: <p>I have the following source code:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;canvas id="main" width="500" height="500" style="border:1px solid black;"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p><strong>JavaScript:</strong></p>
  
  <pre><code>function myRnd(val)
  {
      return parseInt(Math.random() * val);
  }
  
  function rndCircles() {
      var maxCircles = 30;
  
      for (var r = 1; r &lt;= maxCircles; r++) {
          var c = document.getElementById("main");
          var x = myRnd(c.clientWidth);
          var y = myRnd(c.clientHeight);
          var radius = parseInt(Math.random() * 30);
  
          var ctx = c.getContext("2d");
          // Create gradient
          var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
          grd.addColorStop(0, 'rgb(' + myRnd(255) + ', ' + myRnd(255) + ',' + myRnd(255) + ')');
          grd.addColorStop(1, 'white');
  
          ctx.beginPath();
  
          ctx.arc(x, y, radius, 0, 2 * Math.PI,false);
          // Fill with gradient
          ctx.fillStyle = grd;
          ctx.fill();
          ctx.lineWidth = 5;
          //ctx.strokeStyle = '#003300';
          ctx.stroke();
      }
  }
  
  rndCircles();
  </code></pre>
  
  <p>I cannot see each arc filled with a different color/gradient on Chrome. Why? Am I missing something?</p>
  
  <p>Fiddle here:
  <a href="https://jsfiddle.net/j9wst2yd/" rel="nofollow">https://jsfiddle.net/j9wst2yd/</a></p>