HTML5 Canvas + EaselJs = A match made in heaven

A client came to us recently with the challenge of creating them an interactive, touch-based presentation tool that would allow them to demo their products in an engaging way. It was left up to us to determine what technologies were appropriate in order to achieve the end goals the client was expecting.

One of the initial goals for this project was to be able to display this on a 40” touchscreen on the showroom floor of a tech show. However, the idea was that this also be usable on tablets and web browsers at a later time. Considering this, we decided that a web based solution would lend itself the best to the requirement of having the tool run on a variety of platforms.

Right away, we realized that the HTML5 canvas element made the most sense considering the criteria given to us and the decision that the tool be web based. However, canvas elements alone weren’t enough to build a tool. We would require some sort of Javascript framework to handle drawing our 2d elements, animating between them, and handle the interactions with the canvas element.

In comes CreateJS (http://www.createjs.com/#!/CreateJS), a suite of libraries intended to, in part, draw 2d elements and handle 2d animations in conjunction with HTML5. The two components we ultimately used were EaselJS (http://www.createjs.com/#!/EaselJS) for 2d drawing and object manipulation, and TweenJS (http://www.createjs.com/#!/TweenJS) for object animation.

As one last piece to the puzzle, we incorporated Backbone.JS (http://backbonejs.org/), or more specifically, Backbone Marionette (https://github.com/marionettejs/backbone.marionette), to add structure to our application and pull everything together. We’ve used Backbone Marionette on a couple different web applications and have found that not only does it add structure, but it provides a better object oriented environment to work in, which lends itself well to a project like this.

All of these pieces provided us with a perfect framework to work from. It gave us the components to draw separate layers and transition between those layers using animation. It gave us the components to draw separate objects within layers, handle the interactions with these objects, and any events that came along with those actions. Finally, it gave us the components that would eventually allow us to tie everything together. In the end, we were left with an interactive presentation tool that met all the client requirements and exceeded their expectations.

Worked on a similar application? What methods and frameworks did you use? Give us some feedback and share with us your experience.