Canvas.js

Author: Nicolas Garcia Belmonte

License: BSD License

Version: 1.0.8a

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
Neither the name of the organization nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY Nicolas Garcia Belmonte ``AS IS’’ AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL Nicolas Garcia Belmonte BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

Summary

Canvas.js	Author: Nicolas Garcia Belmonte
Canvas	A multi-purpose Canvas object decorator.
Functions
Canvas	Canvas constructor.
getCtx	Main canvas context.
getElement	DOM canvas wrapper generated.
resize	Resizes the canvas.
getSize	Returns canvas dimensions.
path	Performs a beginPath executes action doing then a type (‘fill’ or ‘stroke’) and closing the path with closePath.
clear	Clears the canvas object.
clearReactangle	Same as clear but only clears a section of the canvas.
makeRect	Draws a rectangle in canvas.

Canvas

A multi-purpose Canvas object decorator.

Summary

Functions
Canvas	Canvas constructor.
getCtx	Main canvas context.
getElement	DOM canvas wrapper generated.
resize	Resizes the canvas.
getSize	Returns canvas dimensions.
path	Performs a beginPath executes action doing then a type (‘fill’ or ‘stroke’) and closing the path with closePath.
clear	Clears the canvas object.
clearReactangle	Same as clear but only clears a section of the canvas.
makeRect	Draws a rectangle in canvas.

Functions

Canvas

Canvas constructor.

Parameters

id	The canvas tag id.
opt	configuration object, possible parameters are:

injectInto id for the container of the canvas. Canvas object will be appended to the object specified by this id.
width canvas width, default’s 200
height canvas height, default’s 200
backgroundColor used for background color when clipping in IE
styles an object containing canvas style properties. See https://developer.mozilla.org/en/Canvas_tutorial/Applying_styles_and_colors
backgroundCanvas an object containing configuration properties for a background canvas.

A possible configuration object could be defined as

var config = {
    'injectInto': 'id',

    'width':200,
    'height':200,

    'backgroundColor':'#333333',

    'styles': {
        'fillStyle':'#000000',
        'strokeStyle':'#000000'
    },

    'backgroundCanvas': false
};

More information in http://blog.thejit.org.

Returns

A new Canvas instance.

getCtx

getCtx: function()

Returns

Main canvas context.

getElement

getElement: function()

Returns

DOM canvas wrapper generated. More information about this can be found in the post http://blog.thejit.org

resize

resize: function( width,
height )

Resizes the canvas.

Parameters

width	New canvas width.
height	New canvas height.

getSize

getSize: function()

Returns canvas dimensions.

Returns

An object with width and height properties.

path

path: function( type,
action )

Performs a beginPath executes action doing then a type (‘fill’ or ‘stroke’) and closing the path with closePath.

clear

clear: function ()

Clears the canvas object.

clearReactangle

Same as clear but only clears a section of the canvas.

Parameters

top	An integer specifying the top of the rectangle.
right	An integer specifying the right of the rectangle.
bottom	An integer specifying the bottom of the rectangle.
left	An integer specifying the left of the rectangle.

makeRect

makeRect: function( pos,
mode )

Draws a rectangle in canvas.

Parameters

mode	A String sepecifying if mode is “fill” or “stroke”.
pos	A set of two coordinates specifying top left and bottom right corners of the rectangle.