Canvas.js

A multi-purpose Canvas Class.  This Class can be used with the ExCanvas library to provide cross browser Canvas based visualizations.

Parameters

• injectInto This property is required and it specifies the id of the DOM element to which the Canvas widget will be appended
• width The width of the Canvas widget.  Default’s to 200px
• height The height of the Canvas widget.  Default’s to 200px
• backgroundColor Used for compatibility with IE.  The canvas’ background color.  Default’s to ‘#333’
• styles A hash containing canvas specific style properties such as fillStyle and strokeStyle among others.

Example

Suppose we have this HTML

<div id="infovis"></div>

Now we create a new Canvas instance

//Create a new canvas instance
var canvas = new Canvas('mycanvas', {
    //Where to inject the canvas. Any div container will do.
    'injectInto':'infovis',
     //width and height for canvas. Default's to 200.
     'width': 900,
     'height':500,
     //Canvas styles
     'styles': {
     'fillStyle': '#ccddee',
     'strokeStyle': '#772277'
     }
 });

The generated HTML will look like this

<div id="infovis">
   <div id="mycanvas" style="position:relative;">
   <canvas id="mycanvas-canvas" width=900 height=500
   style="position:absolute; top:0; left:0; width:900px; height:500px;" />
   <div id="mycanvas-label"
   style="overflow:visible; position:absolute; top:0; left:0; width:900px; height:0px">
   </div>
   </div>
</div>

As you can see, the generated HTML consists of a canvas DOM element of id mycanvas-canvas and a div label container of id mycanvas-label, wrapped in a main div container of id mycanvas.  You can also add a background canvas, for making background drawings.  This is how the RGraph background concentric circles are drawn

Example

//Create a new canvas instance.
var canvas = new Canvas('mycanvas', {
    //Where to inject the canvas. Any div container will do.
    'injectInto':'infovis',
    //width and height for canvas. Default's to 200.
    'width': 900,
    'height':500,
    //Canvas styles
    'styles': {
        'fillStyle': '#ccddee',
        'strokeStyle': '#772277'
    },
    //Add a background canvas for plotting
    //concentric circles.
    'backgroundCanvas': {
        //Add Canvas styles for the bck canvas.
        'styles': {
            'fillStyle': '#444',
            'strokeStyle': '#444'
        },
        //Add the initialization and plotting functions.
        'impl': {
            'init': function() {},
            'plot': function(canvas, ctx) {
                var times = 6, d = 100;
                var pi2 = Math.PI*2;
                for(var i=1; i<=times; i++) {
                    ctx.beginPath();
                    ctx.arc(0, 0, i * d, 0, pi2, true);
                    ctx.stroke();
                    ctx.closePath();
                }
            }
        }
    }
});

The backgroundCanvas object contains a canvas styles property and an impl key to be used for implementing background canvas specific code.

The init method is only called once, at the instanciation of the background canvas.  The plot method is called for plotting a Canvas image.