How to use requestAnimationFrame to animate multiple squares in a loop

Question

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.

Now I want to animate these squares us

Answer 1

I provided a frame limiter and tween to show you different ways of animating. The frame limiter has the steps in your example and the tween has as many steps as it takes to complete in a given amount of time.

var canvas = document.getElementById('canvas'),
  ctx = canvas.getContext('2d');

//requestAnim shim layer by Paul Irish
//http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
window.requestAnimFrame = (function() {
  return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function( /* function */ callback, /* DOMElement */ element) {
      window.setTimeout(callback, 1000 / 60);
    };
})();

function rect(x, y, w, h, color) {
  ctx.beginPath();
  ctx.strokeStyle = color;
  ctx.rect(x, y, w, h);
  ctx.stroke();
}

function drawRect(i, size, color) {
  //for (var i = 0; i <= number; i++) {
  rect(i * size, i * size, (i * size) * 2, (i * size) * 2, color);
  //}
}

var i = 0;
var incr = 1;
var i_max = 10;
var size = 5;
var fps = 10;
var delay = 1000 / fps;
var lastFrame = 0;

var animationTime = 5000
var tweenStep = i_max / ((animationTime/1000) * 60);
var j = 0;

function animateRect() {

  // draw at 60fps
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  drawRect(i, size, "#0000FF");
  
  // This is a frame limiter.
  var currentFrame = Date.now();
  
  if ((currentFrame - lastFrame) >= delay) {
    i += incr;
    if (i >= i_max) i = i_max - 2, incr = -1;
    if (i < 0) i = 1, incr = 1;
    lastFrame = currentFrame;
  }
  
  // this is a tween. The step is calculated for the desired time.
  drawRect(j, size, "#FF0000");
  j += tweenStep;
  if (j >= i_max) tweenStep *= -1,j=i_max-1;
  if (j < 0) tweenStep *= -1, j=0;
  

  requestAnimFrame(animateRect);
  //draw rectangle one by one here...
}

animateRect();
//drawRect(10, 5);