/*!
 * Used to create an object of Canvas. The created object automaticly
 * attaches its init function to the windows load event.
 *
 * version 1/6-2010 10.18
 */
function DomNodeInterface(obj){
	obj.children=[];
	obj.parentNode=null;
	obj.firstChild=null;
	obj.lastChild=null;
	obj.prevSibling=null;	
	obj.nextSibling=null;
  	obj.x=0;
  	obj.y=0;	
	obj.widthMeasure="px";
	obj.heightMeasure="px";
	obj.width=800;
	obj.height=800;
	obj.removeFirstChild=function(i){
		var n=obj.children.shift();
		n.canvas=null;
		n.parentNode=null;
		obj.firstChild=n.nextSibling;		
		n.nextSibling=null;
		if(obj.children.length>1){			                  
			obj.firstChild.prevSibling=null;
		}
		if(obj.children.length==0){
			obj.lastChild=null;
		}
		return n;
	};
	obj.appendChild=function(child){
		if(child.hasOwnProperty('setCanvas')){
			child.setCanvas(obj.canvas);
		}else{
			child.canvas=obj.canvas;			
		}
		child.parentNode=obj;		
		obj.children.push(child);
		if(obj.children.length==1){
			obj.firstChild=child;		
		}else{
			child.prevSibling=obj.lastChild;
			obj.lastChild.nextSibling=child;
		}
		obj.lastChild=child;	
		if(child.appendedToParent){
			child.appendedToParent();
		}		
		
	};
	obj.getElementById=function(id){
		for(var i=0;i<obj.children.length;i++){
			if(obj.children[i].id==id){
				return obj.children[i];
			}else{
				var o=obj.children[i].getElementById(id);
				if(o){
					return o;
				}
			}
		}	
	};	
	obj.drawChildren=function(){
		for(var index in this.children){
			this.children[index].draw();
		}
	};
	
	obj.offsetTop = function(){
		return this.y;
	};
	obj.offsetLeft = function(){
		return this.x;
	};
	obj.offsetParent = function(){
		if ('parentNode' in this) {
			return this.parentNode;
		}else{
			return null;
		}
	};
	
	obj.offsetAbsoluteLeft=function(){
		var p=this.offsetParent();
		var x=this.offsetLeft();
		while(p){
			x+=p.offsetLeft();
			p=p.offsetParent();
		}
		return x;
	};		
	obj.offsetAbsoluteTop=function(){
		var p=this.offsetParent();
		var y=this.offsetTop();
		while(p){
			y+=p.offsetTop();
			p=p.offsetParent();
		}
		return y;
	};
	obj.getAvailbleWidth=function(){
        if(this.widthMeasure=="px"){
          return this.width;
        }
        if(this.widthMeasure=="%"){
          return this.parentNode.getAvailbleWidth()*this.width/100;

        }
	};

	obj.setWidthByString = function(value){;
		if(e=/(\d*)%/.exec(value)){
			this.width=e[1];
			this.widthMeasure="%";
		}else{
			this.width=parseInt(value);
		}
		return this.width;
	};

	
	obj.getWidth=function(){
            if(this.widthMeasure=="px"){
              return this.width;
            }
            if(this.widthMeasure=="%"){
              return this.parentNode.getAvailbleWidth()*this.width/100;

            }
	};
	
	obj.setHeightByString = function(value){
		if(e=/(\d*)%/.exec(value)){
			this.height=e[1];
			this.heightMeasure="%";
		}else{
			this.height=parseInt(value);
		}
		return this.height;
	};	

	obj.getAvailbleHeight=function(){
        if(this.heightMeasure=="px"){
          return this.height;
        }
        if(this.heightMeasure=="%"){
          return this.parentNode.getAvailbleHeight()*this.height/100;
        }
    };

	obj.getHeight=function(){
            if(this.heightMeasure=="px"){
              return this.height;
            }
            if(this.heightMeasure=="%"){
				
              return this.parentNode.getAvailbleHeight()*this.height/100;
            }
	};
	
	obj.getAABB=function(){
		var x=this.offsetAbsoluteLeft();
		var y=this.offsetAbsoluteTop();			
		return {
			left:x
			,right:x+this.getWidth()
			,top:y
			,bottom:y+this.getHeight()
		};
	};
	
	obj.getRect=function(){
		var x=this.offsetAbsoluteLeft();
		var y=this.offsetAbsoluteTop();	
		
		return {
			x:x
			,w:this.getWidth()
			,y:y
			,h:this.getHeight()
		};
	};

	
	obj.getStyle=function(className) {
		for(var y=0;y<document.styleSheets.length;y++){
			var classes = document.styleSheets[y].rules || document.styleSheets[y].cssRules;
			for(var x=0;x<classes.length;x++) {
				if(classes[x].selectorText==className) {
					return classes[x];
				}
			}
		}
	};
}

