My Blog

Posts this Month

In page jumps

Graph

Tetris

Created An Isolate Node

Tags

GraphMonday 19th of April 2010 18:36:21

I created a Graph script using the HTML 5 Canvas.

This graph show several data plots in different color, moving the mouse over the grapharea shows the estimates value on the x and y axis. Clicking on the graph area starts selecting an area to zoom in on clicking again shows the selected area, this does not work very well in IE.

The depicted graph is of the worlds population growth from 1750 to 2100 and is taken from wikipedia.

TetrisSaturday 10th of April 2010 11:06:39

I created a Tetris game using the HTML 5 Canvas.

This game hooks up to keys and is therefore only avaible when the post is view in isolation mode

Isolated Content, click to view

Created An Isolate NodeSaturday 10th of April 2010 10:33:35

Today I created an isolation node, the purposs of this node is only to display content when the blogentry is shown in isolation meaning for itself. This ability is required if and when the content of one blog entry may interfer with the content of another entry.

Isolated Content, click to view

MandelBrotMonday 29th of March 2010 12:33:10

From the previous fractal tree post it should be obvious that there would come a MandelBrot post, and here it is, you can zoom in on parts of the set by holding mouse down draggin and releasing over the area of the set you want enlarged, essentially dragging a rectangle around the area this rectangle is shown as a dotted border, if you zoom in to a shape that is not square like the canvas the result will be stretched.
The MandelBrot looks like this:

Fractal TreeMonday 22nd of March 2010 14:16:43

I have implemented the follow fractal tree script it is based on the blog entry:
Yet Another Coding BlogThe Tree looks like this:

You can create your own rules, the base rule must replace the patter F with something else:

A pattern consists of F being that extrudes the branch + and - that rotates, P makes a leaf
and [ ] makes a subbranch.

The replace pattern is written

From => To

Try typing
F=>FPFP[++FPFP][++FP-FP][--FPFP][--FP+FP][FPFP]
Each line in the textarea is a replacement rule so its possible to have several rules.

Updated Curves gameThursday 18th of March 2010 11:34:58

I have updated the curves game posted in this post Curves Game. It now has the ability to have up to 6 players and with an inbuild help funktionality.

Also I have made a standalone page with the game so the only thing on the page is the game i fullbrowser mode. Click Here

Curves GameSunday 14th of March 2010 17:21:26

Today I upload my first HTML 5 canvas game, this is a 2 player hotseat game where player controls a curve with w and d for one player and the left rigth arrows for the other. The goal is not to hit anything for as long as possible.

Also updated the Piechart(Add Piechart) and the barchart(Canvas Update) both to have a more readable text.

Add PiechartTuesday 9th of March 2010 10:44:00

Today I created a pie chart code, like the previous barchart Canvas Update this code works on tags written in a comment in the HTML canvas tag. The creation of this chart resulted in an extra class and in an update in the existing Canvas class. As a result the barchart class code was also corrected for an error I found causing the chart to paint its bars at a wrong location.

The above chart is created by typing the following in the canvas tag.

Example:Canvas tag

<canvas style="background-color: transparent;" id="ID" height="200" width="400">
  <!--
  <piechart x="0" y="0" width="400" height="200" color="#00ff0055" title="Top 10 countries by C02 emissions">
    <item value="6103493" name="China"/>
    <item value="5752289" name="United States"/>	
    <item value="1564669" name="Russia"/>
    <item value="1510351" name="India"/>	
    <item value="1293409" name="Japan"/>
    <item value="805090" name="Germany"/>
    <item value="568520" name="United Kingdom"/>
    <item value="544680" name="Canada"/>	
    <item value="475248" name="South Korea"/>
    <item value="474148" name="Italy"/>											
  </piechart>		  
  -->			 
</canvas>

And this is needed to write in the head of the HTML file.

Example:Canvas tag

