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 Composition
s. 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). Composition
s have children
- the order of the scene
's children
determines the order in which they are drawn.
Composition
s like scene
can have children added to them through the addChild
or addChildren
method. The children can be Composition
s or any other inheritor of the PrimitiveComponent
class.
Composition
s and PrimitiveComponent
s, in conjunction with Rectangle
s, Ellipse
s, Text
etc., comprise an implementation of the Composite Pattern - thus, "canvas-compositor".
Dependencies
- vectorious
- the
Vector
class exposed by vectorious is used heavily throughout canvas-compositor
- the
- micro-mvc
- the
EventEmitter
class exposed by micro-mvc is the basis of canvas-compositor's event system
- the
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.