KineticJS Image Sprite as toolbar button images in canvas

Question

I am trying to create a toolbar in canvas (no div elements) using KineticJS. i have an image sprite which consists of 10 images, i need to map the individual sprite image as a button in a toolbar. How to do this using KineticJS.Sprite.

EDIT:

the events are not handled properly( i get subscription from the last sprite index (i.e 7), should i create separate objects for storing each sprite events).?

EDIT 2: Links Removed

Answer 1

After going through the Kinetic JS code base I have finally found a solution for the above problem, the final implementation is shared below:

var buttons = {
        button: [{
            //button1
            x: 0,
            y: 0,
            width: 28,
            height: 28
        }, {
            //button2
            x: 29,
            y: 0,
            width: 28,
            height: 28
        }, {
            //button3
            x: 58,
            y: 0,
            width: 28,
            height: 28
        }]};
var imageObj = new Image();
imageObj.onload = function () {
        for (var i = 0; i < 12; i++) {
            var blob = new Kinetic.Sprite({
                x: 50 + i * 30,
                y: 40,
                name: i,
                image: imageObj,
                index: i,
                animation: 'button',
                animations: buttons
            });
            toolbarbuttonGroup.add(blob);
        }

        toolbarbuttonGroup.on('click', function (evt) {
            var buttonId= evt.shape;
            alert('Clicked on \"' + buttonId.getName() + '\"');
        });