JArt

DreamCanvas is a JQuery plugin for handling canvas and other effects and events.

by shivkumarganesh

HTML

<div id="ss"></div>

JavaScript

(function($) {

    $.dc = {};

/*This method is used to generate the Canvas element on the page. 
 *If the parameters are null then the canvas takes the default values 
 *where the width is equal to 300px and height is equal to 
 *200px and no ID is associated with it and by default appended 
 *to body*/
    $.dc.createCanvas = function(canvasOptions) {
        var canvasSettings = $.extend({
            'height': '200px',
            'width': '300px',
            'id': 'canvas',
            'appendTo': 'body'
        }, canvasOptions); /*Create a new Canvas with the above values*/
        $(canvasSettings.appendTo).html('<canvas height=' + canvasSettings.height + '      width=' + canvasSettings.width + ' id=' + canvasSettings.id + ' ></canvas>');

        /*To get and return the context*/
        var $canvas = $('#' + canvasSettings.id);
        var canvas = $canvas[0];
        var ctx = canvas.getContext('2d'); //2D context of the Canvas
        return ctx;
    };

/*This module is for defining shapes and instanciating objects of the shape*/
    function Shape(x,y)
    {
        var obj={};
        obj.x=x;
        obj.y=y;
        return obj;
    }
    
    function Rectangle(options)
    {
        var settings=$.extend({
            'x':'0px',
            'y':'0px',
            'width':'100px',
            'height':'100px'
        });
        var obj=new Shape(settings.x,settings.y);
        obj.height=settings.height;
        obj.width=settings.width;
        
    }

})(jQuery);