Write a word on Canvas

write_a_word.js

var canvas = document.getElementById('st');
var pen = canvas.getContext('2d');
pen.drawImage(document.getElementById('img'),0,0);
var x,y;
var x1, x2, y1, y2;
var scale = 5;
var worddata = [];

$.ajax({url: 'word.xml',dataType: 'xml'}).done(function(xml) {

	$(xml).find('Outline').each(function(){
		$(this).children().each(function()
		{	
			var tagname = $(this).prop("tagName");
			switch(tagname) {
				case "MoveTo": case "LineTo":
				worddata.push({
					type: tagname,
					x:parseInt($(this).attr('x'))/scale,
					y:parseInt($(this).attr('y'))/scale
				});
				break;
				case "QuadTo":
				worddata.push({
					type: tagname,
					x1:parseInt($(this).attr('x1'))/scale,
					y1:parseInt($(this).attr('y1'))/scale,
					x2:parseInt($(this).attr('x2'))/scale,
					y2:parseInt($(this).attr('y2'))/scale
				});
				break;
			}
		});
	});
	drawing();
});

var pass = true;
function drawing(){
	var obj = worddata[0];
	worddata = worddata.slice(1,worddata.length);

	switch(obj.type) {
		case "MoveTo":
		pen.moveTo(obj.x, obj.y);
		drawGradient(0);
		break;
		case "LineTo":
		pen.lineTo(obj.x, obj.y);
		if(worddata.length>0) setTimeout(drawing,1);
		break;
		case "QuadTo":
		pen.quadraticCurveTo(obj.x1, obj.y1, obj.x2, obj.y2);
		if(worddata.length>0) setTimeout(drawing,1);
		break;
	}
	pen.strokeStyle = 'transparent';
	pen.stroke();
	if(worddata.length==0) drawGradient(0);
}

function drawGradient(i){
	grd =pen.createLinearGradient(0, 0, 410, 410);
	grd.addColorStop(i*0.1, "black");
	grd.addColorStop(1, "transparent");
	pen.fillStyle = grd;
	pen.fill();
	if(i<10)setTimeout(function(){i+=1;drawGradient(i);},100);
	else { if(worddata.length>0) setTimeout(drawing,1);}
}