The HTML5 <canvas> element is powerful and low-level. CreateJS wraps it in a set of four focused libraries — EaselJS, TweenJS, SoundJS, and PreloadJS — that can work together or stand alone depending on what you need.
EaselJS is the core. It puts a display-list model on top of the raw Canvas API, giving you a stage, a scene graph, and objects you can compose and manipulate without wrestling with the 2D context directly. Drop a Stage around your <canvas> element, add DisplayObject instances — bitmaps, vector shapes, sprites, or text — and EaselJS handles render ordering and hit-testing. For anything interactive on canvas, this is where you start.
TweenJS animates properties over time. It integrates cleanly with EaselJS display objects and supports chained tweens, callbacks via .call(), relative values, and motion paths. Tweens can be synced to a shared ticker so your animations stay frame-accurate without you managing requestAnimationFrame loops manually.
SoundJS abstracts audio playback across browser environments through a plugin architecture. You register sounds through the Sound class API, which handles loading, instancing, and playback. One practical note: install any plugins before adding items to the load queue, or those items will stall and the queue will pause waiting for a handler that never arrived.
PreloadJS manages asset loading — images, audio, JSON, JavaScript — via XHR or HTML tags depending on the asset type and browser context. It fires progress and completion events that slot naturally into a loading-screen pattern, and it pairs with SoundJS so audio files get handed off correctly once they land.
Used together, the four libraries cover most of what a browser game or rich interactive microsite needs: a rendered scene, animation, audio, and reliable asset loading. Used separately, each is narrow enough to drop into an existing project without friction.