function Canvas(){
	return new CanvasClass();
}

function CanvasClass(){	
	DomNodeInterface(this);
	this.canvas=this;/*
	this.appendChild=function(child){
		child.canvas=this;
		child.parentNode=this;		
		this.children.push(child);
		if(this.children.length==1){
			this.firstChild=child;		
		}else{
			child.prevSibling=this.lastChild;
			this.lastChild.nextSibling=child;
		}
		this.lastChild=child;		
	};*/
	this.id="";
	this.element=null;
	this.contextType="2d";
	this.context=null;
	var me=this;
	this.addListener(
		window,
		"load",
		function(){me.init();},
		false
	);

	this._rgb="rgba(0,0,0,0)";	

	//Events
	this.onReady=null;//Called after the canvases initialise function
  
	this.wheelListeners=new Array();
	this.clickListeners=new Array();  
	this.mouseupListeners=new Array();
	this.mousedownListeners=new Array();   
	this.mousemoveListeners=new Array();  
}

CanvasClass.prototype.offsetTop = function(){
	return 0;
};

CanvasClass.prototype.offsetLeft = function(){
	return 0;
};

CanvasClass.prototype.dispatcher=function(e,container){
	var pointer_div = this.element;
	
	if (window.ActiveXObject) {
		x = window.event.offsetX;
		y = window.event.offsetY;
	}
	//for Firefox
	else {
		var top = 0, left = 0;
		var elm = pointer_div;
		while (elm) {
			left += elm.offsetLeft;
			top += elm.offsetTop;
			elm = elm.offsetParent;
		}
	
		x = e.pageX - left;
		y = e.pageY - top;
	} 

	for(var p in container){
		var i=container[p];
		if(i.sx<x  &&  i.ex>x  &&  i.sy<y  &&  i.ey>y){
			i.f({x:x,y:y});
		}
	}	
};

CanvasClass.prototype.createPattern = function(img, style){
    return  this.context.createPattern(img,style);
};

CanvasClass.prototype.createPatternFromPath = function(imgPath, style,call){
  	var img = new Image();
  	img.src =imgPath;
	var me=this;
  	img.onload = function(){
		call(me.createPattern(img,style));
	};
};



CanvasClass.prototype.listen_mousewheel=function(x,y,w,h,f){	
	if(this.wheelListeners.length==0){
		var me=this;
		this.addListener(this.element,'DOMMouseScroll',function(e){me.dispatcher(e,me.wheelListeners);});
	}
	this.wheelListeners.push({sx:x,ex:w+x,sy:y,ey:y+h,f:f});
};

CanvasClass.prototype.listen_click=function(x,y,w,h,f){	
	if(this.clickListeners.length==0){
		var me=this;
		this.addListener(this.element,'click',function(e){me.dispatcher(e,me.clickListeners);});
	}
	this.clickListeners.push({sx:x,ex:w+x,sy:y,ey:y+h,f:f});
};

CanvasClass.prototype.listen_mousemove=function(x,y,w,h,f){	
	if(this.mousemoveListeners.length==0){
		var me=this;
		this.addListener(this.element,'mousemove',function(e){me.dispatcher(e,me.mousemoveListeners);});
	}
	this.mousemoveListeners.push({sx:x,ex:w+x,sy:y,ey:y+h,f:f});
};

CanvasClass.prototype.listen_mousedown=function(x,y,w,h,f){	
	if(this.mousedownListeners.length==0){
		var me=this;
		this.addListener(this.element,'mousedown',function(e){me.dispatcher(e,me.mousedownListeners);});
	}
	this.mousedownListeners.push({sx:x,ex:w+x,sy:y,ey:y+h,f:f});
};