<script src="Canvas.js" type="text/javascript"></script>
<script src="JCanvasDSL.js" type="text/javascript"></script>
<script src="Piechart.js" type="text/javascript"></script>
<script type="text/javascript">
  canvas=new JCanvasDSL('ID');
</script>

It should be obvious that the code for the javascript files is also needed:

Code :Piechart.js

function Piechart(canvas){
    return new PiechartClass(canvas);
}

function PiechartClass(canvas){
    this.canvas=canvas;
    this.items=[];
    this.legend={width:0,height:0,padding:3};
    this.ytitle="";
    this.title="";
    //The initial style of the border.

    this.borderStyle=this.canvas.createStyle();
    //The initial style of the legendBox.

    this.legendStyle=this.canvas.createStyle();    
    this.legendStyle.lineWidth=1;

    //The initial style of the background.

    this.backgroundStyle=this.canvas.createStyle();
    this.backgroundStyle.r=255;
    this.backgroundStyle.g=255;
    this.backgroundStyle.b=255;        
    this.backgroundStyle.a=0.9;            
    
    this.barrgb=[0,122,122];
    
    this.showpercentage=false;//Indicate if the percentage i shown or no in the legend box.

    
    //The initial font of the title of the plot

    this.titleFont={
        size:'12px'
        ,name:'verdana'
    }
}
PiechartClass.prototype.borderThickness = function(value){
    this.borderStyle.lineWidth=value;
}
PiechartClass.prototype.draw=function(){

    var lx=this.x+this.borderStyle.lineWidth;
    var hx=this.x+this.width-this.borderStyle.lineWidth;    
    var w=hx-lx;
    var ly=this.y+this.borderStyle.lineWidth;
    var hy=this.y+this.height-this.borderStyle.lineWidth;    
    var h=hy-ly;
    this.canvas.oFillStyle(this.backgroundStyle);        
    this.canvas.fillRect(this.x, this.y, this.width, this.height);        
    if (this.borderStyle.lineWidth>0){    
        this.canvas.oStrokeStyle(this.borderStyle);        
        var ht=Math.ceil(this.borderStyle.lineWidth/2);
        this.canvas.strokeRect(this.x+ht, this.y+ht, this.width-ht, this.height-ht);
    }
    
    
    //Draws the title of the plot and get the title box dimensions.

    this.canvas.oFont(this.titleFont);
    title_box_height=0;
    if (this.title != "") {
        var box = this.canvas.textBox(this.title);
        title_box_height=box.height;
        this.canvas.context.textBaseline="top"
        this.canvas.fillStyle('rgb(0,0,0)');
        this.canvas.fillText(this.title,lx+(w-box.width)/2,ly);
    }
    
    
    //Find circle radius and center:

    var y_radius=(h-title_box_height)/2;
    var x_radius=(w-this.legend.width-this.legend.padding*2)/2;    
    var circle_radius=Math.min(x_radius,y_radius);
    var circle_x=lx+x_radius;
    var circle_y=ly+title_box_height+y_radius;    
    
    

    
    var percentage_width=0;
    if(this.showpercentage){
        this.canvas.oFont({
                size: '12px',
                name: 'verdana'
            });        
        percentage_min_width=this.canvas.textBox("(%)").width;
        percentage_char0_width=this.canvas.textBox("0").width;
        percentage_char1_width=this.canvas.textBox("1").width;        
        percentage_width=percentage_char0_width*2+percentage_char1_width+percentage_min_width+2;
    }
    
    //Draw Legend Box

    this.canvas.oStrokeStyle(this.legendStyle)
    this.canvas.strokeRect(
        hx-8-this.legend.width-percentage_width,
        ly+title_box_height,
        this.legend.width+6+percentage_width,
        this.legend.height+6
    );
        
    var legendTextX=hx-(this.legend.width)-5;
    var legendTextY=ly+3+title_box_height;    
    var total=0;
    for(index in this.items){
        //Draw Legend Texts.

        total+=this.items[index].value;
        this.canvas.fillStyle(this.items[index].color);
        this.canvas.oText({style:'fill',baseline:'top',text:this.items[index].name,x:legendTextX,y:legendTextY});
        legendTextY+=this.items[index].legend.height+2;        
    }
    at_angle=0;
    var legendTextY=ly+3+title_box_height;    
    for(index in this.items){
        var percentage01=this.items[index].value/total
        var angle=360*percentage01;
        this.canvas.oFillPie({
            x: circle_x,
            y: circle_y,
            from_angle:at_angle,
            to_angle:at_angle+angle,
            radius: circle_radius,
            rgb:this.items[index].color
        });
        if (this.showpercentage) {
            var percentage=Math.floor(percentage01 * 100);
            var x_offset=legendTextX-2-percentage_min_width;
            if(percentage<10){
                x_offset-=percentage_char0_width;
            }else{
                x_offset-=percentage_char0_width*2;
                if(percentage==100){
                    x_offset-=percentage_char1_width;
                }
            }
            this.canvas.fillStyle('#000000');
            this.canvas.oText({
                style: 'fill',
                baseline: 'top',
                text: "(" +percentage+ "%)",
                //This I could not figure out how to emulate in VML

                //textalign: 'right',				

                //x: legendTextX-2,

                x: x_offset,
                y: legendTextY
            });
            legendTextY += this.items[index].legend.height + 2;
        }                
        at_angle+=angle;        
    }
}
PiechartClass.prototype.Item=function(){
    this.barrgb[2]+=10000;
    if(this.barrgb[2]>255){
        var d=Math.floor(this.barrgb[2]/255);
        this.barrgb[1]+=d;
        this.barrgb[2]=this.barrgb[2]%255;
        if (this.barrgb[1] > 255) {
            var d=Math.floor(this.barrgb[1]/255);
            this.barrgb[0] += d;
            this.barrgb[1] = this.barrgb[1]%255;
        }        
    }

    return {value:0,name:'',color:"rgb("+this.barrgb[0]+","+this.barrgb[1]+","+this.barrgb[2]+")"};    
}

