Exporting canvas to video [closed]

Question

Is it possible to export a canvas animation to video? I would like to build a tool that would allow creating simple animations but then i would like to export them to .avi .mp4 or whatever video format.

Is this possible? If so, how can i do it?

Answer 1

You could try to use a callback function to register a listener to the requestAnimationFrame and after each loop try to capture the canvas png file save it somewhere either server side or client side using some persistent method of html5 and use another software like ffmpeg later on to put them together to form a video file.

  window.requestAnimFrame = (function(callback) {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
    function(callback) {
      window.setTimeout(callback, 1000 / 60);
    };
  })();

Code to get the canvas image/png info

var canvas = document.getElementById("mycanvas");
var img    = canvas.toDataURL("image/png");