Setting up your workspace

Setting up the NylCanvasLib is very easy. Let have a look to the way to proceed it.

Create your plugin animation file.

The first step to begin is create a new javascript source file for your code.
Here is the code to insert.

function MyPlugin() {

   this.setup = function()

   {

        //initialize your variables or objects here.

   };

    this.draw = function(scene)

    {

        //this is the render loop. Draw here.

    };

    this.yourfunction = function()

    {

         //an exemple of custom function. 

    };

}

Of course, you should change "MyPlugin" by the name of your plugin. 

Import NylCanvasLib and your plugin in your html document.

Just add theses lines:

<script type="text/javascript" src="NylCanvasLibrary.js"></script>

<script type="text/javascript" src="MyCanvasPlugin.js"></script>

(Don't forget to change the path by your files locations).

Initialize and hook your plugin to NylCanvasLib

The final step is initialize the lib and hook your plugin. Look at theses lines:

<script language="javascript"">

NCL = new NylCanvasLibrary("canvas_div", 100 ,200 ,"canvas");

//load the pluginlist

NCL.loadPlugin(new MyPlugin);

NCL.init();

</script>

Let's have a look at the NylCanvasLibrary constructors :

• "canvas_div" is the parent element id of your canvas. 
• 100, 200 are the canvas width and height.
• "canvas" is the id of the canvas.

And ?

That's all ! You can start drawing your animation by editing the draw function of your plugin. Simple, right?