How do I generate sprite with javascript

//some initialization code
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
enhanceContext(ctx);
var ctrans = new cxform(0,0,0,0,255,255,255,255);

//a shape
function shape17(ctx,ctrans,frame,ratio,time){
	drawPath(ctx,"M 950 780 L 138 563 262 100 1074 317 950 780 ");
	ctx.save();
	ctx.clip();
	ctx.transform(19.33929443359375,5.16876220703125,-5.181884765625,19.2901611328125,262,100);
	ctx.transform(1.0238095238095237,0,0,1.0416666666666667,-0.5,-0.5);
	var fimg = ctrans.applyToImage(image13);
	var pat=ctx.createPattern(fimg,"repeat");
	ctx.fillStyle = pat;
	ctx.fillRect(-16384,-16384,32768,32768);
	ctx.restore();
}
//more shapes omitted

//an image
var image9 = document.createElement("img");
image9.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAB......";

//the sprite I wanted
function sprite19(ctx,ctrans,frame,ratio,time){
	ctx.save();
	ctx.transform(1,0,0,1,120.0,120.0);
	var clips = [];
	var frame_cnt = 41;
	frame = frame % frame_cnt;
	switch(frame){
		case 0:
			place("shape8",canvas,ctx,[0.05,0.0,0.0,0.05,0.0,0.0],ctrans,1,0,0,time);
			place("shape10",canvas,ctx,[0.05,0.0,0.0,0.05,0.5,-2.0],ctrans,1,0,0,time);
			place("shape12",canvas,ctx,[0.05,0.0,0.0,0.05,0.0,0.0],ctrans,1,0,0,time);
			place("shape14",canvas,ctx,[0.05,0.0,0.0,0.05,0.0,0.0],ctrans,1,0,0,time);
			break;
		case 1:
			place("shape8",canvas,ctx,[0.04949951171875,0.0,0.0,0.04949951171875,0.15,0.4],ctrans,1,0,0,time);
			place("shape10",canvas,ctx,[0.05,0.0,0.0,0.05,0.6,-1.6],ctrans,1,0,0,time);
			place("shape12",canvas,ctx,[0.049990081787109376,-6.5460205078125E-4,4.90570068359375E-4,0.049997711181640626,0.05,0.6],ctrans,1,0,0,time);
			place("shape14",canvas,ctx,[0.049997711181640626,4.90570068359375E-4,-6.5460205078125E-4,0.049990081787109376,0.1,0.45],ctrans,1,0,0,time);
			break;
		//more frames omitted
	}
	ctx.restore();
}

//stuffs for animation
var frame = -1;
var time = 0;
var frames = [];
frames.push(0);
frames.push(1);
//more push omitted
var backgroundColor = "#000000";
var originalWidth = 250;
var originalHeight= 250;
function nextFrame(ctx,ctrans){
	var oldframe = frame;
	frame = (frame+1)%frames.length;
	if(frame==oldframe){time++;}else{time=0;};
	drawFrame();
}

//draw on canvas
function drawFrame(){
	ctx.fillStyle = backgroundColor;
	ctx.fillRect(0,0,canvas.width,canvas.height);
	ctx.save();
	ctx.transform(canvas.width/originalWidth,0,0,canvas.height/originalHeight,0,0);
	sprite19(ctx,ctrans,frames[frame],0,time);
	ctx.restore();
}

//some canvas functions
function drawPath(ctx, p) {
    ctx.beginPath();
    var parts = p.split(" ");
    var len = parts.length;
    var drawCommand = "";
    for (var i = 0; i < len; i++) {
        switch (parts[i]) {
            case 'L':
            case 'M':
            case 'Q':
                drawCommand = parts[i];
                break;
            default:
                switch (drawCommand) {
                    case 'L':
                        ctx.lineTo(parts[i], parts[i + 1]);
                        i++;
                        break;
                    case 'M':
                        ctx.moveTo(parts[i], parts[i + 1]);
                        i++;
                        break;
                    case 'Q':
                        ctx.quadraticCurveTo(parts[i], parts[i + 1], parts[i + 2], parts[i + 3]);
                        i += 3;
                        break;
                }
                break;
        }
    }
}
//more canvas function omitted
[/code:3iy7noyn]