JSPM

var ShelfPack = require('shelf-pack');

// Initialize the sprite with a width and height..
var sprite = new ShelfPack(64, 64);

// Pack bins one at a time..
for (var i = 0; i < 5; i++) {
    var bin = sprite.packOne(32, 32);   // request width, height
    // returns an bin object with `x`, `y`, `w`, `h`, `width`, `height` properties..

    if (bin) {
        console.log('bin packed at ' + bin.x + ', ' + bin.y);
    } else {
        console.log('out of space');
    }
}

// Clear sprite and start over..
sprite.clear();

// Or, resize sprite by passing larger dimensions..
sprite.resize(128, 128);   // width, height

var ShelfPack = require('shelf-pack');

// If you don't want to think about the size of the sprite,
// the `autoResize` option will allow it to grow as needed..
var sprite = new ShelfPack(10, 10, { autoResize: true });

// Bins can be allocated in batches..
// Each bin should have `width`, `height` (or `w`, `h`) properties..
var bins = [
    { id: 'a', width: 10, height: 10 },
    { id: 'b', width: 10, height: 12 },
    { id: 'c', w: 10, h: 12 },
    { id: 'd', w: 10, h: 10 }
];

var results = sprite.pack(bins);
// returns an Array of packed bins objects with `x`, `y`, `w`, `h`, `width`, `height` properties..

results.forEach(function(bin) {
    console.log('bin packed at ' + bin.x + ', ' + bin.y);
});


// If you don't mind letting ShelfPack modify your objects,
// the `inPlace` option will decorate your bin objects with `x` and `y` properties.
// Fancy!
var moreBins = [
    { id: 'e', width: 12, height: 24 },
    { id: 'f', width: 12, height: 12 },
    { id: 'g', w: 10, h: 10 }
];

sprite.pack(moreBins, { inPlace: true });
moreBins.forEach(function(bin) {
    console.log('bin packed at ' + bin.x + ', ' + bin.y);
});