Grabbing each frame of an HTML5 canvas

Question

These palette cycle images are breathtaking: http://www.effectgames.com/demos/canvascycle/?sound=0

I\'d like to make some (or all) of these into desktop backgrounds.

Answer 1

Try PhantomJS

This script saves 100 frames.

var webPage = require('webpage');
var fs = require('fs');
var page = webPage.create();

var NB_FRAME = 100;
var current = 0;

page.open('http://www.effectgames.com/demos/canvascycle/?sound=0',
function(status) {
  if (status === "success") {
     var current = 0;
     var grabber = setInterval(function () {
      var frame = page.evaluate(function() {
       return document.getElementById('mycanvas').toDataURL("image/png").split(",")[1];
      });
      fs.write("./frame-" + current + ".png",atob(frame), 'wb');
  if (++current === NB_FRAME) {
     window.clearInterval(grabber);
     phantom.exit(0);
  }
   }, 1000);
}
});

Run it:

 phantomjs SaveCanvasFrame.js

Then use ImageMagick

convert *.png animated.gif

Here we go :