Cómo usar requestAnimationFrame para animar múltiples cuadrados en un bucle
Estoy usando el lienzo HTML para dibujar múltiples cuadrados. Tengo 2 funciones: 1) dibujar un cuadrado y 2) dibujar múltiples cuadrados dentro de un bucle.
Ahora quiero animar estos cuadrados usandorequestAnimationFrame para dibujar estos cuadrados uno a la vez. Cómo puedo conseguir esto. Aquí hay unjsFiddle
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);