CanvasClass.prototype.listen_mouseup=function(x,y,w,h,f){	
	if(this.mouseupListeners.length==0){
		var me=this;
		this.addListener(this.element,'mouseup',function(e){me.dispatcher(e,me.mouseupListeners);});
	}
	this.mouseupListeners.push({sx:x,ex:w+x,sy:y,ey:y+h,f:f});
};

/*!
 * Adds en event listener (function), to an elements event (click,...).
 */
CanvasClass.prototype.addListener=function(element, event, listener, bubble) {
  if(element.addEventListener) {
    if(typeof(bubble) == "undefined") bubble = false;
    element.addEventListener(event, listener, bubble);
  } else if(element.attachEvent) {  	
    element.attachEvent("on" + event, listener);
  }
};

/*!
 * Sets the canvas background color given an rgb css string: #ffffff or rga(0,0,0)
 */
CanvasClass.prototype.rgb=function(rgb){
    this._rgb=rgb;
	if(this.element){
	  this.element.style.backgroundColor =rgb;
	}
};



CanvasClass.prototype.init=function(){  
	if(this.id!=""){
		this.element=document.getElementById(this.id);	
	}

	if(this.element.getContext){		
		this.context=this.element.getContext(this.contextType);
		this.width=this.element.width;
		this.height=this.element.height;

		if(this.onReady){
			this.onReady();
		}
    }
};

CanvasClass.prototype.autoSizeToParent = function(){
	this.element.style.height = this.element.parentNode.scrollHeight + "px";
	this.element.style.width = this.element.parentNode.scrollWidth + "px";
	this.width =this.element.width = this.element.parentNode.scrollWidth;
	this.height =this.element.height = this.element.parentNode.scrollHeight;
 	this.context=this.element.getContext(this.contextType);	
};

CanvasClass.prototype.getImageData=function(x,y,w,h){
	try {
		return this.context.getImageData(x, y, w, h);
	}catch(e){
		return false;
	}
};

CanvasClass.prototype.createImageData=function(w,h){
	try {
		return this.context.createImageData(w, h);
	}catch(e){
		return false;
	}
};

CanvasClass.prototype.putImageData=function(data,dx,dy){
	try {
		this.context.putImageData(data,dx,dy);
	}catch(e){
		return false;
	}	
};


CanvasClass.prototype.createLinearGradient=function(x1,y1,x2,y2){
	return this.context.createLinearGradient(x1,y1,x2,y2);
};

/*!
 * Returns a RadialGradient object.
*
 */
CanvasClass.prototype.createRadialGradient=function(x1,y1,r1,x2,y2,r2){
	return this.context.createRadialGradient(x1,y1,r1,x2,y2,r2);
};


/*!
 * Creates a style object.
 */
CanvasClass.prototype.createStyle=function(){
	return {
		r:0,
		g:0,
		b:0,
		a:1,
		lineWidth:0,
		rgba:function(o){
			this.r=o.r;
			this.g=o.g;
			this.b=o.b;
			this.a=o.a;
		},
		rgba4i:function(r,g,b,a){
			this.r=r;
			this.g=g;
			this.b=b;
			this.a=a;
		},		
		_realStyle:function(){
			if(this.a==1){
				return 'rgb('+this.r+','+this.g+','+this.b+')';
			}else{
				return 'rgba('+this.r+','+this.g+','+this.b+','+this.a+')';
			}
		}
	};
};

CanvasClass.prototype.fillStyle=function(style){
	this.context.fillStyle=style;
};

CanvasClass.prototype.oFillStyle=function(oStyle){
	this.context.fillStyle=oStyle._realStyle();
};

/*!
 * Sets the strokeStyle of the canvas context.
 */
CanvasClass.prototype.strokeStyle=function(style){
	this.context.strokeStyle=style;
};

CanvasClass.prototype.oStrokeStyle=function(oStyle){
	this.context.strokeStyle=oStyle._realStyle();	
	this.context.lineWidth=oStyle.lineWidth;
};


/*!
 * Draws a fillRect on the canvas.
 * Takes the arguments x, y, width and height
 */
CanvasClass.prototype.fillRect = function(x,y,w,h){	
	this.context.fillRect(x,y,w,h);
};

/*!
 * The object oriented call to fillRect.
 * Takes an object with the fields x,y,width and height
 */
