Я использую холст HTML, чтобы нарисовать несколько квадратов. У меня есть 2 функции: 1) нарисовать квадрат и 2) нарисовать несколько квадратов внутри цикла.

Теперь я хочу оживить эти квадраты, используяrequestAnimationFrame рисовать эти квадраты по одному. Как я могу этого добиться. ВотjsFiddle

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 <= number; i++) {
        rect(i * size, i * size, (i * size) * 2, (i * size) * 2);
      }
    }

    drawRect(10, 5);