tutorial

The Files

You'll always need to link OCE.js and whatever drawable objects you wish to use.

<script type="text/javascript" src="OCE.js"></script>
<script type="text/javascript" src="drawables/Node.js"></script>

Initialization

There is none. You will need to draw to something, though, so let's get a canvas element.
Assuming in your HTML there is a canvas with id='frontbuffer'

<canvas id='frontbuffer'>canvas not supported, please update</canvas>

You can use this canvas to draw by associating a layer to it:

var frontbuffer = new OCE.Layer(document.getElementById("frontbuffer"));

Then create a text node (Node.js)

var mynode= new OCE.Node("Behold\nThe Textbox",0.3);

And add it to the frontbuffer's list of drawables

frontbuffer.addDrawable(mynode);

Now whenever you draw the frontbuffer, it's drawables will also be drawn. Usually, you'll want to clear the frontbuffer before drawing (unless you plan to cover it whole)

frontbuffer.clear();
frontbuffer.drawChildren();

And that's it!
I suggest you have a look at the nullDrawable properties that all drawables inherit:

• xPos, yPos, setPos(): Position relative to parent layer.
• xAnchor, yAnchor, setAnchor(): This allows you to pivot your objects and layers however you wish. Node is drawn from 0,0 to width,height, so an anchor of 0,0 means it will rotate on it's upper left corner. Objects may have their own origin, but you can change it with a proper anchor.
• xZoom, yZoom, setZoom(): This is zooming in percent.
• xSkew, ySkew, setSkew(): You can skew objects and layers too.

Drawables are in the drawable folder by convention. You'll find an example object there for the basics and you may study circle and node for a basic understanding of how to create drawables.