title: How to use requestAnimationFrame to animate multiple squares in a loop
body: <p>I am using HTML canvas to draw multiple squares. I have 2 functions: 1) draw a square and 2) draw multiple squares inside a loop. </p>
  
  <p>Now I want to animate these squares using <em>requestAnimationFrame</em> to draw these square one at a time. How can I achieve this. Here is a <a href="https://jsfiddle.net/L9c6wt9q/" rel="nofollow">jsFiddle</a></p>
  
  <pre><code>var canvas = document.getElementById('canvas'),
         ctx = canvas.getContext('2d');
  
      function rect(x, y, w, h) {
        ctx.beginPath();
        ctx.rect(x, y, w, h);
        ctx.stroke();
      }
  
      function drawRect(number, size) {
        for (var i = 0; i &lt;= number; i++) {
          rect(i * size, i * size, (i * size) * 2, (i * size) * 2);
        }
      }
  
      drawRect(10, 5);
  </code></pre>