CanvasClass.prototype.oFillRect=function(rect){
	if(rect.hasOwnProperty('rgb')){
		this.context.fillStyle=rect.rgb;
	}
  	this.fillRect(rect.x,rect.y,rect.width,rect.height);
};



/*!
 * Draws a strokeRect on the canvas.
 * Takes the arguments x, y, width and height
 */
CanvasClass.prototype.strokeRect = function(x,y,w,h){
  	if(this.context==null){
    	return;
  	}	
	this.context.strokeRect(x,y,w,h);
};

/*!
 * The object oriented call to strokeRect.
 * Takes an object with the fields x,y,width and height
 */
CanvasClass.prototype.oStrokeRect=function(rect){
  	this.strokeRect(rect.x,rect.y,rect.width,rect.height);
};




/*!
 * Clear a rect on the canvas.
 * Takes the arguments x, y, width and height
 */
CanvasClass.prototype.clearRect = function(x,y,w,h){	
  	if(this.context==null){
    	return;
  	}	

	if(this.context.clearRect(x,y,w,h)===false){
		var c=this.firstChild;
		while(c){
			c.draw();
			c=c.nextSibling;
		}
	}
};

/*!
 * The object oriented call to clearRect.
 * Takes an object with the fields x,y,width and height
 */
CanvasClass.prototype.oClearRect=function(rect){
  	this.clearRect(rect.x,rect.y,rect.width,rect.height);
};


/*!
 * Clear a rect on the canvas.
 * Takes the arguments x, y, width and height
 */
CanvasClass.prototype.clipRect = function(x,y,w,h){
	this.context.beginPath();
	this.context.moveTo(x,y);
	this.context.lineTo(x+w,y);
	this.context.lineTo(x+w,y+h);
	this.context.lineTo(x,y+h);
	this.context.clip();			
};

/*!
 * The object orieanted call to clipRect
 * Takes an object with the fields x,y,width and height
 */
CanvasClass.prototype.oClipRect = function(rect){
	this.clipRect(rect.x,rect.y,rect.width,rect.height);
};



CanvasClass.prototype.clear=function(){
  if(this.context==null){
    return;
  }
  this.context.clearRect(0,0,this.width,this.height);
};


/*!
 * Draws a filled triangle.
 * Takes the argument x1, y1, x2, y2, x3 and y3
 */
CanvasClass.prototype.fillTriangle=function(x1,y1,x2,y2,x3,y3){
  if(this.context==null){
    return;
  }  
  this.context.beginPath();  
  this.context.moveTo(x1,y1);  
  this.context.lineTo(x2,y2);  
  this.context.lineTo(x3,y3);  
  this.context.fill();  
};

/*!
 * The object oriented call to fillTriangle.
 * Takes an object with the fields x1, x2, x3, y1, y2, y3 
 */
CanvasClass.prototype.oFillTriangle=function(o){
	this.fillTriangle(o.x1, o.y1, o.x2, o.y2, o.x3, o.y3);
};

/*!
 * Draws a stroke triangle.
 * Takes the argument x1, y1, x2, y2, x3 and y3
 */
CanvasClass.prototype.strokeTriangle=function(x1,y1,x2,y2,x3,y3){
  if(this.context==null){
    return;
  }  
  this.context.beginPath();  
  this.context.moveTo(x1,y1);  
  this.context.lineTo(x2,y2);  
  this.context.lineTo(x3,y3); 
  this.closePath(); 
  this.context.stroke();  
};

/*!
 * The object oriented call to fillTriangle.
 * Takes an object with the fields x1, x2, x3, y1, y2, y3 
 */
CanvasClass.prototype.oStrokeTriangle=function(o){
	this.strokeTriangle(o.x1, o.y1, o.x2, o.y2, o.x3, o.y3);
};


CanvasClass.prototype.lineTo=function(x,y){
  if(this.context==null){
    return;
  }  
  this.context.lineTo(x,y);
};

CanvasClass.prototype.moveTo=function(x,y){
  if(this.context==null){
  	return;
  }  
  this.context.moveTo(x,y);
};

CanvasClass.prototype.drawLine=function(from_x,from_y, to_x, to_y){
  if(this.context==null){
  	return;
  }
  this.context.beginPath();
  this.context.moveTo(from_x,from_y);
  this.context.lineTo(to_x,to_y);
  this.context.stroke(); 
  this.context.closePath();
     
};


