How to create a group in fabric.js - html5-canvas

Question

I want to create a group that will contain a combination of Image and Text and will behave as one, however when I do that:
https://gist.github.com/1682293
I can't move that group. To make it work I need to first add image and text to canvas, then create a group with these image and text, and then delete the image and text added separately.
What am I doing wrong there?

Answer 1

This seems to have been fixed in the latest version of fabric.js. I was able to get it to work with version 0.9.15:
function drawImage(name, left, top) {
fabric.Image.fromURL('../nav-host.png', function (img) {
var oImg = img.scale(4);
var caption = new fabric.Text(name, {
fontFamily: 'Arial'
});
var group = new fabric.Group([oImg, caption], { left: left, top: top });
canvas.add(group);
});
}

Answer 2

I came up this to add part of the text being generated dynamically from a counter script.
This code will add a group made from an image and text. The text is set to be above the image and it updates itself with every click of the button as it adds them to your canvas. So when you click the button the first time the text will say Sticky Card #1. The next click will give you your second group with the text saying Sticky card #2. The image was only 30px X 30px.
This is the counter script in the head of my page.
$(window).load(function(){
$('.stickycard').click(function() {
$('#cardcount').html(function(i, val) { return val*1+1; });
});
});
This is my fabric.js code that I used inside the kitchensink.js.
if ($(element).hasClass('image1')) {
fabric.Image.fromURL('toolimg/yellow-stickycard.png', function(img) {
var yellcard = img.scale(1.0).set({ left: 22, top: 15 });
var cardcount = $('#cardcount').text();
var sticky = new fabric.Text('Sticky Card #'+ (cardcount), {
fontSize: 12,
cornerSize: 6
});
var group = new fabric.Group([ sticky, yellcard ], {
left: 150,
top: 100,
cornerSize: 6
});
group.set({
left: left,
top: top,
});
canvas.add(group);
});
}
This is my HTML for the button and the div that shows the count.
<button type="button" class="btn image1 stickycard" id="yellstickycard"><img src="toolimg/yellow-stickycard.png" /></button>
<div id="cardcount">0</div>