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();
   }
}