PiechartClass.prototype.addItem=function(bar){
    this.canvas.oFont({
            size: '12px',
            name: 'verdana'
        });        
    var box=this.canvas.textBox(bar.name);
    this.legend.width=Math.max(box.width,this.legend.width);
    this.legend.height+=box.height+2;
    bar.legend=box;
    this.items.push(bar);
}

if(typeof(JCanvasDSLClass)=='function'){
    JCanvasDSLClass.prototype.rootNode.piechart=function(self,node){
        var ele=Piechart(self.canvas);
        self.mapAttributes(node,ele,[
                ['x','x',parseInt]
                ,['y','y',parseInt]
                ,['color','rgb',self.colorSolver]
                ,['width','width',parseInt]
                ,['height','height',parseInt]    
                ,['ytitle','ytitle']        
                ,['title','title']            
                ,['borderThickness','borderThickness',parseInt]        
                ,['showpercentage',"showpercentage",self.parseBoolean]            
                ]
        );    
        var c=self.firstChild(node);
        while(c){
            switch(c.nodeName){
                case 'border':
                    var border=ele.borderStyle;
                    self.mapAttributes(c,border,[
                            ['color','rgba',self.colorSolverRGBA]
                            ,['borderThickness','lineWidth',parseInt]                        
                            ]);                
                break;
                case 'background':
                    var border=ele.backgroundStyle;
                    self.mapAttributes(c,border,[
                            ['color','rgba',self.colorSolverRGBA]                    
                            ]);            
                break;                            
                case 'item':
                    var item=ele.Item();
                    self.mapAttributes(c,item,[
                            ['value','value',parseInt]
                            ,['color','color',self.colorSolver]
                            ,['name','name']                        
                            ]);
                    ele.addItem(item);                
                break;
            }
            c=self.nextSibling(c);
        }
        ele.draw();        
    }
}

