function drawdemo()
  {
    var canvas = document.getElementById('demo');
    if (!canvas.getContext) return;
    var ctx = canvas.getContext('2d');
  
    // this adds the text functions to the ctx
    CanvasTextFunctions.enable(ctx);
  
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.fillStyle = "rgba(200,200,255,0.66)";
    ctx.fillRect(0,0,canvas.width,canvas.height);
  
    var font = "sans";
    var fontsize = 16;
    var y = ctx.fontAscent(font,fontsize);
    ctx.strokeStyle = "rgba(0,0,0,0.75)";
    ctx.drawTextCenter( font, fontsize, canvas.width/2, y,
    "Canvas Text Functions");
    
     y += ctx.fontDescent(font,fontsize);
     for ( fontsize = 16; fontsize > 2; fontsize -= 2) {
       y += ctx.fontAscent(font,fontsize);
       ctx.drawText( font, fontsize, 2, y, ""+fontsize+"pt");
       ctx.drawTextRight( font, fontsize-1, canvas.width-2, y, ""+(fontsize-1)+"pt");
       y += ctx.fontDescent(font,fontsize);
     }     
  
     fontsize = 8;
     var sag = ctx.fontAscent(font,fontsize)/2;
  
     for ( var ang = 0; ang < 360; ang += 30) {
       ctx.save();
       ctx.strokeStyle = "rgba("+Math.floor(ang/360*128)+","+Math.floor((360-ang)/360*128)+",0,0.8)";
       ctx.translate( canvas.width/2, canvas.height/2);
       ctx.rotate(ang*2*3.1416/360);
       ctx.drawText( font, fontsize, 15, sag, ""+ang);
       ctx.restore();
     }
  }