fabric-rails 1.0.12.1 → 1.2.1

data/vendor/assets/javascripts/fabric/{object.class.js → shapes/object.class.js}

@@ -6,298 +6,366 @@
       extend = fabric.util.object.extend,
       toFixed = fabric.util.toFixed,
       capitalize = fabric.util.string.capitalize,
-      degreesToRadians = fabric.util.degreesToRadians;
+      degreesToRadians = fabric.util.degreesToRadians,
+      supportsLineDash = fabric.StaticCanvas.supports('setLineDash');
 
   if (fabric.Object) {
     return;
   }
 
-  var Image = global.Image;
-  try {
-    var NodeImage = (typeof require !== 'undefined') && require('canvas').Image;
-    if (NodeImage) {
-      Image = NodeImage;
-    }
-  }
-  catch(err) {
-    fabric.log(err);
-  }
-
   /**
    * Root object class from which all 2d shape classes inherit from
-   * @class Object
-   * @memberOf fabric
+   * @class fabric.Object
    */
-  fabric.Object = fabric.util.createClass(/** @scope fabric.Object.prototype */ {
+  fabric.Object = fabric.util.createClass(/** @lends fabric.Object.prototype */ {
 
     /**
      * Type of an object (rect, circle, path, etc.)
-     * @property
      * @type String
+     * @default
      */
     type:                     'object',
 
     /**
      * Horizontal origin of transformation of an object (one of "left", "right", "center")
-     * @property
      * @type String
+     * @default
      */
     originX:                  'center',
 
     /**
      * Vertical origin of transformation of an object (one of "top", "bottom", "center")
-     * @property
      * @type String
+     * @default
      */
     originY:                  'center',
 
     /**
-     * Top position of an object
-     * @property
+     * Top position of an object. Note that by default it's relative to object center. You can change this by setting originY={top/center/bottom}
      * @type Number
+     * @default
      */
     top:                      0,
 
     /**
-     * Left position of an object
-     * @property
+     * Left position of an object. Note that by default it's relative to object center. You can change this by setting originX={left/center/right}
      * @type Number
+     * @default
      */
     left:                     0,
 
     /**
      * Object width
-     * @property
      * @type Number
+     * @default
      */
     width:                    0,
 
     /**
      * Object height
-     * @property
      * @type Number
+     * @default
      */
     height:                   0,
 
     /**
      * Object scale factor (horizontal)
-     * @property
      * @type Number
+     * @default
      */
     scaleX:                   1,
 
     /**
      * Object scale factor (vertical)
-     * @property
      * @type Number
+     * @default
      */
     scaleY:                   1,
 
     /**
      * When true, an object is rendered as flipped horizontally
-     * @property
      * @type Boolean
+     * @default
      */
     flipX:                    false,
 
     /**
      * When true, an object is rendered as flipped vertically
-     * @property
      * @type Boolean
+     * @default
      */
     flipY:                    false,
 
     /**
      * Opacity of an object
-     * @property
      * @type Number
+     * @default
      */
     opacity:                  1,
 
     /**
      * Angle of rotation of an object (in degrees)
-     * @property
      * @type Number
+     * @default
      */
     angle:                    0,
 
     /**
-     * Size of object's corners (in pixels)
-     * @property
+     * Size of object's controlling corners (in pixels)
      * @type Number
+     * @default
      */
     cornerSize:               12,
 
     /**
-     * When true, object's corners are rendered as transparent inside (i.e. stroke instead of fill)
-     * @property
+     * When true, object's controlling corners are rendered as transparent inside (i.e. stroke instead of fill)
      * @type Boolean
+     * @default
      */
     transparentCorners:       true,
 
     /**
-     * Padding between object and its borders (in pixels)
-     * @property
+     * Padding between object and its controlling borders (in pixels)
      * @type Number
+     * @default
      */
     padding:                  0,
 
     /**
-     * Border color of an object (when it's active)
-     * @property
+     * Color of controlling borders of an object (when it's active)
      * @type String
+     * @default
      */
     borderColor:              'rgba(102,153,255,0.75)',
 
     /**
-     * Corner color of an object (when it's active)
-     * @property
+     * Color of controlling corners of an object (when it's active)
      * @type String
+     * @default
      */
     cornerColor:              'rgba(102,153,255,0.5)',
 
+    /**
+     * When true, this object will use center point as the origin of transformation
+     * when being resized via the controls
+     * @type Boolean
+     */
+    centerTransform:        false,
+
     /**
      * Color of object's fill
-     * @property
      * @type String
+     * @default
      */
     fill:                     'rgb(0,0,0)',
 
     /**
      * Fill rule used to fill an object
-     * @property
      * @type String
+     * @default
      */
     fillRule:                 'source-over',
 
     /**
      * Overlay fill (takes precedence over fill value)
-     * @property
      * @type String
+     * @default
      */
     overlayFill:              null,
 
     /**
-     * When `true`, an object is rendered via stroke and this property specifies its color
-     * @property
+     * When defined, an object is rendered via stroke and this property specifies its color
      * @type String
+     * @default
      */
     stroke:                   null,
 
     /**
      * Width of a stroke used to render this object
-     * @property
      * @type Number
+     * @default
      */
     strokeWidth:              1,
 
     /**
-     * Array specifying dash pattern of an object's stroke
-     * @property
+     * Array specifying dash pattern of an object's stroke (stroke must be defined)
      * @type Array
      */
     strokeDashArray:          null,
 
+    /**
+     * Line endings style of an object's stroke (one of "butt", "round", "square")
+     * @type String
+     * @default
+     */
+    strokeLineCap:            'butt',
+
+    /**
+     * Corner style of an object's stroke (one of "bevil", "round", "miter")
+     * @type String
+     * @default
+     */
+    strokeLineJoin:           'miter',
+
+    /**
+     * Maximum miter length (used for strokeLineJoin = "miter") of an object's stroke
+     * @type Number
+     * @default
+     */
+    strokeMiterLimit:         10,
+
     /**
      * Shadow object representing shadow of this shape
-     * @property
      * @type fabric.Shadow
      */
     shadow:                   null,
 
     /**
-     * Border opacity when object is active and moving
-     * @property
+     * Opacity of object's controlling borders when object is active and moving
      * @type Number
+     * @default
      */
     borderOpacityWhenMoving:  0.4,
 
     /**
-     * Border scale factor
-     * @property
+     * Scale factor of object's controlling borders
      * @type Number
+     * @default
      */
     borderScaleFactor:        1,
 
     /**
      * Transform matrix (similar to SVG's transform matrix)
-     * @property
      * @type Array
      */
     transformMatrix:          null,
 
     /**
      * Minimum allowed scale value of an object
-     * @property
      * @type Number
+     * @default
      */
     minScaleLimit:            0.01,
 
     /**
      * When set to `false`, an object can not be selected for modification (using either point-click-based or group-based selection)
-     * @property
      * @type Boolean
+     * @default
      */
     selectable:               true,
 
+    /**
+     * When set to `false`, an object is not rendered on canvas
+     * @type Boolean
+     * @default
+     */
+    visible:                  true,
+
     /**
      * When set to `false`, object's controls are not displayed and can not be used to manipulate object
-     * @property
      * @type Boolean
+     * @default
      */
     hasControls:              true,
 
     /**
-     * When set to `false`, object's borders are not rendered
-     * @property
+     * When set to `false`, object's controlling borders are not rendered
      * @type Boolean
+     * @default
      */
     hasBorders:               true,
 
     /**
-     * When set to `false`, object's rotating point will not be visible or selectable
-     * @property
+     * When set to `false`, object's controlling rotating point will not be visible or selectable
      * @type Boolean
+     * @default
      */
     hasRotatingPoint:         true,
 
     /**
-     * Offset for object's rotating point (when enabled via `hasRotatingPoint`)
-     * @property
+     * Offset for object's controlling rotating point (when enabled via `hasRotatingPoint`)
      * @type Number
+     * @default
      */
     rotatingPointOffset:      40,
 
     /**
      * When set to `true`, objects are "found" on canvas on per-pixel basis rather than according to bounding box
-     * @property
      * @type Boolean
+     * @default
      */
     perPixelTargetFind:       false,
 
     /**
      * When `false`, default object's values are not included in its serialization
-     * @property
      * @type Boolean
+     * @default
      */
     includeDefaultValues:     true,
 
     /**
-     * List of properties to consider when checking if state of an object is changed (fabric.Object#hasStateChanged);
+     * Function that determines clipping of an object (context is passed as a first argument)
+     * @type Function
+     */
+    clipTo:                   null,
+
+    /**
+     * When `true`, object horizontal movement is locked
+     * @type Boolean
+     * @default
+     */
+    lockMovementX:            false,
+
+    /**
+     * When `true`, object vertical movement is locked
+     * @type Boolean
+     * @default
+     */
+    lockMovementY:            false,
+
+    /**
+     * When `true`, object rotation is locked
+     * @type Boolean
+     * @default
+     */
+    lockRotation:             false,
+
+    /**
+     * When `true`, object horizontal scaling is locked
+     * @type Boolean
+     * @default
+     */
+    lockScalingX:             false,
+
+    /**
+     * When `true`, object vertical scaling is locked
+     * @type Boolean
+     * @default
+     */
+    lockScalingY:             false,
+
+    /**
+     * When `true`, object non-uniform scaling is locked
+     * @type Boolean
+     * @default
+     */
+    lockUniScaling:           false,
+
+    /**
+     * List of properties to consider when checking if state
+     * of an object is changed (fabric.Object#hasStateChanged)
      * as well as for history (undo/redo) purposes
-     * @property
      * @type Array
      */
     stateProperties:  (
       'top left width height scaleX scaleY flipX flipY ' +
       'angle opacity cornerSize fill overlayFill originX originY ' +
       'stroke strokeWidth strokeDashArray fillRule ' +
-      'borderScaleFactor transformMatrix selectable shadow'
+      'borderScaleFactor transformMatrix selectable shadow visible'
     ).split(' '),
 
     /**
      * Constructor
-     * @method initialize
      * @param {Object} [options] Options object
      */
     initialize: function(options) {
@@ -308,7 +376,6 @@
 
     /**
      * @private
-     * @method _initGradient
      */
     _initGradient: function(options) {
       if (options.fill && options.fill.colorStops && !(options.fill instanceof fabric.Gradient)) {
@@ -318,7 +385,6 @@
 
     /**
      * @private
-     * @method _initPattern
      */
     _initPattern: function(options) {
       if (options.fill && options.fill.source && !(options.fill instanceof fabric.Pattern)) {
@@ -331,7 +397,6 @@
 
     /**
      * @private
-     * @method _initShadow
      */
     _initShadow: function(options) {
       if (options.shadow && !(options.shadow instanceof fabric.Shadow)) {
@@ -339,9 +404,20 @@
       }
     },
 
+    /**
+     * @private
+     */
+    _initClipping: function(options) {
+      if (!options.clipTo || typeof options.clipTo !== 'string') return;
+
+      var functionBody = fabric.util.getFunctionBody(options.clipTo);
+      if (typeof functionBody !== 'undefined') {
+        this.clipTo = new Function('ctx', functionBody);
+      }
+    },
+
     /**
      * Sets object's properties from options
-     * @method setOptions
      * @param {Object} [options]
      */
     setOptions: function(options) {
@@ -351,17 +427,18 @@
       this._initGradient(options);
       this._initPattern(options);
       this._initShadow(options);
+      this._initClipping(options);
     },
 
     /**
      * Transforms context when rendering an object
-     * @method transform
      * @param {CanvasRenderingContext2D} ctx Context
+     * @param {Boolean} fromLeft When true, context is transformed to object's top/left corner. This is used when rendering text on Node
      */
-    transform: function(ctx) {
+    transform: function(ctx, fromLeft) {
       ctx.globalAlpha = this.opacity;
 
-      var center = this.getCenterPoint();
+      var center = fromLeft ? this._getLeftTopCoords() : this.getCenterPoint();
       ctx.translate(center.x, center.y);
       ctx.rotate(degreesToRadians(this.angle));
       ctx.scale(
@@ -372,9 +449,8 @@
 
     /**
      * Returns an object representation of an instance
-     * @method toObject
-     * @param {Array} propertiesToInclude
-     * @return {Object} object representation of an instance
+     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
+     * @return {Object} Object representation of an instance
      */
     toObject: function(propertiesToInclude) {
 
@@ -391,8 +467,11 @@
         fill:               (this.fill && this.fill.toObject) ? this.fill.toObject() : this.fill,
         overlayFill:        this.overlayFill,
         stroke:             (this.stroke && this.stroke.toObject) ? this.stroke.toObject() : this.stroke,
-        strokeWidth:        this.strokeWidth,
+        strokeWidth:        toFixed(this.strokeWidth, NUM_FRACTION_DIGITS),
         strokeDashArray:    this.strokeDashArray,
+        strokeLineCap:      this.strokeLineCap,
+        strokeLineJoin:     this.strokeLineJoin,
+        strokeMiterLimit:   toFixed(this.strokeMiterLimit, NUM_FRACTION_DIGITS),
         scaleX:             toFixed(this.scaleX, NUM_FRACTION_DIGITS),
         scaleY:             toFixed(this.scaleY, NUM_FRACTION_DIGITS),
         angle:              toFixed(this.getAngle(), NUM_FRACTION_DIGITS),
@@ -405,7 +484,9 @@
         hasRotatingPoint:   this.hasRotatingPoint,
         transparentCorners: this.transparentCorners,
         perPixelTargetFind: this.perPixelTargetFind,
-        shadow:             (this.shadow && this.shadow.toObject) ? this.shadow.toObject() : this.shadow
+        shadow:             (this.shadow && this.shadow.toObject) ? this.shadow.toObject() : this.shadow,
+        visible:            this.visible,
+        clipTo:             this.clipTo && String(this.clipTo)
       };
 
       if (!this.includeDefaultValues) {
@@ -418,33 +499,35 @@
 
     /**
      * Returns (dataless) object representation of an instance
-     * @method toDatalessObject
-     * @param {Array} [propertiesToInclude]
-     * @return {Object} object representation of an instance
+     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
+     * @return {Object} Object representation of an instance
      */
     toDatalessObject: function(propertiesToInclude) {
       // will be overwritten by subclasses
       return this.toObject(propertiesToInclude);
     },
 
+    /* _TO_SVG_START_ */
     /**
      * Returns styles-string for svg-export
-     * @method getSvgStyles
      * @return {String}
      */
     getSvgStyles: function() {
       return [
         "stroke: ", (this.stroke ? this.stroke : 'none'), "; ",
         "stroke-width: ", (this.strokeWidth ? this.strokeWidth : '0'), "; ",
-        "stroke-dasharray: ", (this.strokeDashArray ? this.strokeDashArray.join(' ') : "; "),
-        "fill: ", (this.fill ? this.fill : 'none'), "; ",
-        "opacity: ", (this.opacity ? this.opacity : '1'), ";"
+        "stroke-dasharray: ", (this.strokeDashArray ? this.strokeDashArray.join(' ') : ''), "; ",
+        "stroke-linecap: ", (this.strokeLineCap ? this.strokeLineCap : 'butt'), "; ",
+        "stroke-linejoin: ", (this.strokeLineJoin ? this.strokeLineJoin : 'miter'), "; ",
+        "stroke-miterlimit: ", (this.strokeMiterLimit ? this.strokeMiterLimit : '4'), "; ",
+        "fill: ", (this.fill ? (this.fill && this.fill.toLive ? 'url(#SVGID_' + this.fill.id + ')' : this.fill) : 'none'), "; ",
+        "opacity: ", (typeof this.opacity !== 'undefined' ? this.opacity : '1'), ";",
+        (this.visible ? '' : " visibility: hidden;")
       ].join("");
     },
 
     /**
      * Returns transform-string for svg-export
-     * @method getSvgTransform
      * @return {String}
      */
     getSvgTransform: function() {
@@ -476,10 +559,11 @@
 
       return [ translatePart, anglePart, scalePart, flipXPart, flipYPart ].join('');
     },
+    /* _TO_SVG_END_ */
 
     /**
      * @private
-     * @method _removeDefaultValues
+     * @param {Object} object
      */
     _removeDefaultValues: function(object) {
       var defaultOptions = fabric.Object.prototype.options;
@@ -493,25 +577,6 @@
       return object;
     },
 
-    /**
-     * Returns true if an object is in its active state
-     * @return {Boolean} true if an object is in its active state
-     */
-    isActive: function() {
-      return !!this.active;
-    },
-
-    /**
-     * Sets state of an object - `true` makes it active, `false` - inactive
-     * @param {Boolean} active
-     * @return {fabric.Object} thisArg
-     * @chainable
-     */
-    setActive: function(active) {
-      this.active = !!active;
-      return this;
-    },
-
     /**
      * Returns a string representation of an instance
      * @return {String}
@@ -522,7 +587,6 @@
 
     /**
      * Basic getter
-     * @method get
      * @param {String} property
      * @return {Any} value of a property
      */
@@ -531,11 +595,10 @@
     },
 
     /**
-     * Sets property to a given value
-     * @method set
-     * @param {String} name
-     * @param {Object|Function} value
-     * @return {fabric.Group} thisArg
+     * Sets property to a given value. When changing position/dimension -related properties (left, top, scale, angle, etc.) `set` does not update position of object's borders/controls. If you need to update those, call `setCoords()`.
+     * @param {String|Object} key (if object, iterate over the object properties)
+     * @param {Object|Function} value (if function, the value is passed into it and its return value is used as a new one)
+     * @return {fabric.Object} thisArg
      * @chainable
      */
     set: function(key, value) {
@@ -545,7 +608,7 @@
         }
       }
       else {
-        if (typeof value === 'function') {
+        if (typeof value === 'function' && key !== 'clipTo') {
           this._set(key, value(this.get(key)));
         }
         else {
@@ -557,9 +620,9 @@
 
     /**
      * @private
-     * @method _set
-     * @param key
-     * @param value
+     * @param {String} key
+     * @param {Any} value
+     * @return {fabric.Object} thisArg
      */
     _set: function(key, value) {
       var shouldConstrainValue = (key === 'scaleX' || key === 'scaleY');
@@ -586,7 +649,6 @@
 
     /**
      * Toggles specified property from `true` to `false` or from `false` to `true`
-     * @method toggle
      * @param {String} property property to toggle
      * @return {fabric.Object} thisArg
      * @chainable
@@ -601,7 +663,6 @@
 
     /**
      * Sets sourcePath of an object
-     * @method setSourcePath
      * @param {String} value
      * @return {fabric.Object} thisArg
      * @chainable
@@ -613,14 +674,12 @@
 
     /**
      * Renders an object on a specified context
-     * @method render
      * @param {CanvasRenderingContext2D} ctx context to render on
-     * @param {Boolean} noTransform
+     * @param {Boolean} [noTransform] When true, context is not transformed
      */
     render: function(ctx, noTransform) {
-
-      // do not render if width or height are zeros
-      if (this.width === 0 || this.height === 0) return;
+      // do not render if width/height are zeros or object is not visible
+      if (this.width === 0 || this.height === 0 || !this.visible) return;
 
       ctx.save();
 
@@ -633,14 +692,14 @@
         this.transform(ctx);
       }
 
-      if (this.stroke || this.strokeDashArray) {
+      if (this.stroke) {
         ctx.lineWidth = this.strokeWidth;
-        if (this.stroke && this.stroke.toLive) {
-          ctx.strokeStyle = this.stroke.toLive(ctx);
-        }
-        else {
-          ctx.strokeStyle = this.stroke;
-        }
+        ctx.lineCap = this.strokeLineCap;
+        ctx.lineJoin = this.strokeLineJoin;
+        ctx.miterLimit = this.strokeMiterLimit;
+        ctx.strokeStyle = this.stroke.toLive
+          ? this.stroke.toLive(ctx)
+          : this.stroke;
       }
 
       if (this.overlayFill) {
@@ -658,7 +717,9 @@
       }
 
       this._setShadow(ctx);
+      this.clipTo && fabric.util.clipContext(this, ctx);
       this._render(ctx, noTransform);
+      this.clipTo && ctx.restore();
       this._removeShadow(ctx);
 
       if (this.active && !noTransform) {
@@ -670,7 +731,7 @@
 
     /**
      * @private
-     * @method _setShadow
+     * @param {CanvasRenderingContext2D} ctx Context to render on
      */
     _setShadow: function(ctx) {
       if (!this.shadow) return;
@@ -683,18 +744,69 @@
 
     /**
      * @private
-     * @method _removeShadow
+     * @param {CanvasRenderingContext2D} ctx Context to render on
      */
     _removeShadow: function(ctx) {
       ctx.shadowColor = '';
       ctx.shadowBlur = ctx.shadowOffsetX = ctx.shadowOffsetY = 0;
     },
 
+    /**
+     * @private
+     * @param {CanvasRenderingContext2D} ctx Context to render on
+     */
+    _renderFill: function(ctx) {
+      if (!this.fill) return;
+
+      if (this.fill.toLive) {
+        ctx.save();
+        ctx.translate(
+          -this.width / 2 + this.fill.offsetX || 0,
+          -this.height / 2 + this.fill.offsetY || 0);
+      }
+      ctx.fill();
+      if (this.fill.toLive) {
+        ctx.restore();
+      }
+      if (this.shadow && !this.shadow.affectStroke) {
+        this._removeShadow(ctx);
+      }
+    },
+
+    /**
+     * @private
+     * @param {CanvasRenderingContext2D} ctx Context to render on
+     */
+    _renderStroke: function(ctx) {
+      if (!this.stroke) return;
+
+      ctx.save();
+      if (this.strokeDashArray) {
+        // Spec requires the concatenation of two copies the dash list when the number of elements is odd
+        if (1 & this.strokeDashArray.length) {
+          this.strokeDashArray.push.apply(this.strokeDashArray, this.strokeDashArray);
+        }
+
+        if (supportsLineDash) {
+          ctx.setLineDash(this.strokeDashArray);
+          this._stroke && this._stroke(ctx);
+        }
+        else {
+          this._renderDashedStroke && this._renderDashedStroke(ctx);
+        }
+        ctx.stroke();
+      }
+      else {
+        this._stroke ? this._stroke(ctx) : ctx.stroke();
+      }
+      this._removeShadow(ctx);
+      ctx.restore();
+    },
+
     /**
      * Clones an instance
-     * @method clone
      * @param {Function} callback Callback is invoked with a clone as a first argument
-     * @param {Array} propertiesToInclude
+     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the outpu
      * @return {fabric.Object} clone of an instance
      */
     clone: function(callback, propertiesToInclude) {
@@ -706,114 +818,68 @@
 
     /**
      * Creates an instance of fabric.Image out of an object
-     * @method cloneAsImage
      * @param callback {Function} callback, invoked with an instance as a first argument
      * @return {fabric.Object} thisArg
-     * @chainable
      */
     cloneAsImage: function(callback) {
-      if (fabric.Image) {
-        var i = new Image();
-
-        /** @ignore */
-        i.onload = function() {
-          if (callback) {
-            callback(new fabric.Image(i), orig);
-          }
-          i = i.onload = null;
-        };
-
-        var orig = {
-          angle: this.get('angle'),
-          flipX: this.get('flipX'),
-          flipY: this.get('flipY')
-        };
-
-        // normalize angle
-        this.set('angle', 0).set('flipX', false).set('flipY', false);
-        this.toDataURL(function(dataURL) {
-          i.src = dataURL;
-        });
-      }
+      var dataUrl = this.toDataURL();
+      fabric.util.loadImage(dataUrl, function(img) {
+        if (callback) {
+          callback(new fabric.Image(img));
+        }
+      });
       return this;
     },
 
     /**
      * Converts an object into a data-url-like string
-     * @method toDataURL
-     * @param callback {Function} callback that recieves resulting data-url string
+     * @param {Object} options Options object
+     *
+     *  `format` the format of the output image. Either "jpeg" or "png".
+     *  `quality` quality level (0..1)
+     *  `multiplier` multiplier to scale by {Number}
+     *
+     * @return {String} data url representing an image of this object
      */
-    toDataURL: function(callback) {
-      var el = fabric.util.createCanvasElement();
+    toDataURL: function(options) {
+      options || (options = { });
 
+      var el = fabric.util.createCanvasElement();
       el.width = this.getBoundingRectWidth();
       el.height = this.getBoundingRectHeight();
 
       fabric.util.wrapElement(el, 'div');
 
       var canvas = new fabric.Canvas(el);
-      canvas.backgroundColor = 'transparent';
-      canvas.renderAll();
-
-      if (this.constructor.async) {
-        this.clone(proceed);
+      if (options.format === 'jpeg') {
+        canvas.backgroundColor = '#fff';
       }
-      else {
-        proceed(this.clone());
-      }
-
-      function proceed(clone) {
-        clone.left = el.width / 2;
-        clone.top = el.height / 2;
 
-        clone.setActive(false);
+      var origParams = {
+        active: this.get('active'),
+        left: this.getLeft(),
+        top: this.getTop()
+      };
 
-        canvas.add(clone);
-        var data = canvas.toDataURL('png');
+      this.set({
+        'active': false,
+        left: el.width / 2,
+        top: el.height / 2
+      });
 
-        canvas.dispose();
-        canvas = clone = null;
+      canvas.add(this);
+      var data = canvas.toDataURL(options);
 
-        callback && callback(data);
-      }
-    },
-
-    /**
-     * Returns true if object state (one of its state properties) was changed
-     * @method hasStateChanged
-     * @return {Boolean} true if instance' state has changed
-     */
-    hasStateChanged: function() {
-      return this.stateProperties.some(function(prop) {
-        return this[prop] !== this.originalState[prop];
-      }, this);
-    },
+      this.set(origParams).setCoords();
 
-    /**
-     * Saves state of an object
-     * @method saveState
-     * @return {fabric.Object} thisArg
-     * @chainable
-     */
-    saveState: function() {
-      this.stateProperties.forEach(function(prop) {
-        this.originalState[prop] = this.get(prop);
-      }, this);
-      return this;
-    },
+      canvas.dispose();
+      canvas = null;
 
-    /**
-     * Setups state of an object
-     * @method setupState
-     */
-    setupState: function() {
-      this.originalState = { };
-      this.saveState();
+      return data;
     },
 
     /**
      * Returns true if specified type is identical to the type of an instance
-     * @method isType
      * @param type {String} type to check against
      * @return {Boolean}
      */
@@ -823,7 +889,6 @@
 
     /**
      * Makes object's color grayscale
-     * @method toGrayscale
      * @return {fabric.Object} thisArg
      */
     toGrayscale: function() {
@@ -836,8 +901,7 @@
 
     /**
      * Returns complexity of an instance
-     * @method complexity
-     * @return {Number} complexity
+     * @return {Number} complexity of this instance
      */
     complexity: function() {
       return 0;
@@ -845,9 +909,8 @@
 
     /**
      * Returns a JSON representation of an instance
-     * @method toJSON
-     * @param {Array} propertiesToInclude
-     * @return {String} json
+     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
+     * @return {Object} JSON
      */
     toJSON: function(propertiesToInclude) {
       // delegate, not alias
@@ -855,32 +918,62 @@
     },
 
     /**
-     * Sets gradient fill of an object
-     * @method setGradientFill
+     * Sets gradient (fill or stroke) of an object
+     * @param {String} property Property name 'stroke' or 'fill'
+     * @param {Object} [options] Options object
      */
-    setGradientFill: function(options) {
-      this.set('fill', fabric.Gradient.forObject(this, options));
+    setGradient: function(property, options) {
+      options || (options = { });
+
+      var gradient = {colorStops: []};
+
+      gradient.type = options.type || (options.r1 || options.r2 ? 'radial' : 'linear');
+      gradient.coords = {
+        x1: options.x1,
+        y1: options.y1,
+        x2: options.x2,
+        y2: options.y2
+      };
+
+      if (options.r1 || options.r2) {
+        gradient.coords.r1 = options.r1;
+        gradient.coords.r2 = options.r2;
+      }
+
+      for (var position in options.colorStops) {
+        var color = new fabric.Color(options.colorStops[position]);
+        gradient.colorStops.push({offset: position, color: color.toRgb(), opacity: color.getAlpha()});
+      }
+
+      this.set(property, fabric.Gradient.forObject(this, gradient));
     },
 
     /**
      * Sets pattern fill of an object
-     * @method setPatternFill
+     * @param {Object} [options] Options object
+     * @return {fabric.Object} thisArg
+     * @chainable
      */
     setPatternFill: function(options) {
-      this.set('fill', new fabric.Pattern(options));
+      return this.set('fill', new fabric.Pattern(options));
     },
 
     /**
      * Sets shadow of an object
-     * @method setShadow
+     * @param {Object} [options] Options object
+     * @return {fabric.Object} thisArg
+     * @chainable
      */
     setShadow: function(options) {
-      this.set('shadow', new fabric.Shadow(options));
+      return this.set('shadow', new fabric.Shadow(options));
     },
 
     /**
      * Animates object's properties
-     * @method animate
+     * @param {String|Object} property to animate (if string) or properties to animate (if object)
+     * @param {Number|Object} value to animate property to (if string was given first) or options object
+     * @return {fabric.Object} thisArg
+     * @chainable
      *
      * As object — multiple properties
      *
@@ -895,8 +988,14 @@
      */
     animate: function() {
       if (arguments[0] && typeof arguments[0] === 'object') {
-        for (var prop in arguments[0]) {
-          this._animate(prop, arguments[0][prop], arguments[1]);
+        var propsToAnimate = [ ], prop, skipCallbacks;
+        for (prop in arguments[0]) {
+          propsToAnimate.push(prop);
+        }
+        for (var i = 0, len = propsToAnimate.length; i<len; i++) {
+          prop = propsToAnimate[i];
+          skipCallbacks = i !== len - 1;
+          this._animate(prop, arguments[0][prop], arguments[1], skipCallbacks);
         }
       }
       else {
@@ -907,9 +1006,12 @@
 
     /**
      * @private
-     * @method _animate
+     * @param {String} property
+     * @param {String} to
+     * @param {Object} [options]
+     * @param {Boolean} [skipCallbacks]
      */
-    _animate: function(property, to, options) {
+    _animate: function(property, to, options, skipCallbacks) {
       var obj = this, propPair;
 
       to = to.toString();
@@ -953,9 +1055,12 @@
           else {
             obj.set(property, value);
           }
+          if (skipCallbacks) return;
           options.onChange && options.onChange();
         },
         onComplete: function() {
+          if (skipCallbacks) return;
+
           obj.setCoords();
           options.onComplete && options.onComplete();
         }
@@ -964,7 +1069,6 @@
 
     /**
      * Centers object horizontally on canvas to which it was added last
-     * @method centerH
      * @return {fabric.Object} thisArg
      */
     centerH: function () {
@@ -974,7 +1078,6 @@
 
     /**
      * Centers object vertically on canvas to which it was added last
-     * @method centerV
      * @return {fabric.Object} thisArg
      * @chainable
      */
@@ -985,7 +1088,6 @@
 
     /**
      * Centers object vertically and horizontally on canvas to which is was added last
-     * @method center
      * @return {fabric.Object} thisArg
      * @chainable
      */
@@ -995,7 +1097,6 @@
 
     /**
      * Removes object from canvas to which it was added last
-     * @method remove
      * @return {fabric.Object} thisArg
      * @chainable
      */
@@ -1005,45 +1106,79 @@
 
     /**
      * Moves an object to the bottom of the stack of drawn objects
-     * @method sendToBack
      * @return {fabric.Object} thisArg
      * @chainable
      */
     sendToBack: function() {
-      this.canvas.sendToBack(this);
+      if (this.group) {
+        fabric.StaticCanvas.prototype.sendToBack.call(this.group, this);
+      }
+      else {
+        this.canvas.sendToBack(this);
+      }
       return this;
     },
 
     /**
      * Moves an object to the top of the stack of drawn objects
-     * @method bringToFront
      * @return {fabric.Object} thisArg
      * @chainable
      */
     bringToFront: function() {
-      this.canvas.bringToFront(this);
+      if (this.group) {
+        fabric.StaticCanvas.prototype.bringToFront.call(this.group, this);
+      }
+      else {
+        this.canvas.bringToFront(this);
+      }
+      return this;
+    },
+
+    /**
+     * Moves an object down in stack of drawn objects
+     * @param intersecting {Boolean} If `true`, send object behind next lower intersecting object
+     * @return {fabric.Object} thisArg
+     * @chainable
+     */
+    sendBackwards: function(intersecting) {
+      if (this.group) {
+        fabric.StaticCanvas.prototype.sendBackwards.call(this.group, this, intersecting);
+      }
+      else {
+        this.canvas.sendBackwards(this, intersecting);
+      }
       return this;
     },
 
     /**
-     * Moves an object one level down in stack of drawn objects
-     * @method sendBackwards
+     * Moves an object up in stack of drawn objects
+     * @param intersecting {Boolean} If `true`, send object in front of next upper intersecting object
      * @return {fabric.Object} thisArg
      * @chainable
      */
-    sendBackwards: function() {
-      this.canvas.sendBackwards(this);
+    bringForward: function(intersecting) {
+      if (this.group) {
+        fabric.StaticCanvas.prototype.bringForward.call(this.group, this, intersecting);
+      }
+      else {
+        this.canvas.bringForward(this, intersecting);
+      }
       return this;
     },
 
     /**
-     * Moves an object one level up in stack of drawn objects
-     * @method bringForward
+     * Moves an object to specified level in stack of drawn objects
+     * @param {Number} index New position of object
      * @return {fabric.Object} thisArg
      * @chainable
      */
-    bringForward: function() {
-      this.canvas.bringForward(this);
+    moveTo: function(index) {
+      if (this.group) {
+        fabric.StaticCanvas.prototype.moveTo.call(this.group, this, index);
+      }
+      else {
+        this.canvas.moveTo(this, index);
+      }
       return this;
     }
   });
@@ -1059,10 +1194,17 @@
   extend(fabric.Object.prototype, fabric.Observable);
 
   /**
+   * Defines the number of fraction digits when serializing object values. You can use it to increase/decrease precision of such values like left, top, scaleX, scaleY, etc.
    * @static
    * @constant
    * @type Number
    */
   fabric.Object.NUM_FRACTION_DIGITS = 2;
 
+  /**
+   * @static
+   * @type Number
+   */
+  fabric.Object.__uid = 0;
+
 })(typeof exports !== 'undefined' ? exports : this);