CanvasClass.prototype.arc=function(x,y,r,fa,ta,clockwise){
  if(this.context==null){
  	return;
  }  
  this.context.arc(x,y,r,fa,ta,clockwise);
};

CanvasClass.prototype.beginPath=function(){
  if(this.context==null){
    return;
  }  
  this.context.beginPath();
};

CanvasClass.prototype.closePath=function(){
	if(this.context==null){
		return;
	}  
	this.context.closePath();
};

CanvasClass.prototype.stroke=function(){
	if(this.context==null){
		return;
	}  
	this.context.stroke();
};

CanvasClass.prototype.fill=function(){
	if(this.context==null){
		return;
	}  
	this.context.fill();
};

CanvasClass.prototype.fillPolygon=function(){
	if(this.context==null){
		return;
	}  
	this.context.beginPath();	
	this.context.moveTo(arguments[0],arguments[1]);
	for(var i=2;i<arguments.length;i+=2){
		this.context.lineTo(arguments[i],arguments[i+1]);	
	}
	this.context.fill();
};


CanvasClass.prototype.drawPath=function(path){
	if(this.context==null){
		return;
	}  
	if (path.fill) {
		this.fillStyle(path.rgb);		
	}else{
		this.strokeStyle(path.rgb);
	}
	this.context.beginPath();  
	
	this.context.moveTo(path.points[0].x,path.points[0].y);
	for(var i=1;i<path.points.length-1;i++){  	
		switch (path.points[i].connect) {
			case 'line':
				this.context.lineTo(path.points[i].x, path.points[i].y);
			break;
			case 'arc':
				this.context.arc(path.points[i].x,path.points[i].y,path.points[i].add.radius,path.points[i].add.angle_to,path.points[i].add.angle_from,true);
			break;			
			default:
				this.context.quadraticCurveTo(path.points[i + 1].x, path.points[i + 1].y, path.points[i].x, path.points[i].y);
		}
	}   	 
	var i=path.points.length-1;
	switch (path.points[i].connect) {
		case 'line':
			this.context.lineTo(path.points[i].x, path.points[i].y);
		break;
		case 'arc':
			this.context.arc(path.points[i].x,path.points[i].y,path.points[i].add.radius,path.points[i].add.angle_to,path.points[i].add.angle_from,true);
		break;
		default:
			this.context.quadraticCurveTo(path.points[0].x, path.points[0].y, path.points[i].x, path.points[i].y);
	}  
	this.context.closePath();
	if (path.fill) {
		this.context.fill();  	
	}else{
		this.context.stroke();
	}  
};

CanvasClass.prototype.textBox=function(text){
	var d=document.createElement('span');
	d.style.visibility="hidden";
	d.style.font=this.context.font; 
	d.innerHTML=text;
	document.body.appendChild(d);
	result={width:d.offsetWidth,height:d.offsetHeight};  
	document.body.removeChild(d);
	return result;
};

CanvasClass.prototype.oText=function(o){
	if(o.baseline){    
		this.context.textBaseline=o.baseline;
	}
  
	if(o.textalign){    
		this.context.textAlign=o.textalign;
	}
  
	if(o.style&&o.style=="fill"){
		if(o.rgb){
			this.fillStyle(o.rgb);
		}
		this.fillText(o.text,o.x,o.y);
	}else{
		if(o.rgb){
			this.strokeStyle(o.rgb);
		}
		this.strokeText(o.text,o.x,o.y);
	}
};



/*!
 * Sets the text baseline.
 */
CanvasClass.prototype.textBaseline=function(value){
	this.context.textBaseline=value;
};

/*!
 * Sets the global alpha to be used.
 */
CanvasClass.prototype.alpha=function(a){
	this.context.globalAlpha=a;
};

/*!
 * Sets the global composition to be used.
 */
CanvasClass.prototype.composition=function(a){
	this.context.globalCompositeOperation=a;
};

CanvasClass.prototype.oFont=function(font){	
	this.context.font=font.size+" "+font.name;
};

/*!
 * Sets the textalignment of the canvas context.
 */
CanvasClass.prototype.restore=function(){	
	this.context.restore();
};
/*!
 * Sets the textalignment of the canvas context.
 */
CanvasClass.prototype.save=function(){	
	this.context.save();
};

/*!
 * Sets the textalignment of the canvas context.
 */
