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);
<canvas id="canvas" width="600" height="600"></canvas>