Wygeneruj poziomy obraz sprite'a z tablicy ImageData

Próbuję zbudować jeden poziomy przezroczysty obraz z tablicy ImageData, który będzie używany jako obraz sprite do animacji. Czy możesz wyjaśnić, jak mogę przekazać ramki do płótna, które jest szersze (szerokość X countFrames) i jak mogę przesunąć szerokość ImageData w iteracji? Dziękuję Ci.

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