canvas-compositor/README.md

a light and performant canvas compositing engine

# 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](http://en.wikipedia.org/wiki/Composite_pattern) - thus, "canvas-compositor". 

[View the demo here](https://christophergorexyz.github.io/canvas-compositor/demo/) 

## Dependencies

- [vectorious](https://www.npmjs.com/package/vectorious) 
    - the `Vector` class exposed by vectorious is used heavily throughout canvas-compositor 
- [micro-mvc](https://www.npmjs.com/package/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](https://esdoc.org/) and can be found on github at [https://christophergorexyz.github.io/canvas-compositor/](https://christophergorexyz.github.io/canvas-compositor/)

## Tests

Mocha tests are in-development.