title: Canvas animation synchronized with video time
body: <p>We have to develop an application that draws some tracking representation synchronized with a video. So, with an sports example, when the <em>Player A</em> hits the ball on the video, the canvas' <code>Ball</code> representation has to appear next to <em>Player A</em> representation as if it were really hitting it.</p>
  
  <p>The main problem here is we have all the tracking already done, and it comes with (tones of) position coordinates along time, for every element, like:
      
          
              70
              120
              00:00:23.335
          
          ...
      </p>
  
  <p>My need is to be able to draw that object on <em>canvas</em> at that position (70, 120) when the video hits 00:00:23.335.</p>
  
  <p>It's a lot of information, so I cannot run an <code>array.filter()</code> function on every <code>timeupdate</code>, because it would - for sure - play next frame before the filter is already done.</p>
  
  <h2>The question</h2>
  
  <p>How can I organize that data on Javascript in a manner that I can access the position of elements on the closest actual time? </p>
  
  <p>So if the video is at 00:00:23.500, I can quickly get position <code>x:70, y:120</code> because it's the closest to that moment.</p>
  
  <h2>My (wrong) pov</h2>
  
  <p>As I already said, my only approach among this is to use an array with all that data and doing a <code>filter</code> (or a loop) to search the closest point coordinates through all the array on every video <code>timeupdate</code> event:</p>
  
  <pre><code>var playerA_pts = [
      {time: 23.330, x: 70, y:120},
      {time: 23.790, x: 75, y: 121},
      {time: 23.800, x: 76, y: 123},
      ...
  ]
  </code></pre>
  
  <p>However, that approach would have awful performance when the video is on advanced times... </p>
  
  <h2>Additional information</h2>
  
  <p>The tracking data we are given (it's external to us) is not at constant framerate, so we can have recorded coordinates elements at different time rates between them.</p>
  
  <p>Thank you in advance!</p>