Better packing of animations

by Umar

HTML

<div><canvas id="anim_target" class="anim_target" width="1044" height="430">
<div id="anim_fallback" class="anim_target" style=""></div>
<p></canvas></div>

<script>

</script>

JavaScript

var testing_timeline = [{"delay": 102, "blit": [[0, 860, 1044, 430, 0, 0]]}, {"delay": 99, "blit": []}, {"delay": 101, "blit": []}, {"delay": 101, "blit": []}, {"delay": 101, "blit": []}, {"delay": 101, "blit": []}, {"delay": 100, "blit": []}, {"delay": 101, "blit": []}, {"delay": 101, "blit": []}, {"delay": 101, "blit": [[0, 430, 1044, 430, 0, 0]]}, {"delay": 101, "blit": []}, {"delay": 101, "blit": []}, {"delay": 101, "blit": []}, {"delay": 102, "blit": []}, {"delay": 101, "blit": []}, {"delay": 101, "blit": []}, {"delay": 101, "blit": []}, {"delay": 101, "blit": [[1012, 3640, 27, 22, 96, 406], [1042, 1290, 2, 22, 124, 406]]}, {"delay": 101, "blit": [[934, 3393, 30, 22, 96, 406]]}, {"delay": 101, "blit": []}, {"delay": 101, "blit": []}, {"delay": 100, "blit": []}, {"delay": 101, "blit": []}, {"delay": 100, "blit": [[322, 1724, 11, 24, 324, 83]]}, {"delay": 101, "blit": []}, {"delay": 101, "blit": []}, {"delay": 101, "blit": [[0, 3791, 712, 80, 332, 27], [0, 2424, 714, 288, 320, 117], [1037, 2504, 7, 224, 1037, 120], [0, 1777, 317, 18, 2, 136], [7, 1979, 77, 13, 9, 158], [0, 1813, 317, 18, 2, 172], [7, 1835, 115, 13, 9, 194], [0, 1849, 317, 18, 2, 208], [7, 1871, 86, 12, 9, 230], [712, 3791, 317, 18, 2, 244], [7, 1835, 115, 13, 9, 266], [0, 1921, 317, 18, 2, 280], [7, 1871, 86, 12, 9, 302], [712, 3791, 317, 18, 2, 316], [7, 1979, 77, 13, 9, 338], [0, 1993, 317, 18, 2, 352], [7, 1979, 77, 13, 9, 374], [0, 2029, 317, 17, 2, 388], [960, 406, 59, 22, 960, 406], [755, 3513, 35, 12, 621, 411], [728, 3530, 183, 14, 744, 411]]}, {"delay": 102, "blit": [[1003, 3066, 41, 80, 354, 27], [493, 3227, 11, 50, 339, 57]]}, {"delay": 101, "blit": []}, {"delay": 100, "blit": [[728, 3393, 78, 80, 332, 27], [1032, 3226, 12, 80, 458, 27], [967, 3588, 42, 40, 413, 67], [493, 3316, 12, 22, 473, 85]]}, {"delay": 101, "blit": [[318, 1758, 27, 288, 663, 117], [241, 2424, 16, 288, 701, 117], [821, 1758, 29, 288, 823, 117], [877, 1758, 19, 288, 879, 117], [774, 3666, 61, 11, 726, 122],...