Introduction

LibDraw is a JavaScript library that allows you to easily utilize HTML 5 Canvas element.

How to use it

• Clone this repository. The stable branch is v02stable, but v03devel should be in pretty good shape too.

• You can either use the example that comes with the distribution as a template, or set it up in your page step by step

LibDraw setup

First you'll need to include the dependencies for LibDraw. These are:

• jQuery
• Template.js (this comes with the distribution of LibDraw)

To include these libraries just copy and paste the following lines in the head section of your HTML page:

 <!-- Dependencies -->
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 <script type="text/javascript" src="lib/template.js"></script>

After you've done that, you can include the LibDraw files:

<!-- libDraw includes -->
<link type="text/css" rel="stylesheet" href="libdraw.css"/>
<script type="text/javascript" src="libdraw.js"></script>

Here is a simple example using LibDraw:

<script type="text/javascript">
  $(document).ready(function(){
     // get the CANVAS element
     var canvasEl = $('#content-canvas-1')[0];
     
     // create libdraw Runtme
     var ldrt = new libdraw.Runtime({
        canvas: canvasEl,
        fps: 24,
        width: 300,
        height: 300
     });
     
     // setup the runtime
     ldrt.setup(function(){
        with(this){
           background(120,120,120);
           
           this.x = 150;
           this.y = 150;
           this.nx = 150;
           this.ny = 150;
           this.accf = 8;
           this.radius = 40;
           
           this.r1 = 70;
           this.r2 = 80;
           this.r3 = 85;
           this.r4 = 75;
           
           this.clr = [0,255,0];
           this.ec = 0;
        }
     });
     
     // draw during 1 frame
     // this callback get executed to draw each frame
     ldrt.exec(function(){
        with(this){
           strokeSize(7);
           stroke(255,255,255);
           fill(clr[0],clr[1],clr[2]);
           x -= (x-nx)/accf;
           y -= (y-ny)/accf;
           
           radius+=Math.sin(frame/4);
           circle(x,y,radius);
           
           strokeSize(0);
           
           
           
           fill(0,0,255);
           circle(x + (r1*Math.cos(millis()/300)), y + (r1*Math.sin(millis()/300)), 5);
           fill(255,255,0);
           circle(x - (r2*Math.cos(millis()/250)), y - (r2*Math.sin(millis()/250)), 5);
           
           fill(255,0,0);
           circle(x + (r3*Math.sin(millis()/200)), y + (r3*Math.cos(millis()/200)), 5);
           fill(0,255,0);
           circle(x - (r4*Math.sin(millis()/300)), y - (r4*Math.cos(millis()/300)), 5);
           
           
           r1+=Math.sin(frame/16);
           r2+=Math.cos(frame/20);
           r3+=Math.sin(millis()/600);
           r4+=Math.cos(millis()/400);
           
           for(var i = 0; i < 3; i++){
              if(clr[i] == 255){
                 ec = i;
                 break;
              }
           }
           
           clr[ec] = clr[ec]-1;
           clr[(ec+1)%3] = clr[(ec+1)%3]+1;
           
        }
     });
     
     
     // let's bind the mouseMove event over the Canvas
     ldrt.mouseMove = function(){
        with(this){
           nx = mouseX;
           ny = mouseY;
        }
     };
     
     // initialize the runtime
     ldrt.init();
     
     // start the rendering
     ldrt.start();
     
     // let's show the frame rate :)
     ldrt.showFps(true);
     
  });

</script>

This example is also included in the distribution as well as in the source code.