title: Canvas flying blurred circles
body: <p>Ok I have never dealt with canvas so I'm at a total lost.  Trying to set this effect as background: </p>
  
  <pre><code>http://codepen.io/VIRU/pen/FAdkl 
  </code></pre>
  
  <p>but trying to make those circles blurred and I saw this on so: </p>
  
  <pre><code>http://stackoverflow.com/questions/5475755/how-to-draw-a-blurry-circle-on-html5-canvas  
  </code></pre>
  
  <p>But when I try it it messes up the whole canvas and never modifies the actual circles.  So not sure how to make it work.</p>
  
  <pre><code>window.onload = function() {
  
  //Create canvas and initialize it's context
  var canvas = document.getElementById("flying-bubbles");
  var ctx = canvas.getContext("2d");
  
  //Set the dimensions of canvas equal to the window's dimensions
  var W = window.innerWidth, H = window.innerHeight;
  canvas.width = W;
  canvas.height = H;
  
  //Create an array of circles
  var circles = []; 
  for(var i = 0; i &lt; 20; i++ ){
      circles.push(new create_circle());
  }
  
  //Function to create circles with different positions and velocities
  function create_circle() {
      //Random Position
      this.x = Math.random()*W;
      this.y = Math.random()*H;
  
      //Random Velocities
      this.vx = 0.1+Math.random()*1;
      this.vy = -this.vx;
  
      //Random Radius
      this.r = 10 + Math.random()*50;
  }
  
  //Function to draw the background
  function draw() {
      //Create the gradient
      var grad = ctx.createLinearGradient(0, 0, W, H);
      grad.addColorStop(0, 'rgba(19, 105, 168,0.8)');
      grad.addColorStop(1, 'rgba(0, 0, 0,1)');
  
      //Fill the canvas with the gradient
      ctx.globalCompositeOperation = "source-over";
      ctx.fillStyle = grad;
      ctx.fillRect(0,0,W,H);
  
      //Fill the canvas with the circles
      for(var j = 0; j &lt; circles.length; j++) {
          var c = circles[j];
  
          //Draw the circle and it with the blur grad
          ctx.beginPath();
          ctx.globalCompositeOperation = "lighter";       
          ctx.fillStyle = grad;
          ctx.arc(c.x, c.y, c.r, Math.PI*2, false);
          ctx.fill();
  
          //Lets use the velocity now
          c.x += c.vx;
          c.y += c.vy;
  
          //To prevent the circles from moving out of the canvas
          if(c.x &lt; -50) c.x = W+50;
          if(c.y &lt; -50) c.y = H+50;
          if(c.x &gt; W+50) c.x = -50;
          if(c.y &gt; H+50) c.y = -50;
      }
  }
  
  setInterval(draw, 25);
  
  } 
  </code></pre>