title: How can I add a radial gradient effect to particles?
body: <p>I am creating particle animation using Canvas &amp; JavaScript. in the below example particles are generating and applying colour (red &amp; blue) to each particles dynamically. I want to add Radial Gradient colour effect to each particle. 
  I have tried createRadialGradient() method but it make my browser window blank &amp; animation is not working.</p>
  
  <p>How could I achieve this? any reference will be very useful. Thank you in advance.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function() {
                  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||
                  function(callback) {
                      window.setTimeout(callback, 1000 / 60);
                  };
                  window.requestAnimationFrame = requestAnimationFrame;
              })();
  
              var particleArr = [],
              canvas = document.getElementById("canvas"),
              ctx = canvas.getContext("2d"),
              flakeCount = 700,
              mouseX = -100,
              mouseY = -100,
              xMultiplier = 0.015
              
              canvas.width = window.innerWidth;
              canvas.height = window.innerHeight;
  
              var rate = 0.07788656582264941;
  
              function getRandomColor() {
                  // Random Color Generate
                  const colorArr = ["rgba(215,88,69, 1)", "rgba(117, 161, 199, 1)"]; // Blue &amp; Orange Color
                  const randomColor = colorArr[Math.floor(Math.random() * colorArr.length)];
  
                  return randomColor;
              }
  
              function flow() {
                  ctx.clearRect(0, 0, canvas.width, canvas.height);
                   
                  for (var i = 0; i &lt; flakeCount; i++) {
                      var flake = particleArr[i],
                          x = mouseX,
                          y = mouseY,
                          minDist = 150,
                          x2 = flake.x,
                          y2 = flake.y;
  
                      var dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)),
                          dx = x2 - x,
                          dy = y2 - y;
                      
                      if (dist &lt; minDist) {
                          var force = minDist / (dist * dist),
                              xcomp = (x - x2) / dist,
                              ycomp = (y - y2) / dist,
                              deltaV = force / 2;                            
                          flake.velX -= deltaV * xcomp;
                          flake.velY -= deltaV * ycomp;
  
                      } else {
                          flake.velX *= .98;
                          if (flake.velY &lt;= flake.speed) {
                              flake.velY = flake.speed
                          }
                          flake.velX += Math.cos(flake.step += .05) * flake.stepSize;
                      }
                  
                      flake.y += flake.velY;
                      flake.x += flake.velX;                    
                          
                      if (flake.y &gt;= canvas.height || flake.y &lt;= 0) {
                          reset(flake);
                      }
  
                      if (flake.x &gt;= canvas.width || flake.x &lt;= 0) {
                          reset(flake);
                      }
  
                      ctx.fillStyle = particleArr[i].color;
                      
                      ctx.beginPath();
                      ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2);
                      ctx.fill();
                  }
                  
                  requestAnimationFrame(flow);                
              };
  
              function reset(flake) {
                  let temp = (Math.random() * 1) + 0.5;
                  flake.x = canvas.width;
                  flake.y = 50;
                  flake.size = 6.692053245649504;
                  flake.speed = (Math.random() * 7) + 0.5;
                  flake.velY = flake.speed;
                  flake.velX = -xMultiplier  * canvas.width * temp;
              }
  
              function init() {
                  for (var i = 0; i &lt; flakeCount; i++) {
                      var x = canvas.width,
                          y = 50,
                          size = 6.692053245649504,
                          speed = 0;
                        
                      particleArr.push({
                          speed: speed,
                          velY: speed,
                          velX: -xMultiplier  * canvas.width  * speed,
                          x: x,
                          y: y,
                          size: size,
                          stepSize: (Math.random()) / 30,
                          step: 0,
                          angle: 360,
                          color: getRandomColor()
                      });
                  }
  
                  requestAnimationFrame(flow);
              };
  
              canvas.addEventListener("mousemove", function(e) {
                  mouseX = e.clientX,
                  mouseY = e.clientY     
              });
  
              window.addEventListener( 'resize', onWindowResize, false );
  
              function onWindowResize() {
                  canvas.width = window.innerWidth;
                  canvas.height = window.innerHeight;
              }
  
              init();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>canvas{
                  background-color: #000000 !important;
              }
  
              body {
                  margin: 0;
                  overflow: hidden;
              }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>        &lt;canvas id="canvas"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>