Generate horizontal sprite image from array of ImageData

Question

I'm trying to build one horizontal transparent image from array of ImageData, which will be used as sprite image for animation. Can you please explain, how can I pass frames to canvas, which is wider ( width X countFrames) and how can I move for offset of width of ImageData in iteration? Thank you.

var spriteFrames = [];

for (var i = 0; i < data.animator.frames; i++) {
    var imageData = new ImageData( 500, 400 );
    spriteFrames.push( imageData.data );
}

function generateSprite( data, width, height, numFrames ) {
    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d');
    canvas.width = width * numFrames,
    canvas.height = height;
    var idata = ctx.getImageData(0, 0, width * numFrames, height);
    var buffer = new Uint8ClampedArray( width * numFrames * height * 4);

    // some logic here
    for (var a = 0; a < data.length; a++) {

        for( var i = 0; i < data[a].length; i+=4 ) {

            var pos = i * numFrames;

            buffer[pos]   = data[a][i];
            buffer[pos+1] = data[a][i+1];
            buffer[pos+2] = data[a][i+2];
            buffer[pos+3] = data[a][i+3];

        }
    }

    idata.data.set(buffer);
    ctx.putImageData(idata, 0, 0);

    return canvas.toDataURL();
}

img.src = generateSprite( spriteFrames, width, height, spriteFrames.length );

Answer 1

It was so ease

for (var a = 0; a < spriteFrames.length; a++) {
    ctx.putImageData( spriteFrames[a].image, width * a, 0 );
}