JavaScript Rotoscoping Tool

I had some free time on the train back up from Buttercamp this weekend, and got to work on a demo for a HTML5 rotoscoping tool that I’ve been kicking around in my head:

View Live Demo (in Chrome) →

The tool is very basic; it lets the user draw over each frame of the video, stores each frame in localStorage, and uses Popcorn.js to play back the frames over the video on the canvas. I used Mike Taylor‘s homepage as a starting point for the drawing.

Animators frequently use rotoscoping workflows provided by Flash, After Effects, or another production tools. There is not currently a good workflow for artists to ship HTML5 animations. The move to HTML5 animation for playback will require a new set of authoring tools for artists. I had a chance to test this prototype out with Mak‘s (one of the Bocoup Coworkers from Gradient Games) graphics tablet, and it worked great!

What’s Next?

The video timeupdate event is very low resolution (roughly (unreliably) 10 FPS ). I am evaluating writing an independent timer, and using the new Frame Rate API which you can turn on in chrome’s about:flags.

This tool should also be implemented with vector based storage (as opposed to the current raster based storage), a timeline/keyframe UI, layers, and a better drawing tool. I am going to try to continue working on this tool over the next couple of weeks, and begin implementing these features.

If you are a developer, entrepreneur, or are generally interested in working on tools like this, get in touch with Bocoup to talk about working together. We would love to have an opportunity to pursue this tool as a product.

Get the source on Github.


We moved off of Disqus for data privacy and consent concerns, and are currently searching for a new commenting tool.

  1. Police Camera Footage needs this- but to only draw over faces. I used a facial-recognition tool that turned all pixel data found to be part of a face and turned the pixels to black. With this though you could have the police draw black over the faces in real-time and then save out the video based on where they drew while it was playing. I like this because it’s separating every frame out for you draw on separately.

Contact Us

We'd love to hear from you. Get in touch!


P.O. Box 961436
Boston, MA 02196