Kineticjs Group.setsize(300,300) Not Working

I am trying to change size of kinetic group. but it gives JavaScript error message. in kinetic js document its written than setSize works with group nodes

Solution 1:

I think the documents are a bit outdated in that respect. Groups do not have a drawFunc so they do not have a width or height. If they ever do get width and height, it will be possible to create clipped groups, which will be nice. However, as they are now, groups are simply used to define a relative x and y starting coordinate for objects contained within them. This makes moving several objects at once possible (dragging, moveTo, event handlers, etc...), but that's about it.

JsFiddle as requested

vargroup = new Kinetic.Group({
    x: 220,
    y: 40,
    draggable: true
});

Just make your group draggable and add your objects to the group.

Solution 2:

The code below will allow you to create a group with clipping properties. Instantiate it like a group, where width and height is your clipping box.

Kinetic.Clipper = function(config) {
    this._initGroup(config);
};
Kinetic.Clipper.prototype = {
    _initGroup: function(config) {
        this.nodeType = 'Group';
        Kinetic.Container.call(this, config);
    },
    drawScene: function() {
        if(this.isVisible()) {

            var context = this.getLayer().getContext();
            var width = this.getWidth(), height = this.getHeight();
            context.save();
            context.beginPath();
            context.rect(0, 0, width, height);
            context.clip();

            var children = this.children, len = children.length;
            for(var n = 0; n < len; n++) {
                children[n].drawScene();
            }

            context.restore();
        }
    },
};
Kinetic.Global.extend(Kinetic.Clipper, Kinetic.Container);

Solution 3:

Document is outdated or wrong. It is not possible to directly change group size