CanvasClass.prototype.textAlign=function(value){
	if (value) {
		this.context.textAlign = value;
	}
	return this.context.textAlign;
};

CanvasClass.prototype.textBaseline=function(base){
	this.context.textBaseline=base;
};

CanvasClass.prototype.strokeText=function(text,x,y){
	this.context.strokeText(text,x,y);
};

CanvasClass.prototype.fillText=function(text,x,y){
	try{
		this.context.fillText(text,x,y);
	}catch(e){
		alert("fillText:"+text+" "+x+" "+y);
	}
};

/*!
 * Draws a stroked circle
 * Takes the argument x, y and radius.
 */
CanvasClass.prototype.strokeCircle = function(x,y,radius){
	if(this.context==null){
		return;
	}
	this.context.beginPath();
	this.context.arc(x,y,radius,0,Math.PI*2,false);
	this.context.closePath();	
	this.context.stroke();
	
};

/*!
 * The object oriented call to strokeCircle.
 * Takes an object with the fields x, y and radius and the optional rgb.
 */
CanvasClass.prototype.oStrokeCircle=function(c){
	if(c.hasOwnProperty('rgb')){
		this.strokeStyle(c.rgb);		
	}
	this.strokeCircle(c.x, c.y, c.radius);
};

/*!
 * Draws a filled circle
 * Takes the argument x, y and radius.
 */
CanvasClass.prototype.fillCircle=function(x, y, radius){
	this.context.beginPath();
	this.context.arc(x, y, radius,0,Math.PI*2,false);
	this.context.closePath();	
	this.context.fill();
};


/*!
 * The object oriented call to strokeCircle.
 * Takes an object with the fields x, y and radius and the optional rgb.
 */
CanvasClass.prototype.oFillCircle=function(o){
	if(o.hasOwnProperty('rgb')){
		this.fillStyle(o.rgb);		
	}
	this.fillCircle(o.x, o.y, o.radius);
};


/*!
 * Draws a stroked Pie.
 * Takes the arguments x, y, radius, from_angle and to_angle. 
 */
CanvasClass.prototype.strokePie=function(x, y, radius, from_angle, to_angle){
	this.context.beginPath();
	this.context.moveTo(x, y);
	this.context.arc(x, y, radius, from_angle*Math.PI/180, to_angle*Math.PI/180,false);
	this.context.closePath();	
	this.context.stroke();
};

/*!
 * The object oriented call to draws a stroked Pie.
 * Takes an object with the fields x, y, radius, from_angle and to_angle.
 * And the optional field rgb. 
 */
CanvasClass.prototype.oStrokePie=function(o){
	if(o.hasOwnProperty('rgb')){
		this.strokeStyle(o.rgb);		
	}
	this.strokePie(o.x, o.y, o.radius, o.from_angle, o.to_angle);
};



/*!
 * Draws a filled Pie.
 * Takes the arguments x, y, radius, from_angle and to_angle. 
 */
CanvasClass.prototype.fillPie=function(x, y, radius, from_angle, to_angle){
	this.context.beginPath();
	this.context.moveTo(x, y);
	this.context.arc(x, y, radius, from_angle*Math.PI/180, to_angle*Math.PI/180,false);
	this.context.closePath();	
	this.context.fill();
};

/*!
 * The object oriented call to draws a filled Pie.
 * Takes an object with the fields x, y, radius, from_angle and to_angle.
 * And the optional field rgb. 
 */
CanvasClass.prototype.oFillPie=function(o){
	if(o.hasOwnProperty('rgb')){
		this.fillStyle(o.rgb);		
	}
	this.fillPie(o.x, o.y, o.radius, o.from_angle, o.to_angle);
};


/*!
 * Rotates the canvas coordinate system by degrees, this only affect subsequent drawings.
 * Takes the number of degress to rotate.
 */
CanvasClass.prototype.rotate = function(deg){
	this.context.rotate(deg);
};


/*!
 * Scales the canvas coordinate system by degrees, this only affect subsequent drawings.
 * Takes the number to scale by.
 */
CanvasClass.prototype.scale = function(s){
	this.context.scale(s,s);
};

/*!
 * Translates the canvas coordinate system by degrees, this only affect subsequent drawings.
 * Takes the number of x and y to translate.
 */
CanvasClass.prototype.translate = function(x,y){
	this.context.translate(x,y);
};