title: HTML5 Canvas drawImage from video not showing on first draw
body: <p>I have a video element with a canvas overlay.  Then I have a drawing tool setup to draw over the video and a save button that does a drawImage from both the video and then the canvas to save a comped frame.  However, the first time I press Save I only get the result from the canvas drawImage, the video does not show.  On subsequent Saves I receive both images properly layered.  I thought this might be an issue with loading of the video image, but the video is fully loaded before I hit save and can even advance frames and have it work properly on the 2nd Save.  </p>
  
  <p>Here is the code...</p>
  
  <pre><code>&lt;div style="width:960px; height:540px; display:inline-block;"&gt;
      &lt;video id="video" src="media/_tmp/AA_017_COMP_v37.mov" width="960" height="540" &gt;&lt;/video&gt;
  &lt;/div&gt;
  &lt;canvas id="canvas" width="960" height="540" style="position:absolute; top:40px; left:9px; z-index:100;"&gt;&lt;/canvas&gt;
  &lt;input type="button" value="save" id="btn" size="30" onclick="save()" style="float:left; padding:4px; margin-right:4px;" &gt;
  &lt;div id="saved" style="border:1px solid #000; position:absolute; top:626px; left:10px; bottom:40px; width:958px; overflow:auto;"&gt;SAVED:&lt;/div&gt;
  
  
  function save() {
  
      //COMP CANVAS OVER VIDEOFRAME
      var video = document.getElementById("video");
      var currentFrame = Math.floor((&lt;?php echo $mov_frames ?&gt; / video.duration) * video.currentTime);
  
      var compCanvas = document.createElement('canvas');
      compCanvas.width = video.width;
      compCanvas.height = video.height;
      compContext = compCanvas.getContext('2d');
      compContext.drawImage(video, 0, 0);
      compContext.drawImage(canvas, 0, 0);
      var dataURL = compCanvas.toDataURL();
  
      $("#saved").append('&lt;div style="width:954px; border-bottom:1px solid #000; padding:2px 2px 0 2px;"&gt;&lt;img id="compFrame_'+currentFrame+'" width="180" height="90" src="'+dataURL+'" /&gt;Frame: '+currentFrame+'&lt;/div&gt;');
  }
  </code></pre>