title: Trying to create a confetti effect in html5, how do I get a different fill color for each element?
body: <p><strong>EDIT:</strong></p>
  
  <p>For anybody who is curious, here is the finished result.</p>
  
  <p><a href="http://jsfiddle.net/Javalsu/vxP5q/743/embedded/result/">http://jsfiddle.net/Javalsu/vxP5q/743/embedded/result/</a></p>
  
  <hr>
  
  <p>I'm building off of the code I found in this link</p>
  
  <p><a href="http://thecodeplayer.com/walkthrough/html5-canvas-snow-effect">http://thecodeplayer.com/walkthrough/html5-canvas-snow-effect</a></p>
  
  <p>I want to make this more of a confetti falling effect than a snow effect, and I would need to make each element a different color.  But it seems that the fill color is set for entire canvas at once.</p>
  
  <p>Is there a way to specify a different fill color for each element or am I going about this the entirely wrong way?</p>
  
  <p>Thanks</p>
  
  <p>Update:  Here is the finished product if anybody has a need for confetti</p>
  
  <p><a href="http://jsfiddle.net/mj3SM/6/">http://jsfiddle.net/mj3SM/6/</a></p>
  
  <pre><code>window.onload = function () {
  //canvas init
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  
  //canvas dimensions
  var W = window.innerWidth;
  var H = window.innerHeight;
  canvas.width = W;
  canvas.height = H;
  
  //snowflake particles
  var mp = 200; //max particles
  var particles = [];
  for (var i = 0; i &lt; mp; i++) {
      particles.push({
          x: Math.random() * W, //x-coordinate
          y: Math.random() * H, //y-coordinate
          r: Math.random() * 15 + 1, //radius
          d: Math.random() * mp, //density
          color: "rgba(" + Math.floor((Math.random() * 255)) + ", " + Math.floor((Math.random() * 255)) + ", " + Math.floor((Math.random() * 255)) + ", 0.8)",
          tilt: Math.floor(Math.random() * 5) - 5
      });
  }
  
  //Lets draw the flakes
  function draw() {
      ctx.clearRect(0, 0, W, H);
  
  
  
      for (var i = 0; i &lt; mp; i++) {
          var p = particles[i];
          ctx.beginPath();
          ctx.lineWidth = p.r;
          ctx.strokeStyle = p.color; // Green path
          ctx.moveTo(p.x, p.y);
          ctx.lineTo(p.x + p.tilt + p.r / 2, p.y + p.tilt);
          ctx.stroke(); // Draw it
      }
  
      update();
  }
  
  //Function to move the snowflakes
  //angle will be an ongoing incremental flag. Sin and Cos functions will be applied to it to create vertical and horizontal movements of the flakes
  var angle = 0;
  
  function update() {
      angle += 0.01;
      for (var i = 0; i &lt; mp; i++) {
          var p = particles[i];
          //Updating X and Y coordinates
          //We will add 1 to the cos function to prevent negative values which will lead flakes to move upwards
          //Every particle has its own density which can be used to make the downward movement different for each flake
          //Lets make it more random by adding in the radius
          p.y += Math.cos(angle + p.d) + 1 + p.r / 2;
          p.x += Math.sin(angle) * 2;
  
          //Sending flakes back from the top when it exits
          //Lets make it a bit more organic and let flakes enter from the left and right also.
          if (p.x &gt; W + 5 || p.x &lt; -5 || p.y &gt; H) {
              if (i % 3 &gt; 0) //66.67% of the flakes
              {
                  particles[i] = {
                      x: Math.random() * W,
                      y: -10,
                      r: p.r,
                      d: p.d,
                      color: p.color,
                      tilt: p.tilt
                  };
              } else {
                  //If the flake is exitting from the right
                  if (Math.sin(angle) &gt; 0) {
                      //Enter from the left
                      particles[i] = {
                          x: -5,
                          y: Math.random() * H,
                          r: p.r,
                          d: p.d,
                          color: p.color,
                          tilt: p.tilt
                      };
                  } else {
                      //Enter from the right
                      particles[i] = {
                          x: W + 5,
                          y: Math.random() * H,
                          r: p.r,
                          d: p.d,
                          color: p.color,
                          tilt: p.tilt
                      };
                  }
              }
          }
      }
  }
  
  //animation loop
  setInterval(draw, 20);
  </code></pre>
  
  <p>}</p>