README.md

#CanvasToVideo

An experiment in converting Canvas animations to video.

##Documentation

Read Online

##Setup

var ctv = new CanvasToVideo('capture.php', document.querySelector('canvas'));

ctv.setCacheEnabled(true); // Storing frames locally instead of sending every frame.
ctv.setImageQuality(60); // Changing the quality to 60%

function draw () {
    // draw objects to canvas
    ctv.capture();
    if (!animation.finished) {
        requestAnimationFrame(draw);
    } else {
        ctv.flush(); // Send all frames at once to the server.
    }
}
requestAnimationFrame(draw);

##Converting to Movie

$ ffmpeg -i captured/screenshot_%06d.png -c:v libx264 -vf "fps=30,format=yuv420p,setpts=(1/2.5)*PTS" output.mp4