Export drawings and animations

[cdsmith]

Today, in many browsers, students can already right-click on a drawing in the CodeWorld canvas, and save it as an image. That's great, but it's not very discoverable, and the steps to do it depend on the browser. We would like to make export to images a built-in capability of CodeWorld.

It's not possible today to export an animation in a common format. Students should be able to easily save their animations as either animated gif files, or as videos. It should be easy to upload them to YouTube, Facebook, or Instagram.

It's possible to consider the same thing for simulations; though, because simulations get random number sources, it's not entirely semantically sound. That is, you'd be better off labeling this as "record" rather than "export". Similarly, you could offer to "record" an interaction, as well.

Related: #22

[cdsmith]

Some possibilities for animation:

1. Export to animated gif: https://github.com/yahoo/gifshot
2. Export to video: https://github.com/bgrins/videoconverter.js

Neither library looks terribly stable or maintained, though.

[venkat24]

This seems rather promising
https://github.com/spite/ccapture.js/

It supports exports to WebM and GIF. We could add start and stop recording buttons for stuff like simulations. WebM exporting is only on Chrome though. GIF support seems to be universal.

[cdsmith]

The animation case of this was fixed with video recording feature during summer of haskell a couple years ago. I'll open a different bug for images.