canvas-compositor

A light, performant compositing engine for the HTML5 canvas

Getting started

You should be able to include the compiled files from the dist directory in any HTML page, which will add the CanvasCompositor namespace to your global scope. I like to assign it to a shorthand cc.

You can then start using the CanvasCompositor's scene and graphics APIs by instantiating it with a canvas:

let cc = CanvasCompositor;
let _cc = new cc.Compositor(document.getElementById('myCanvas'));

Our _cc variable will expose a variety of classes for drawing primitives (e.g.: Path, Rectangle, Ellipse, Text, etc.) which are used to build Compositions. Each of these types of objects extends the PrimitiveComponent class, which in turn extends the EventEmitter class from the micro-mvc dependency.

The _cc variable will have a scene property. If you are only drawing pixels to canvas, this property is unnecessary, but if you intend to have any kind of animated or layered interactions, this object will be incredibly important.

The scene property is the entry point to your scene graph. It is an instance of Composition (which is also exposed, and can be extended freely). Compositions have children - the order of the scene's children determines the order in which they are drawn.

Compositions like scene can have children added to them through the addChild or addChildren method. The children can be Compositions or any other inheritor of the PrimitiveComponent class.

Compositions and PrimitiveComponents, in conjunction with Rectangles, Ellipses, Text etc., comprise an implementation of the Composite Pattern - thus, "canvas-compositor".

View the demo here

Dependencies

• vectorious
  • the Vector class exposed by vectorious is used heavily throughout canvas-compositor
• micro-mvc
  • the EventEmitter class exposed by micro-mvc is the basis of canvas-compositor's event system

Documentation

Documentation has been generated by ESDoc and can be found on github at https://christophergorexyz.github.io/canvas-compositor/

Tests

Mocha tests are in-development.