A light, performant compositing engine for the HTML5 canvas
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
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'));
_cc variable will expose a variety of classes for drawing primitives (e.g.:
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
_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.
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).
children - the order of the
children determines the order in which they are drawn.
scene can have children added to them through the
addChildren method. The children can be
Compositions or any other inheritor of the
PrimitiveComponents, in conjunction with
Text etc., comprise an implementation of the Composite Pattern - thus, "canvas-compositor".
Vectorclass exposed by vectorious is used heavily throughout canvas-compositor
EventEmitterclass exposed by micro-mvc is the basis of canvas-compositor's event system
Documentation has been generated by ESDoc and can be found on github at https://christophergorexyz.github.io/canvas-compositor/
Mocha tests are in-development.