The code for JCanvasDSL.js and Canvas.js can be found in the post Canvas Update

Canvas UpdateSaturday 6th of March 2010 22:06:39

I have today enhanced the bar char, by fixing the coloring of the bars, now instead of using the Math.random function of javascript their
colors are assigned by a static algorigth, the effect of this is that all bars in the barchart will be given the same colors always.

I also added a title to the chart it self and a title to the y axis of the chart.

The effect of these changes can be seen on the chart below, please note that the data choosen in the chart is choosen cause it was the first data I found the lend it self be illustrated with a barchart.

It has also occured to me that I should show what is needed to write to create this chart.

The following shows what is needed to write in the tag

Example:Canvas tag

<canvas style="background-color: transparent;" id="ID" height="200" width="460">
  <!--
      <barchart x="0" y="0" width="460" height="200" color="#00ff0055" title="Top 10 countries by C02 emissions" ytitle="yearly CO2 emissions in mt">
	    <bar value="6103493" name="China"/>
	    <bar value="5752289" name="United States"/>	
	    <bar value="1564669" name="Russia"/>
	    <bar value="1510351" name="India"/>	
	    <bar value="1293409" name="Japan"/>
	    <bar value="805090" name="Germany"/>
	    <bar value="568520" name="United Kingdom"/>
	    <bar value="544680" name="Canada"/>	
	    <bar value="475248" name="South Korea"/>
	    <bar value="474148" name="Italy"/>											
	  </barchart>		 
  -->
</canvas>

And this is needed to write in the head of the HTML file.

Example:Canvas tag

<script src="Canvas.js" type="text/javascript"></script>
<script src="JCanvasDSL.js" type="text/javascript"></script>
<script src="Barchart.js" type="text/javascript"></script>
<script type="text/javascript">
  canvas4b92c4d33163c=new JCanvasDSL('ID');
</script>

It should be obvious that the code for the javascript files is also needed:

Code :Canvas.js

/*!
 * Used to create an object of Canvas. The created object automaticly
 * attaches its init function to the windows load event.
 *
 * version 10/4-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.width=800;
    obj.height=800;
    obj.appendChild=function(child){
        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;        
    };
    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.offsetTop = function(){
        return this.y;
    }
    obj.offsetLeft = function(){
        return this.x;
    }
    obj.offsetParent = function(){
        if ('parent' in this) {
            return this.parent;
        }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;
    }            
}

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

function CanvasClass(){    
  DomNodeInterface(this);
  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;
    }    
}


/*!
 * Sets the fillStyle of the canvas context.
 */
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;
        },
        _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)){
        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.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.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);
    }  
    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)
  }
}

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){
    this.context.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);
}

Code :JCanvasDSL.js

function JCanvasDSL(id){
    return new JCanvasDSLClass(id);
}
function JCanvasDSLClass(id){
    this.canvas=Canvas();
    this.canvas.id=id;
    this.elements=[];
    var me=this;
    this.canvas.onReady=function(){
        me.init();
    }
}
JCanvasDSLClass.prototype.rootNode={};

JCanvasDSLClass.prototype.nextSibling=function(n){
    y=n.nextSibling;
    while (y&&y.nodeType!=1){
          y=y.nextSibling;
      }
    return y;
}

