Text to Bezier curve path

how to apply text to a curved path

HTML

<table><TR><TH>Bezier Curve</TH><TD>
    <input size="80" type="text" id="curve" name="curve" value="99.2,60.0,300.5,276.2,300.7,176.2">
    </TD></TR>
    <TR><TH>Text</TH><TD><input size="80" type="text" id="text" name="text" value="testing 1234567890"></TD></TR>
        <TR><TD colspan=2><div id="canvasDiv"></div></TD></TR>
    </table>

JavaScript

var first = true;
startIt();


function startIt()
{
    canvasDiv = document.getElementById('canvasDiv');
    canvasDiv.innerHTML = '<canvas id="layer0" width="300" height="300"></canvas>'; //for IE
    canvas = document.getElementById('layer0');
    ctx = canvas.getContext('2d');
    ctx.fillStyle = "black";
    ctx.font = "18px arial black";
    curve = document.getElementById('curve');
    curveText = document.getElementById('text');
    $(curve).keyup(function(e) {changeCurve();});
    $(curveText).keyup(function(e) {changeCurve();});
    
    
    
       
    if (first)
    {
        changeCurve();
        first = false;
    }
    
}

function changeCurve()
{
points = curve.value.split(',');  
    if (points.length == 8)
        drawStack();
  
}

function drawStack()
{
    Ribbon = {maxChar: 50, startX: points[0], startY: points[1], 
              control1X: points[2], control1Y: points[3], 
              control2X: points[4], control2Y: points[5], 
              endX: points[6], endY: points[7]};
    
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.save();
    ctx.beginPath();
    
    ctx.moveTo(Ribbon.startX,Ribbon.startY);
    ctx.bezierCurveTo(Ribbon.control1X,Ribbon.control1Y,
                   Ribbon.control2X,Ribbon.control2Y,
                   Ribbon.endX,Ribbon.endY);
    
    ctx.stroke();
    ctx.restore();
    
   FillRibbon(curveText.value,Ribbon); 
}

function FillRibbon(text,Ribbon)
{

var textCurve = [];
var ribbon = text.substring(0,Ribbon.maxChar);
var curveSample = 1000;


xDist = 0;
var i = 0;
for (i = 0; i < curveSample; i++)
	{
		a = new bezier2(i/curveSample,Ribbon.startX,Ribbon.startY,Ribbon.control1X,Ribbon.control1Y,Ribbon.control2X,Ribbon.control2Y,Ribbon.endX,Ribbon.endY);
		b = new bezier2((i+1)/curveSample,Ribbon.startX,Ribbon.startY,Ribbon.control1X,Ribbon.control1Y,Ribbon.control2X,Ribbon.control2Y,Ribbon.endX,Ribbon.endY);
		c = new bezier(a,b);
		textCurve.push({bezier: a, curve:...