Node Canvas Capture Server Demo

This (quick demo) animation is the first of it’s kind on my Tumblr - An animation I coded in JavaScript using the HTML5 Canvas tag. Then I visited the page I wrote in Chrome, it rendered the images, then sent them back to a Node server I wrote to listen for images - and it stored those images on the file system as a folder full of PNGs. YES!

Have you ever played with the HTML5 Canvas tag to create animations programmatically? If so, have you ever wanted to save those frames that you generated out to your file system? Have you been frustrated to realize that you’d have to do a bunch of XHR and then file creation and management just to get at those images? Yeah, me too. For like the past 4 years I while was playing with the HTML5 Canvas. Anyway, I finally got off my butt about this topic and made it happen. Here’s the link to the GitHub repo with all the instructions you need to start playing with exporting PNG sets from Canvas animations. That repo also has the code for this demo in the `public` folder.

Have you ever played with the magical thing known as Node.JS? It’s a super awesome thing, and without the Node community and the packages this tool relied on for convenience, creating this tool would have been a lot bigger pain in the butt than the 4 hours I spent putting it together. I’d like to give a big shout-out to all the Node teams out there who post useful public modules that we all get to rely on! Rock on, Node Community!

If you happen to be familiar with JavaScript, why don’t you try this toy out? I’d love to see what you can come up with for it! What will you make?