function canvasGraphic(name,strokeStyle,fillStyle,lineWidth) {
  this.canvasInterface = null;
	this.context = null;
	this.strokeStyle=(strokeStyle?strokeStyle:"rgb(255,0,0)");
	this.fillStyle=(fillStyle?fillStyle:"rgba(255,0,0,0.2)");
	this.lineWidth=(lineWidth?lineWidth:1);
	this.name=name;
  /*
  this.lineJoin = "miter";
  this.lineCap = "butt";
  this.miterLimit = 10;
  this.globalAlpha = 1;  
  */
	this.setStrokeStyle=function (strokeStyle) {
    this.strokeStyle=(strokeStyle?strokeStyle:this.strokeStyle);
    this.context.strokeStyle=this.strokeStyle;
  }
	this.setFillStyle=function (fillStyle) {
    this.fillStyle=(fillStyle?fillStyle:this.fillStyle);
    this.context.fillStyle=this.fillStyle;
  }
  this.setLineWidth=function (lineWidth) {
    this.lineWidth=(lineWidth?lineWidth:this.lineWidth);
    this.context.lineWidth=this.lineWidth;
  }
  this.resize=function (width,height) {
    this.canvasInterface.style.width=width;
    this.canvasInterface.style.height=height;
    this.canvasInterface.width=width;
    this.canvasInterface.height=height;
  }
  this.clear=function () {
    this.context.clearRect(0,0,this.canvasInterface.width,this.canvasInterface.height);  
  }
  this.drawPoint=function () {
  
  }
  this.Line=function (pntFrom, pntTo) {
		this.context.moveTo(pntFrom.x,pntFrom.y);
		this.context.lineTo(pntTo.x,pntTo.y);
  }
  this.drawLine=function (pntFrom, pntTo) {
    this.refreshProperties();
		this.context.beginPath();
		/*
  	this.setStrokeStyle();
	  this.setFillStyle();
    this.setLineWidth();
    */		
    this.Line(pntFrom, pntTo);
		this.context.closePath();
    this.context.stroke();
  }
  this.Circle=function (StartX, StartY,r) {
    this.context.arc(StartX, StartY, r,0,Math.PI*2 ,true);
  }
  this.drawCircle=function (StartX, StartY,r,isFill) {
    this.refreshProperties();
		this.context.beginPath();
		/*
  	this.setStrokeStyle();
	  this.setFillStyle();
    this.setLineWidth();
    */		
		if (isFill) {
		  this.Circle(StartX, StartY,r);
		  this.context.fill();    
    }
		this.Circle(StartX, StartY,r);
		this.context.closePath();
    this.context.stroke();      
  }
  this.drawFillCircle=function (StartX, StartY,r) {
    this.drawCircle(StartX, StartY,r,true);
  }
  this.Rect=function (StartX,StartY,StopX,StopY){
    var aWidth=StopX-StartX;
    var aHeight=StopY-StartY;  
    this.context.moveTo(StartX, StartY);
    this.context.lineTo(StartX + aWidth, StartY);
    this.context.lineTo(StartX + aWidth, StartY + aHeight);
    this.context.lineTo(StartX, StartY + aHeight);  
  }
  this.drawRect=function (StartX,StartY,StopX,StopY,isFill) {
    this.refreshProperties();
    this.context.beginPath();
    /*
  	this.setStrokeStyle();
	  this.setFillStyle();
    this.setLineWidth();
    */    
    if (isFill) {
      this.Rect(StartX,StartY,StopX,StopY);
      this.context.fill();
    }
    this.Rect(StartX,StartY,StopX,StopY);
    this.context.closePath();
    this.context.stroke();  
  }
  this.drawFillRect=function (StartX,StartY,StopX,StopY) {
    this.drawRect(StartX,StartY,StopX,StopY,true);
  }
  this.drawPolyline=function (Xs,Ys, isWCoord) {
    this.refreshProperties();
		this.context.beginPath();
		/*
  	this.setStrokeStyle();
	  this.setFillStyle();
    this.setLineWidth();
    */		
    for (var i=0;i<(Xs.length-1);i++) {
      /*
      if (isWCoord) {
        var XY=WordCoord2NewPixel(Xs[i],Ys[i]);
        var fromXY=new Object();
        fromXY.x=XY[0];
        fromXY.y=XY[1];
        var XY=WordCoord2NewPixel(Xs[i+1],Ys[i+1]);
        var toXY=new Object();
        toXY.x=XY[0];
        toXY.y=XY[1];        
      }
      else {
      */
        var fromXY=new Object();
        fromXY.x=Xs[i];
        fromXY.y=Ys[i];
        var toXY=new Object();
        toXY.x=Xs[i+1];
        toXY.y=Ys[i+1];       
      //}
      this.Line(fromXY,toXY);      
    }		
		this.context.closePath();
    this.context.stroke();    
  }
  this.paintPolygon=function (Xs,Ys, isWCoord) {
    /*if (isWCoord) var fromXY=WordCoord2NewPixel(Xs[0],Ys[0]);
    else*/ var fromXY=new Array(Xs[0],Ys[0]);
    this.context.moveTo(fromXY[0], fromXY[1]);
    for (var i=1;i<Xs.length;i++) {
      if ((Xs[i]<=0 || Xs[i]>0) && (Ys[i]<=0 || Ys[i]>0)) {
        /*if (isWCoord) var toXY=WordCoord2NewPixel(Xs[i],Ys[i]);
        else */ var toXY=new Array(Xs[i],Ys[i]);
        this.context.lineTo(toXY[0], toXY[1]);
        fromXY=toXY;
      }
    }
  }  
  this.drawPolygon=function (Xs,Ys, isWCoord, isFill) {
    this.refreshProperties();
    this.context.beginPath();
    /*
  	this.setStrokeStyle();
	  this.setFillStyle();
    this.setLineWidth();
    */    
    if (isFill) {
      this.paintPolygon(Xs,Ys, isWCoord);
      this.context.fill();
    }
    var alphaV=this.context.globalAlpha;
    this.context.globalAlpha=1;
    this.paintPolygon(Xs,Ys, isWCoord);
    this.context.closePath();  
    this.context.stroke();
    this.context.globalAlpha=alphaV;
  }
  this.drawFillPolygon=function (Xs,Ys, isWCoord) {
    this.drawPolygon(Xs,Ys, isWCoord, true);
  }         
  this.refreshProperties=function() {
  	this.setStrokeStyle();
	  this.setFillStyle();
    this.setLineWidth();  
  }
  //Canvas initializieren  
  this.Ini=function() {
    //alert(this.name);
    this.canvasInterface = document.getElementById(this.name);
	  this.context = this.canvasInterface.getContext("2d");  
	  //this.context.globalAlpha=0.5;
	  this.refreshProperties();
  }
}