title: HTML5 Canvas Falling Confetti / Snow Multiple Objects
body: <p>I started from this example: <a href="http://thecodeplayer.com/walkthrough/html5-canvas-snow-effect" rel="nofollow">http://thecodeplayer.com/walkthrough/html5-canvas-snow-effect</a></p>
  
  <p>I'm trying to add multiple shapes of falling objects. However only the last one I call seems to work. It overwrites the others on screen.  </p>
  
  <p>The other thing I'm trying to do is to randomize the color from the array, but when I add a random function I get a crazy color changing effect. I don't fully understand what's happening, this is my first dive into canvas. It seems like the objects are being redrawn each frame. Which works for the snow since it's all white circles. </p>
  
  <p>Any idea how I can make these changes? Here's my code (SEIZURE WARNING!): <a href="http://codepen.io/paper_matthew/pen/vGpyeq" rel="nofollow">http://codepen.io/paper_matthew/pen/vGpyeq</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;canvas id="confetti"&gt;&lt;/canvas&gt;
  
  &lt;div id="party-info"&gt;
  
    &lt;h2&gt;PARTY!!&lt;/h2&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt impedit animi enim iste repellat aliquam laborum consequuntur asperiores neque eos praesentium quis, consectetur cupiditate suscipit cum inventore excepturi? Vel, laudantium.&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>html,
  body {
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: #fff;
    overflow: hidden;
  }
  
  #confetti {
    position: relative;
    top:0;
    left: 0;
    z-index: 1;
  }
  
  #party-info {
    position: absolute;
    background: #fff;
    padding: 20px;
    margin: 0 auto;
    height: 200px;
    top: 0;
    left: 0;
    right: 0;
    bottom:0;
    text-align: center;
    width: 400px;
    z-index: 22;
    color: gray;
  }
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>window.onload = function() {
    //canvas init
    var canvas = document.getElementById("confetti");
    var ctx = canvas.getContext("2d");
  
    COLORS = [
      [238, 96, 169],
      [68, 213, 217],
      [245, 187, 152],
      [144, 148, 188],
      [235, 234, 77]
    ];
  
    //canvas dimensions
    var W = window.innerWidth;
    var H = window.innerHeight;
    canvas.width = W;
    canvas.height = H;
  
    //particles
    var mp = 100; //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() * 4 + 1, //radius
        d: Math.random() * mp //density
      })
    }
  
    // Draw the shapes
    function drawCircle() {
  
      ctx.clearRect(0, 0, W, H);
      ctx.fillStyle = "rgba(" + COLORS[Math.floor(Math.random()*5+0)] + ", 0.8)";
      ctx.beginPath();
      for (var i = 0; i &lt; mp; i++) {
        var p = particles[i];
  
        ctx.moveTo(p.x, p.y);
        ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2, true);
  
      }
      ctx.fill();
      update();
  
    }
  
    function drawTriangle() {
  
      ctx.clearRect(0, 0, W, H);
      ctx.fillStyle = "rgba(" + COLORS[2] + ", 0.8)";
      ctx.beginPath();
      for (var i = 0; i &lt; mp; i++) {
        var p = particles[i];
  
        ctx.moveTo(p.x, p.y);
        ctx.lineTo(p.x + 15, p.y);
        ctx.lineTo(p.x + 15, p.y + 15);
        ctx.closePath();
  
      }
      ctx.fill();
      update();
  
    }
  
    function drawLine() {
      ctx.clearRect(0, 0, W, H);
      ctx.strokeStyle = "rgba(" + COLORS[3] + ", 0.8)";
      ctx.beginPath();
      for (var i = 0; i &lt; mp; i++) {
        var p = particles[i];
  
        ctx.moveTo(p.x, p.y);
        ctx.lineTo(p.x, p.y + 20);
        ctx.lineWidth = 2;
  
      }
      ctx.stroke();
      update();
    }
  
    function update() {
  
      for (var i = 0; i &lt; mp; i++) {
        var p = particles[i];
        p.y += Math.cos(p.d) + 1 + p.r / 2;
        p.x += Math.sin(0) * 2;
  
        if (p.x &gt; W + 5 || p.x &lt; -5 || p.y &gt; H) {
          particles[i] = {
            x: Math.random() * W,
            y: -10,
            r: p.r,
            d: p.d
          };
        }
      }
    }
  
    function drawShapes() {
      drawTriangle();
      drawLine();
      drawCircle();
    }
  
    //animation loop
    setInterval(drawShapes, 33);
  
  }
  </code></pre>