title: capturing html5 canvas output as video or swf or png sequence?
body: <p>I need to take HTML5 canvas output as video or swf png sequence. </p>
  
  <p>I found the following link on stackoverflow for capturing images.<br>
  <a href="https://stackoverflow.com/questions/923885/capture-html-canvas-as-gif-jpg-png-pdf">Capture HTML Canvas as gif/jpg/png/pdf?</a> </p>
  
  <p>But can anyone suggest if we want the output to be video or swf of png sequence?</p>
  
  <p>EDIT:</p>
  
  <p>Ok now I understood how to capture the canvas data to store on server, I tried it and it is working fine if I use only shapes, rectangle or some other graphic, but not if I draw external images on canvas element. 
  Can anyone tell me how to capture canvas data completely whether we use graphic or external images for drawing on canvas?</p>
  
  <p>I used the following code:</p>
  
  <pre><code>var cnv = document.getElementById("myCanvas");
  var ctx = cnv.getContext("2d");
  
  if(ctx)
  {
    var img = new Image();
  
    ctx.fillStyle = "rgba(255,0,0,0.5)";
    ctx.fillRect(0,0,300,300);
    ctx.fill();
  
    img.onload = function()
    {
       ctx.drawImage(img, 0,0);
    }
  
    img.src = "my external image path";
  
    var data = cnv.toDataURL("image/png");
  }
  </code></pre>
  
  <p>after taking the canvas data into my "data" variable I created a new canvas and draw the captured data on that, the red rectangle drawn on the second canvas but that external image doesn't.</p>
  
  <p>Thanks in advance.</p>