Как правильно анимировать на fabric.js?

Question

[alkhadidzhaevich]

Всем привет, пытаюсь освоить canvas анимацию на fabricjs . Все работает, но никак не могу добиться хорошего fps. Подскажите, пожалуйста, что я делаю не так?

Для начала создают объект fabric.canvas, после чего создают массив 16x16, который заполяняю объектами fabric.rect:

var canvas = new fabric.Canvas('canvas', { selection: false });

var objects = new Array();
for (var x = 1; x <= 16; x++) {
	objects[x] = new Array();
	for (var y = 1; y <= 16; y++) {
		var rect = new fabric.Rect({
			left: (350/8)*(x-1)+40,
			top: (350/8)*(y-1-8),
			fill: 'red',
			width: 34,
			height: 34
		});
		
		objects[x][y] = {
			type: 'square',
			object: rect
		}
		canvas.add(rect);
	}
}

После чего пытаюсь их анимировать следующим образом:

var startTime = Date.now();
(function animate() {
	var current = Date.now() - startTime;
	for (var x = 1; x <= 16; x++) {
		for (var y = 1; y <= 16; y++) {
			objects[x][y].object.top = fabric.util.ease.easeOutBounce(current, (350/8/5)*(y-1-8), (350/8)*(y-1)+40+((350/8/5)*(y-1-8)*-1), 800);
		}
	}
	if (current > 800) {
		canvas.renderAll();
		return;
	}
    canvas.renderAll();
    fabric.util.requestAnimFrame(animate);
})();

Т.е. за 800мс квадратики должны упасть с ease функцией easeOutBounce
Все вроде-бы хорошо, но никак не могу добиться хорошей производительности, у меня на компьютере все равно подлагивает, а хочется что-бы эта анимация выполнялась всегда плавно, даже если квадратов будет, например, 32x32
Вот пример на JSFiddle
Подскажите, что делать?