JCanvasDSLClass.prototype.firstChild=function(n){
    y=n.firstChild;
    while (y&&y.nodeType!=1){
          y=y.nextSibling;
      }
    return y;
}
JCanvasDSLClass.prototype.colorSolver=function(color){
    var hex=null;
    if(hex=color.match(/#[0-9a-fA-F]{6,8}/)){        
        hex=hex[0]
        switch(hex.length){
            case 7:
                return "rgb("+parseInt(hex.substr(1,2),16)+
                          ","+parseInt(hex.substr(3,2),16)+
                          ","+parseInt(hex.substr(5,2),16)+")";
            break;
            case 9:
                
                return "rgba("+parseInt(hex.substr(1,2),16)+
                          ","+parseInt(hex.substr(3,2),16)+
                          ","+parseInt(hex.substr(5,2),16)+                          
                          ","+(parseInt(hex.substr(7,2),16)/255)+")";
            break;                                      
        }
    }else{
        return color
    }
}

JCanvasDSLClass.prototype.parseBoolean=function(text){
    var hex=null;
    if(text.match(/true|1/i)){
        return true;
    }
    if(text.match(/false|0/i)){
        return false;
    }        
    return false;
}

JCanvasDSLClass.prototype.makeParseLegalStrings=function(values,def){
    return function(text){
        for(var i=0;i<values.length;i++){
            if(text==values[i]){
                return text;
            }            
        }
        return def;
    }
}

JCanvasDSLClass.prototype.colorSolverRGBA=function(color){
    var dec=null;
    if(dec=color.match(/#[0-9a-fA-F]{6,8}/)){        
        dec=dec[0]
        return {
            r:parseInt(dec.substr(1,2),16)
            ,g:parseInt(dec.substr(3,2),16)
            ,b:parseInt(dec.substr(5,2),16)
            ,a:(dec.length==1)?1:parseInt(dec.substr(7,2),16)/255
        }
    }else if(dec=color.match(/rgb\((\d+),(\d+),(\d+)\)/)){
        return {
            r:parseInt(dec[1])
            ,g:parseInt(dec[2])
            ,b:parseInt(dec[3])
            ,a:1
        }        
    }else if(dec=color.match(/rgba\((\d+),(\d+),(\d+),(\d+)\)/)){
        return {
            r:parseInt(dec[1])
            ,g:parseInt(dec[2])
            ,b:parseInt(dec[3])
            ,a:parseInt(dec[4])
        }        
    }
}

JCanvasDSLClass.prototype.mapAttributes=function(node,obj,maps){
    for(var i=0;i<maps.length;i++){
        if((node.hasAttribute&&node.hasAttribute(maps[i][0]))||node.getAttribute(maps[i][0])){
            if (maps[i].length == 2) {
                if (typeof(obj[maps[i][1]]) == 'function') {
                    obj[maps[i][1]](node.getAttribute(maps[i][0]));
                }else{                                        
                    obj[maps[i][1]] = node.getAttribute(maps[i][0]);
                }
            }else{
                if (typeof(obj[maps[i][1]]) == 'function') {
                    obj[maps[i][1]](maps[i][2](node.getAttribute(maps[i][0])));
                }else{        
                                
                    obj[maps[i][1]] =maps[i][2](node.getAttribute(maps[i][0]));
                }                
            }
        }
    }
}

JCanvasDSLClass.prototype.init=function(){
    var c=this.canvas.element.firstChild;
    while(c&&c.nodeName!="#comment"){
        c=c.nextSibling;
    }
    var text='<root>'+c.nodeValue+'</root>'
    if (window.DOMParser){
        parser=new DOMParser();
        xmlDoc=parser.parseFromString(text,"text/xml");
    }else // Internet Explorer

    {
        xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async="false";
        xmlDoc.loadXML(text);
    }

    var c=this.firstChild(xmlDoc.documentElement);
    while(c){
        if(c.nodeName=="configuration"){
            for(var i=0;i<c.attributes.length;i++){
                switch(c.attributes[i].name){
                    case 'sizeToParent':
                        this.canvas.autoSizeToParent();
                    break;
                    case 'color':                        
                        this.canvas.rgb(c.attributes[i].value);
                    break;                    
                }
            }
        }
        if(this.rootNode.hasOwnProperty(c.nodeName)){
            this.rootNode[c.nodeName](this,c);                
        }
        c=this.nextSibling(c);
    }    
}

Code :Barchart.js

function Barchart(canvas){
    return new BarchartClass(canvas);
}

function BarchartClass(canvas){
    this.canvas=canvas;
    this.bars=[];
    this.legend={width:0,height:0,padding:3};
    this.ytitle="";
    this.title="";
    
    this.barrgb=[0,122,122];
}

BarchartClass.prototype.draw=function(){
    //Find the max value


    var max_value=0;    
    for (index in this.bars) {
        if(this.bars[index].value>max_value){
            max_value=this.bars[index].value;
        }
    }

    //Find the max width of the value indicators

    var indicator_max_width=0;
    var value_indicators=[];
    var font={
                size: "12px",
                name: 'verdana'
            };
    this.canvas.oFont(font);
    title_box_height=0;
    if (this.title != "") {
        var box = this.canvas.textBox(this.title);
        title_box_height=box.height;
        this.canvas.context.textBaseline="top"
        this.canvas.fillStyle('rgb(0,0,0)');
        this.canvas.fillText(this.title,this.x+(this.width-box.width)/2,this.y);
    }
    
    ytitle_box_width=0;
    if (this.ytitle != "") {
        var box = this.canvas.textBox(this.ytitle);
        ytitle_box_width=box.height;
        this.canvas.rotate(270 * Math.PI / 180);
        this.canvas.context.textBaseline="top"
        this.canvas.fillStyle('rgb(0,0,0)');
        this.canvas.fillText(this.ytitle,-title_box_height-this.y-this.height+(this.height-box.width)/2,this.x);
        this.canvas.rotate(90 * Math.PI / 180);
    }

    for (var i = 0; i < max_value; i += Math.floor(max_value / 5)) {
        var box = this.canvas.textBox(i);        
        value_indicators.push({
            box: box,
            value: i
        });
        indicator_max_width=Math.max(indicator_max_width,box.width);
    }

    //Draw the value indicators.

    var topIndicatorY=this.y+title_box_height+value_indicators[value_indicators.length-1].box.height/2;
    var bottomIndicatorY=this.y+this.height-value_indicators[0].box.height/2;
    
    var indicatorDist=(bottomIndicatorY-topIndicatorY)/5;
    for (var i  in value_indicators) {
        var y=bottomIndicatorY-i*indicatorDist;
        var indicator=value_indicators[i];
        this.canvas.context.textAlign='left';
        this.canvas.oText({
            style:'fill',
            baseline:'middle',
            rgb: 'rgb(0,0,0)',
            text: indicator.value,
            x:this.x+ytitle_box_width+indicator_max_width-indicator.box.width,
            y:y
        });        
        this.canvas.beginPath();
        this.canvas.moveTo(this.x+ytitle_box_width+indicator_max_width+2,y);
        this.canvas.lineTo(this.x+ytitle_box_width+indicator_max_width+6,y);
        this.canvas.stroke();            
    }    

    
    //Max Bar Height:

    var bar_max_height=this.height-title_box_height-value_indicators[0].box.height/2-value_indicators[value_indicators.length-1].box.height/2;
    var bar_height_adjuster=bar_max_height/max_value;    
    var bar_top=this.y+title_box_height+value_indicators[value_indicators.length-1].box.height/2;
    

    this.canvas.strokeStyle('rgb(0,0,0)');
    this.canvas.beginPath();
    this.canvas.moveTo(this.x+ytitle_box_width+indicator_max_width+6,bar_top);
    this.canvas.lineTo(this.x+ytitle_box_width+indicator_max_width+6,bar_max_height+bar_top);
    this.canvas.lineTo(this.width+this.x-this.legend.width-6,bar_max_height+bar_top);
    this.canvas.stroke();
    
    /*This for reasons beyond my understanding is required to avoid strokeText changing the line color*/
    this.canvas.beginPath();
    this.canvas.closePath();
    
    
    var barStartX=this.x+ytitle_box_width+indicator_max_width+8;
    var barEndX=this.x+this.width-this.legend.width-this.legend.padding*2;
    var barArea=barEndX-barStartX;
    
    var barWidth=Math.min(barArea/this.bars.length,20);
    var barMargin=(barArea-barWidth*this.bars.length)/this.bars.length;
    barStartX+=barMargin/2;
    //var barWidth=Math.min(50,(barArea-this.bars.length*20)/this.bars.length);


    //Draw Legend Box

    this.canvas.strokeStyle('rgb(0,0,0)');
    this.canvas.strokeRect(
        this.x+this.width-6-this.legend.width,
          this.y+title_box_height,
          this.legend.width+6,
          this.legend.height+6
    );
      
    this.canvas.oFont({
            size: '12px',
            name: 'verdana'
        });        
    var legendTextX=this.x+5+this.width-this.legend.width-3;
    var legendTextY=this.y+3+title_box_height;    
    for(index in this.bars){
        var h=this.bars[index].value*bar_height_adjuster;
        this.canvas.fillStyle(this.bars[index].color);
        this.canvas.fillRect(
            barStartX+index*(barMargin+barWidth),
            bar_top+bar_max_height-h,            
            barWidth,
            h);
                
        //Draw Legend Texts.

        this.canvas.fillStyle(this.bars[index].color);
        this.canvas.oText({style:'fill',baseline:'top',text:this.bars[index].name,x:legendTextX,y:legendTextY});
        legendTextY+=this.bars[index].legend.height+2;
    }

}
BarchartClass.prototype.Bar=function(){
    this.barrgb[2]+=10000;
    if(this.barrgb[2]>255){
        var d=Math.floor(this.barrgb[2]/255);
        this.barrgb[1]+=d;
        this.barrgb[2]=this.barrgb[2]%255;
        if (this.barrgb[1] > 255) {
            var d=Math.floor(this.barrgb[1]/255);
            this.barrgb[0] += d;
            this.barrgb[1] = this.barrgb[1]%255;
        }        
    }

    return {value:0,name:'',color:"rgb("+this.barrgb[0]+","+this.barrgb[1]+","+this.barrgb[2]+")"};    
}

BarchartClass.prototype.addBar=function(bar){
    this.canvas.oFont({
            size: '12px',
            name: 'verdana'
        });        
    var box=this.canvas.textBox(bar.name);
    this.legend.width=Math.max(box.width,this.legend.width);
    this.legend.height+=box.height+2;
    bar.legend=box;
    this.bars.push(bar);
}

if(typeof(JCanvasDSLClass)=='function'){
    JCanvasDSLClass.prototype.rootNode.barchart=function(self,node){
        var ele=Barchart(self.canvas);
        self.mapAttributes(node,ele,[
                ['x','x',parseInt],
                ['y','y',parseInt],
                ['color','rgb',self.colorSolver],
                ['width','width',parseInt],
                ['height','height',parseInt],    
                ['ytitle','ytitle'],        
                ['title','title']                                
                ]
        );    
        var c=self.firstChild(node);
        while(c){
            switch(c.nodeName){
                case 'bar':
                    var bar=ele.Bar();
                    self.mapAttributes(c,bar,[
                            ['value','value',parseInt]
                            ,['color','color',self.colorSolver]
                            ,['name','name']
                            ]);
                    ele.addBar(bar);                
                break;
            }
            c=self.nextSibling(c);
        }
        ele.draw();        
    }
}

Also as another update is the beautifier used on code on this page, it should now have been improved to not colorise keywords in comments and to colorise strings.

Canvas UpdateFriday 5th of March 2010 09:12:10

I alterred the way the canvas tag works, now instead of interpreting the body of the tag as draw commands on the server these commands are now written as tags in a HTML comment in the tags body. Javascript on the client then interprets the tags written in this comment as draw commands any command that it understands is drawn on the canvas.

This change resulted in a non visual change to the prior blog entry "New Canvas Tag"

In the update I also added the possibility to make barcharts.

Older posts