Canvas.js

Summary

Canvas.js
Canvas	A canvas widget used by all visualizations.
Functions
getCtx	Returns the main canvas context object
getConfig	Returns the current Configuration for this Canvas Widget.
getElement	Returns the main Canvas DOM wrapper
getSize	Returns canvas dimensions.
resize	Resizes the canvas.
translate	Applies a translation to the canvas.
scale	Scales the canvas.
getPos	Returns the canvas position as an x, y object.
clear	Clears the canvas.

Canvas

A canvas widget used by all visualizations. The canvas object can be accessed by doing viz.canvas. If you want to know more about Canvas options take a look at Options.Canvas.

A canvas widget is a set of DOM elements that wrap the native canvas DOM Element providing a consistent API and behavior across all browsers. It can also include Elements to add DOM (SVG or HTML) label support to all visualizations.

Example

Suppose we have this HTML

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

Now we create a new Visualization

var viz = new $jit.Viz({
    //Where to inject the canvas. Any div container will do.
    'injectInto':'infovis',
     //width and height for canvas.
     //Default's to the container offsetWidth and Height.
     'width': 900,
     'height':500
 });

The generated HTML will look like this

<div id="infovis">
   <div id="infovis-canvaswidget" style="position:relative;">
   <canvas id="infovis-canvas" width=900 height=500
   style="position:absolute; top:0; left:0; width:900px; height:500px;" />
   <div id="infovis-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 infovis-canvas and a div label container of id infovis-label, wrapped in a main div container of id infovis-canvaswidget.

Summary

Functions
getCtx	Returns the main canvas context object
getConfig	Returns the current Configuration for this Canvas Widget.
getElement	Returns the main Canvas DOM wrapper
getSize	Returns canvas dimensions.
resize	Resizes the canvas.
translate	Applies a translation to the canvas.
scale	Scales the canvas.
getPos	Returns the canvas position as an x, y object.
clear	Clears the canvas.

Functions

getCtx

getCtx: function( i )

Returns the main canvas context object

Example

var ctx = canvas.getCtx();
//Now I can use the native canvas context
//and for example change some canvas styles
ctx.globalAlpha = 1;

getConfig

getConfig: function()

Returns the current Configuration for this Canvas Widget.

Example

var config = canvas.getConfig();

getElement

getElement: function()

Returns the main Canvas DOM wrapper

Example

var wrapper = canvas.getElement();
//Returns <div id="infovis-canvaswidget" ... >...</div> as element

getSize

getSize: function( i )

Returns canvas dimensions.

Returns

An object with width and height properties.

Example

canvas.getSize(); //returns { width: 900, height: 500 }

resize

resize: function( width,
height )

Resizes the canvas.

Parameters

width	New canvas width.
height	New canvas height.

Example

canvas.resize(width, height);

translate

translate: function( x,
y,
disablePlot )

Applies a translation to the canvas.

Parameters

x	(number) x offset.
y	(number) y offset.
disablePlot	(boolean) Default’s false. Set this to true if you don’t want to refresh the visualization.

Example

canvas.translate(30, 30);

scale

scale: function( x,
y,
disablePlot )

Scales the canvas.

Parameters

x	(number) scale value.
y	(number) scale value.
disablePlot	(boolean) Default’s false. Set this to true if you don’t want to refresh the visualization.

Example

canvas.scale(0.5, 0.5);

getPos

getPos: function( force )

Returns the canvas position as an x, y object.

Parameters

force

(boolean) Default’s false. Set this to true if you want to recalculate the position without using any cache information.

Returns

An object with x and y properties.

Example

canvas.getPos(true); //returns { x: 900, y: 500 }

clear

clear: function( i )

Clears the canvas.