Subversion-Projekte lars-tiefland.ci

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
776 lars 1 
/* build: `node build.js modules=ALL exclude=json,gestures minifier=uglifyjs` */
2 
/*! Fabric.js Copyright 2008-2015, Printio (Juriy Zaytsev, Maxim Chernyak) */
3 
 
4 
var fabric = fabric || { version: "1.5.0" };
5 
if (typeof exports !== 'undefined') {
6 
  exports.fabric = fabric;
7 
}
8 
 
9 
if (typeof document !== 'undefined' && typeof window !== 'undefined') {
10 
  fabric.document = document;
11 
  fabric.window = window;
12 
  // ensure globality even if entire library were function wrapped (as in Meteor.js packaging system)
13 
  window.fabric = fabric;
14 
}
15 
else {
16 
  // assume we're running under node.js when document/window are not present
17 
  fabric.document = require("jsdom")
18 
    .jsdom("<!DOCTYPE html><html><head></head><body></body></html>");
19 
 
20 
  if (fabric.document.createWindow) {
21 
    fabric.window = fabric.document.createWindow();
22 
  } else {
23 
    fabric.window = fabric.document.parentWindow;
24 
  }
25 
}
26 
 
27 
/**
28 
 * True when in environment that supports touch events
29 
 * @type boolean
30 
 */
31 
fabric.isTouchSupported = "ontouchstart" in fabric.document.documentElement;
32 
 
33 
/**
34 
 * True when in environment that's probably Node.js
35 
 * @type boolean
36 
 */
37 
fabric.isLikelyNode = typeof Buffer !== 'undefined' &&
38 
                      typeof window === 'undefined';
39 
 
40 
/* _FROM_SVG_START_ */
41 
/**
42 
 * Attributes parsed from all SVG elements
43 
 * @type array
44 
 */
45 
fabric.SHARED_ATTRIBUTES = [
46 
  "display",
47 
  "transform",
48 
  "fill", "fill-opacity", "fill-rule",
49 
  "opacity",
50 
  "stroke", "stroke-dasharray", "stroke-linecap",
51 
  "stroke-linejoin", "stroke-miterlimit",
52 
  "stroke-opacity", "stroke-width"
53 
];
54 
/* _FROM_SVG_END_ */
55 
 
56 
/**
57 
 * Pixel per Inch as a default value set to 96. Can be changed for more realistic conversion.
58 
 */
59 
fabric.DPI = 96;
60 
fabric.reNum = '(?:[-+]?(?:\\d+|\\d*\\.\\d+)(?:e[-+]?\\d+)?)';
61 
 
62 
 
63 
(function() {
64 
 
65 
  /**
66 
   * @private
67 
   * @param {String} eventName
68 
   * @param {Function} handler
69 
   */
70 
  function _removeEventListener(eventName, handler) {
71 
    if (!this.__eventListeners[eventName]) {
72 
      return;
73 
    }
74 
 
75 
    if (handler) {
76 
      fabric.util.removeFromArray(this.__eventListeners[eventName], handler);
77 
    }
78 
    else {
79 
      this.__eventListeners[eventName].length = 0;
80 
    }
81 
  }
82 
 
83 
  /**
84 
   * Observes specified event
85 
   * @deprecated `observe` deprecated since 0.8.34 (use `on` instead)
86 
   * @memberOf fabric.Observable
87 
   * @alias on
88 
   * @param {String|Object} eventName Event name (eg. 'after:render') or object with key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler})
89 
   * @param {Function} handler Function that receives a notification when an event of the specified type occurs
90 
   * @return {Self} thisArg
91 
   * @chainable
92 
   */
93 
  function observe(eventName, handler) {
94 
    if (!this.__eventListeners) {
95 
      this.__eventListeners = { };
96 
    }
97 
    // one object with key/value pairs was passed
98 
    if (arguments.length === 1) {
99 
      for (var prop in eventName) {
100 
        this.on(prop, eventName[prop]);
101 
      }
102 
    }
103 
    else {
104 
      if (!this.__eventListeners[eventName]) {
105 
        this.__eventListeners[eventName] = [ ];
106 
      }
107 
      this.__eventListeners[eventName].push(handler);
108 
    }
109 
    return this;
110 
  }
111 
 
112 
  /**
113 
   * Stops event observing for a particular event handler. Calling this method
114 
   * without arguments removes all handlers for all events
115 
   * @deprecated `stopObserving` deprecated since 0.8.34 (use `off` instead)
116 
   * @memberOf fabric.Observable
117 
   * @alias off
118 
   * @param {String|Object} eventName Event name (eg. 'after:render') or object with key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler})
119 
   * @param {Function} handler Function to be deleted from EventListeners
120 
   * @return {Self} thisArg
121 
   * @chainable
122 
   */
123 
  function stopObserving(eventName, handler) {
124 
    if (!this.__eventListeners) {
125 
      return;
126 
    }
127 
 
128 
    // remove all key/value pairs (event name -> event handler)
129 
    if (arguments.length === 0) {
130 
      this.__eventListeners = { };
131 
    }
132 
    // one object with key/value pairs was passed
133 
    else if (arguments.length === 1 && typeof arguments[0] === 'object') {
134 
      for (var prop in eventName) {
135 
        _removeEventListener.call(this, prop, eventName[prop]);
136 
      }
137 
    }
138 
    else {
139 
      _removeEventListener.call(this, eventName, handler);
140 
    }
141 
    return this;
142 
  }
143 
 
144 
  /**
145 
   * Fires event with an optional options object
146 
   * @deprecated `fire` deprecated since 1.0.7 (use `trigger` instead)
147 
   * @memberOf fabric.Observable
148 
   * @alias trigger
149 
   * @param {String} eventName Event name to fire
150 
   * @param {Object} [options] Options object
151 
   * @return {Self} thisArg
152 
   * @chainable
153 
   */
154 
  function fire(eventName, options) {
155 
    if (!this.__eventListeners) {
156 
      return;
157 
    }
158 
 
159 
    var listenersForEvent = this.__eventListeners[eventName];
160 
    if (!listenersForEvent) {
161 
      return;
162 
    }
163 
 
164 
    for (var i = 0, len = listenersForEvent.length; i < len; i++) {
165 
      // avoiding try/catch for perf. reasons
166 
      listenersForEvent[i].call(this, options || { });
167 
    }
168 
    return this;
169 
  }
170 
 
171 
  /**
172 
   * @namespace fabric.Observable
173 
   * @tutorial {@link http://fabricjs.com/fabric-intro-part-2/#events}
174 
   * @see {@link http://fabricjs.com/events/|Events demo}
175 
   */
176 
  fabric.Observable = {
177 
    observe: observe,
178 
    stopObserving: stopObserving,
179 
    fire: fire,
180 
 
181 
    on: observe,
182 
    off: stopObserving,
183 
    trigger: fire
184 
  };
185 
})();
186 
 
187 
 
188 
/**
189 
 * @namespace fabric.Collection
190 
 */
191 
fabric.Collection = {
192 
 
193 
  /**
194 
   * Adds objects to collection, then renders canvas (if `renderOnAddRemove` is not `false`)
195 
   * Objects should be instances of (or inherit from) fabric.Object
196 
   * @param {...fabric.Object} object Zero or more fabric instances
197 
   * @return {Self} thisArg
198 
   */
199 
  add: function () {
200 
    this._objects.push.apply(this._objects, arguments);
201 
    for (var i = 0, length = arguments.length; i < length; i++) {
202 
      this._onObjectAdded(arguments[i]);
203 
    }
204 
    this.renderOnAddRemove && this.renderAll();
205 
    return this;
206 
  },
207 
 
208 
  /**
209 
   * Inserts an object into collection at specified index, then renders canvas (if `renderOnAddRemove` is not `false`)
210 
   * An object should be an instance of (or inherit from) fabric.Object
211 
   * @param {Object} object Object to insert
212 
   * @param {Number} index Index to insert object at
213 
   * @param {Boolean} nonSplicing When `true`, no splicing (shifting) of objects occurs
214 
   * @return {Self} thisArg
215 
   * @chainable
216 
   */
217 
  insertAt: function (object, index, nonSplicing) {
218 
    var objects = this.getObjects();
219 
    if (nonSplicing) {
220 
      objects[index] = object;
221 
    }
222 
    else {
223 
      objects.splice(index, 0, object);
224 
    }
225 
    this._onObjectAdded(object);
226 
    this.renderOnAddRemove && this.renderAll();
227 
    return this;
228 
  },
229 
 
230 
  /**
231 
   * Removes objects from a collection, then renders canvas (if `renderOnAddRemove` is not `false`)
232 
   * @param {...fabric.Object} object Zero or more fabric instances
233 
   * @return {Self} thisArg
234 
   * @chainable
235 
   */
236 
  remove: function() {
237 
    var objects = this.getObjects(),
238 
        index;
239 
 
240 
    for (var i = 0, length = arguments.length; i < length; i++) {
241 
      index = objects.indexOf(arguments[i]);
242 
 
243 
      // only call onObjectRemoved if an object was actually removed
244 
      if (index !== -1) {
245 
        objects.splice(index, 1);
246 
        this._onObjectRemoved(arguments[i]);
247 
      }
248 
    }
249 
 
250 
    this.renderOnAddRemove && this.renderAll();
251 
    return this;
252 
  },
253 
 
254 
  /**
255 
   * Executes given function for each object in this group
256 
   * @param {Function} callback
257 
   *                   Callback invoked with current object as first argument,
258 
   *                   index - as second and an array of all objects - as third.
259 
   *                   Iteration happens in reverse order (for performance reasons).
260 
   *                   Callback is invoked in a context of Global Object (e.g. `window`)
261 
   *                   when no `context` argument is given
262 
   *
263 
   * @param {Object} context Context (aka thisObject)
264 
   * @return {Self} thisArg
265 
   */
266 
  forEachObject: function(callback, context) {
267 
    var objects = this.getObjects(),
268 
        i = objects.length;
269 
    while (i--) {
270 
      callback.call(context, objects[i], i, objects);
271 
    }
272 
    return this;
273 
  },
274 
 
275 
  /**
276 
   * Returns an array of children objects of this instance
277 
   * Type parameter introduced in 1.3.10
278 
   * @param {String} [type] When specified, only objects of this type are returned
279 
   * @return {Array}
280 
   */
281 
  getObjects: function(type) {
282 
    if (typeof type === 'undefined') {
283 
      return this._objects;
284 
    }
285 
    return this._objects.filter(function(o) {
286 
      return o.type === type;
287 
    });
288 
  },
289 
 
290 
  /**
291 
   * Returns object at specified index
292 
   * @param {Number} index
293 
   * @return {Self} thisArg
294 
   */
295 
  item: function (index) {
296 
    return this.getObjects()[index];
297 
  },
298 
 
299 
  /**
300 
   * Returns true if collection contains no objects
301 
   * @return {Boolean} true if collection is empty
302 
   */
303 
  isEmpty: function () {
304 
    return this.getObjects().length === 0;
305 
  },
306 
 
307 
  /**
308 
   * Returns a size of a collection (i.e: length of an array containing its objects)
309 
   * @return {Number} Collection size
310 
   */
311 
  size: function() {
312 
    return this.getObjects().length;
313 
  },
314 
 
315 
  /**
316 
   * Returns true if collection contains an object
317 
   * @param {Object} object Object to check against
318 
   * @return {Boolean} `true` if collection contains an object
319 
   */
320 
  contains: function(object) {
321 
    return this.getObjects().indexOf(object) > -1;
322 
  },
323 
 
324 
  /**
325 
   * Returns number representation of a collection complexity
326 
   * @return {Number} complexity
327 
   */
328 
  complexity: function () {
329 
    return this.getObjects().reduce(function (memo, current) {
330 
      memo += current.complexity ? current.complexity() : 0;
331 
      return memo;
332 
    }, 0);
333 
  }
334 
};
335 
 
336 
 
337 
(function(global) {
338 
 
339 
  var sqrt = Math.sqrt,
340 
      atan2 = Math.atan2,
341 
      PiBy180 = Math.PI / 180;
342 
 
343 
  /**
344 
   * @namespace fabric.util
345 
   */
346 
  fabric.util = {
347 
 
348 
    /**
349 
     * Removes value from an array.
350 
     * Presence of value (and its position in an array) is determined via `Array.prototype.indexOf`
351 
     * @static
352 
     * @memberOf fabric.util
353 
     * @param {Array} array
354 
     * @param {Any} value
355 
     * @return {Array} original array
356 
     */
357 
    removeFromArray: function(array, value) {
358 
      var idx = array.indexOf(value);
359 
      if (idx !== -1) {
360 
        array.splice(idx, 1);
361 
      }
362 
      return array;
363 
    },
364 
 
365 
    /**
366 
     * Returns random number between 2 specified ones.
367 
     * @static
368 
     * @memberOf fabric.util
369 
     * @param {Number} min lower limit
370 
     * @param {Number} max upper limit
371 
     * @return {Number} random value (between min and max)
372 
     */
373 
    getRandomInt: function(min, max) {
374 
      return Math.floor(Math.random() * (max - min + 1)) + min;
375 
    },
376 
 
377 
    /**
378 
     * Transforms degrees to radians.
379 
     * @static
380 
     * @memberOf fabric.util
381 
     * @param {Number} degrees value in degrees
382 
     * @return {Number} value in radians
383 
     */
384 
    degreesToRadians: function(degrees) {
385 
      return degrees * PiBy180;
386 
    },
387 
 
388 
    /**
389 
     * Transforms radians to degrees.
390 
     * @static
391 
     * @memberOf fabric.util
392 
     * @param {Number} radians value in radians
393 
     * @return {Number} value in degrees
394 
     */
395 
    radiansToDegrees: function(radians) {
396 
      return radians / PiBy180;
397 
    },
398 
 
399 
    /**
400 
     * Rotates `point` around `origin` with `radians`
401 
     * @static
402 
     * @memberOf fabric.util
403 
     * @param {fabric.Point} point The point to rotate
404 
     * @param {fabric.Point} origin The origin of the rotation
405 
     * @param {Number} radians The radians of the angle for the rotation
406 
     * @return {fabric.Point} The new rotated point
407 
     */
408 
    rotatePoint: function(point, origin, radians) {
409 
      var sin = Math.sin(radians),
410 
          cos = Math.cos(radians);
411 
 
412 
      point.subtractEquals(origin);
413 
 
414 
      var rx = point.x * cos - point.y * sin,
415 
          ry = point.x * sin + point.y * cos;
416 
 
417 
      return new fabric.Point(rx, ry).addEquals(origin);
418 
    },
419 
 
420 
    /**
421 
     * Apply transform t to point p
422 
     * @static
423 
     * @memberOf fabric.util
424 
     * @param  {fabric.Point} p The point to transform
425 
     * @param  {Array} t The transform
426 
     * @param  {Boolean} [ignoreOffset] Indicates that the offset should not be applied
427 
     * @return {fabric.Point} The transformed point
428 
     */
429 
    transformPoint: function(p, t, ignoreOffset) {
430 
      if (ignoreOffset) {
431 
        return new fabric.Point(
432 
          t[0] * p.x + t[2] * p.y,
433 
          t[1] * p.x + t[3] * p.y
434 
        );
435 
      }
436 
      return new fabric.Point(
437 
        t[0] * p.x + t[2] * p.y + t[4],
438 
        t[1] * p.x + t[3] * p.y + t[5]
439 
      );
440 
    },
441 
 
442 
    /**
443 
     * Invert transformation t
444 
     * @static
445 
     * @memberOf fabric.util
446 
     * @param {Array} t The transform
447 
     * @return {Array} The inverted transform
448 
     */
449 
    invertTransform: function(t) {
450 
      var r = t.slice(),
451 
          a = 1 / (t[0] * t[3] - t[1] * t[2]);
452 
      r = [a * t[3], -a * t[1], -a * t[2], a * t[0], 0, 0];
453 
      var o = fabric.util.transformPoint({ x: t[4], y: t[5] }, r);
454 
      r[4] = -o.x;
455 
      r[5] = -o.y;
456 
      return r;
457 
    },
458 
 
459 
    /**
460 
     * A wrapper around Number#toFixed, which contrary to native method returns number, not string.
461 
     * @static
462 
     * @memberOf fabric.util
463 
     * @param {Number|String} number number to operate on
464 
     * @param {Number} fractionDigits number of fraction digits to "leave"
465 
     * @return {Number}
466 
     */
467 
    toFixed: function(number, fractionDigits) {
468 
      return parseFloat(Number(number).toFixed(fractionDigits));
469 
    },
470 
 
471 
    /**
472 
     * Converts from attribute value to pixel value if applicable.
473 
     * Returns converted pixels or original value not converted.
474 
     * @param {Number|String} value number to operate on
475 
     * @return {Number|String}
476 
     */
477 
    parseUnit: function(value, fontSize) {
478 
      var unit = /\D{0,2}$/.exec(value),
479 
          number = parseFloat(value);
480 
      if (!fontSize) {
481 
        fontSize = fabric.Text.DEFAULT_SVG_FONT_SIZE;
482 
      }
483 
      switch (unit[0]) {
484 
        case 'mm':
485 
          return number * fabric.DPI / 25.4;
486 
 
487 
        case 'cm':
488 
          return number * fabric.DPI / 2.54;
489 
 
490 
        case 'in':
491 
          return number * fabric.DPI;
492 
 
493 
        case 'pt':
494 
          return number * fabric.DPI / 72; // or * 4 / 3
495 
 
496 
        case 'pc':
497 
          return number * fabric.DPI / 72 * 12; // or * 16
498 
 
499 
        case 'em':
500 
          return number * fontSize;
501 
 
502 
        default:
503 
          return number;
504 
      }
505 
    },
506 
 
507 
    /**
508 
     * Function which always returns `false`.
509 
     * @static
510 
     * @memberOf fabric.util
511 
     * @return {Boolean}
512 
     */
513 
    falseFunction: function() {
514 
      return false;
515 
    },
516 
 
517 
    /**
518 
      * Returns klass "Class" object of given namespace
519 
      * @memberOf fabric.util
520 
      * @param {String} type Type of object (eg. 'circle')
521 
      * @param {String} namespace Namespace to get klass "Class" object from
522 
      * @return {Object} klass "Class"
523 
      */
524 
    getKlass: function(type, namespace) {
525 
      // capitalize first letter only
526 
      type = fabric.util.string.camelize(type.charAt(0).toUpperCase() + type.slice(1));
527 
      return fabric.util.resolveNamespace(namespace)[type];
528 
    },
529 
 
530 
    /**
531 
     * Returns object of given namespace
532 
     * @memberOf fabric.util
533 
     * @param {String} namespace Namespace string e.g. 'fabric.Image.filter' or 'fabric'
534 
     * @return {Object} Object for given namespace (default fabric)
535 
     */
536 
    resolveNamespace: function(namespace) {
537 
      if (!namespace) {
538 
        return fabric;
539 
      }
540 
 
541 
      var parts = namespace.split('.'),
542 
          len = parts.length,
543 
          obj = global || fabric.window;
544 
 
545 
      for (var i = 0; i < len; ++i) {
546 
        obj = obj[parts[i]];
547 
      }
548 
 
549 
      return obj;
550 
    },
551 
 
552 
    /**
553 
     * Loads image element from given url and passes it to a callback
554 
     * @memberOf fabric.util
555 
     * @param {String} url URL representing an image
556 
     * @param {Function} callback Callback; invoked with loaded image
557 
     * @param {Any} [context] Context to invoke callback in
558 
     * @param {Object} [crossOrigin] crossOrigin value to set image element to
559 
     */
560 
    loadImage: function(url, callback, context, crossOrigin) {
561 
      if (!url) {
562 
        callback && callback.call(context, url);
563 
        return;
564 
      }
565 
 
566 
      var img = fabric.util.createImage();
567 
 
568 
      /** @ignore */
569 
      img.onload = function () {
570 
        callback && callback.call(context, img);
571 
        img = img.onload = img.onerror = null;
572 
      };
573 
 
574 
      /** @ignore */
575 
      img.onerror = function() {
576 
        fabric.log('Error loading ' + img.src);
577 
        callback && callback.call(context, null, true);
578 
        img = img.onload = img.onerror = null;
579 
      };
580 
 
581 
      // data-urls appear to be buggy with crossOrigin
582 
      // https://github.com/kangax/fabric.js/commit/d0abb90f1cd5c5ef9d2a94d3fb21a22330da3e0a#commitcomment-4513767
583 
      // see https://code.google.com/p/chromium/issues/detail?id=315152
584 
      //     https://bugzilla.mozilla.org/show_bug.cgi?id=935069
585 
      if (url.indexOf('data') !== 0 && typeof crossOrigin !== 'undefined') {
586 
        img.crossOrigin = crossOrigin;
587 
      }
588 
 
589 
      img.src = url;
590 
    },
591 
 
592 
    /**
593 
     * Creates corresponding fabric instances from their object representations
594 
     * @static
595 
     * @memberOf fabric.util
596 
     * @param {Array} objects Objects to enliven
597 
     * @param {Function} callback Callback to invoke when all objects are created
598 
     * @param {String} namespace Namespace to get klass "Class" object from
599 
     * @param {Function} reviver Method for further parsing of object elements,
600 
     * called after each fabric object created.
601 
     */
602 
    enlivenObjects: function(objects, callback, namespace, reviver) {
603 
      objects = objects || [ ];
604 
 
605 
      function onLoaded() {
606 
        if (++numLoadedObjects === numTotalObjects) {
607 
          callback && callback(enlivenedObjects);
608 
        }
609 
      }
610 
 
611 
      var enlivenedObjects = [ ],
612 
          numLoadedObjects = 0,
613 
          numTotalObjects = objects.length;
614 
 
615 
      if (!numTotalObjects) {
616 
        callback && callback(enlivenedObjects);
617 
        return;
618 
      }
619 
 
620 
      objects.forEach(function (o, index) {
621 
        // if sparse array
622 
        if (!o || !o.type) {
623 
          onLoaded();
624 
          return;
625 
        }
626 
        var klass = fabric.util.getKlass(o.type, namespace);
627 
        if (klass.async) {
628 
          klass.fromObject(o, function (obj, error) {
629 
            if (!error) {
630 
              enlivenedObjects[index] = obj;
631 
              reviver && reviver(o, enlivenedObjects[index]);
632 
            }
633 
            onLoaded();
634 
          });
635 
        }
636 
        else {
637 
          enlivenedObjects[index] = klass.fromObject(o);
638 
          reviver && reviver(o, enlivenedObjects[index]);
639 
          onLoaded();
640 
        }
641 
      });
642 
    },
643 
 
644 
    /**
645 
     * Groups SVG elements (usually those retrieved from SVG document)
646 
     * @static
647 
     * @memberOf fabric.util
648 
     * @param {Array} elements SVG elements to group
649 
     * @param {Object} [options] Options object
650 
     * @return {fabric.Object|fabric.PathGroup}
651 
     */
652 
    groupSVGElements: function(elements, options, path) {
653 
      var object;
654 
 
655 
      object = new fabric.PathGroup(elements, options);
656 
 
657 
      if (typeof path !== 'undefined') {
658 
        object.setSourcePath(path);
659 
      }
660 
      return object;
661 
    },
662 
 
663 
    /**
664 
     * Populates an object with properties of another object
665 
     * @static
666 
     * @memberOf fabric.util
667 
     * @param {Object} source Source object
668 
     * @param {Object} destination Destination object
669 
     * @return {Array} properties Propertie names to include
670 
     */
671 
    populateWithProperties: function(source, destination, properties) {
672 
      if (properties && Object.prototype.toString.call(properties) === '[object Array]') {
673 
        for (var i = 0, len = properties.length; i < len; i++) {
674 
          if (properties[i] in source) {
675 
            destination[properties[i]] = source[properties[i]];
676 
          }
677 
        }
678 
      }
679 
    },
680 
 
681 
    /**
682 
     * Draws a dashed line between two points
683 
     *
684 
     * This method is used to draw dashed line around selection area.
685 
     * See <a href="http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas">dotted stroke in canvas</a>
686 
     *
687 
     * @param {CanvasRenderingContext2D} ctx context
688 
     * @param {Number} x  start x coordinate
689 
     * @param {Number} y start y coordinate
690 
     * @param {Number} x2 end x coordinate
691 
     * @param {Number} y2 end y coordinate
692 
     * @param {Array} da dash array pattern
693 
     */
694 
    drawDashedLine: function(ctx, x, y, x2, y2, da) {
695 
      var dx = x2 - x,
696 
          dy = y2 - y,
697 
          len = sqrt(dx * dx + dy * dy),
698 
          rot = atan2(dy, dx),
699 
          dc = da.length,
700 
          di = 0,
701 
          draw = true;
702 
 
703 
      ctx.save();
704 
      ctx.translate(x, y);
705 
      ctx.moveTo(0, 0);
706 
      ctx.rotate(rot);
707 
 
708 
      x = 0;
709 
      while (len > x) {
710 
        x += da[di++ % dc];
711 
        if (x > len) {
712 
          x = len;
713 
        }
714 
        ctx[draw ? 'lineTo' : 'moveTo'](x, 0);
715 
        draw = !draw;
716 
      }
717 
 
718 
      ctx.restore();
719 
    },
720 
 
721 
    /**
722 
     * Creates canvas element and initializes it via excanvas if necessary
723 
     * @static
724 
     * @memberOf fabric.util
725 
     * @param {CanvasElement} [canvasEl] optional canvas element to initialize;
726 
     * when not given, element is created implicitly
727 
     * @return {CanvasElement} initialized canvas element
728 
     */
729 
    createCanvasElement: function(canvasEl) {
730 
      canvasEl || (canvasEl = fabric.document.createElement('canvas'));
731 
      //jscs:disable requireCamelCaseOrUpperCaseIdentifiers
732 
      if (!canvasEl.getContext && typeof G_vmlCanvasManager !== 'undefined') {
733 
        G_vmlCanvasManager.initElement(canvasEl);
734 
      }
735 
      //jscs:enable requireCamelCaseOrUpperCaseIdentifiers
736 
      return canvasEl;
737 
    },
738 
 
739 
    /**
740 
     * Creates image element (works on client and node)
741 
     * @static
742 
     * @memberOf fabric.util
743 
     * @return {HTMLImageElement} HTML image element
744 
     */
745 
    createImage: function() {
746 
      return fabric.isLikelyNode
747 
        ? new (require('canvas').Image)()
748 
        : fabric.document.createElement('img');
749 
    },
750 
 
751 
    /**
752 
     * Creates accessors (getXXX, setXXX) for a "class", based on "stateProperties" array
753 
     * @static
754 
     * @memberOf fabric.util
755 
     * @param {Object} klass "Class" to create accessors for
756 
     */
757 
    createAccessors: function(klass) {
758 
      var proto = klass.prototype;
759 
 
760 
      for (var i = proto.stateProperties.length; i--; ) {
761 
 
762 
        var propName = proto.stateProperties[i],
763 
            capitalizedPropName = propName.charAt(0).toUpperCase() + propName.slice(1),
764 
            setterName = 'set' + capitalizedPropName,
765 
            getterName = 'get' + capitalizedPropName;
766 
 
767 
        // using `new Function` for better introspection
768 
        if (!proto[getterName]) {
769 
          proto[getterName] = (function(property) {
770 
            return new Function('return this.get("' + property + '")');
771 
          })(propName);
772 
        }
773 
        if (!proto[setterName]) {
774 
          proto[setterName] = (function(property) {
775 
            return new Function('value', 'return this.set("' + property + '", value)');
776 
          })(propName);
777 
        }
778 
      }
779 
    },
780 
 
781 
    /**
782 
     * @static
783 
     * @memberOf fabric.util
784 
     * @param {fabric.Object} receiver Object implementing `clipTo` method
785 
     * @param {CanvasRenderingContext2D} ctx Context to clip
786 
     */
787 
    clipContext: function(receiver, ctx) {
788 
      ctx.save();
789 
      ctx.beginPath();
790 
      receiver.clipTo(ctx);
791 
      ctx.clip();
792 
    },
793 
 
794 
    /**
795 
     * Multiply matrix A by matrix B to nest transformations
796 
     * @static
797 
     * @memberOf fabric.util
798 
     * @param  {Array} a First transformMatrix
799 
     * @param  {Array} b Second transformMatrix
800 
     * @return {Array} The product of the two transform matrices
801 
     */
802 
    multiplyTransformMatrices: function(a, b) {
803 
      // Matrix multiply a * b
804 
      return [
805 
        a[0] * b[0] + a[2] * b[1],
806 
        a[1] * b[0] + a[3] * b[1],
807 
        a[0] * b[2] + a[2] * b[3],
808 
        a[1] * b[2] + a[3] * b[3],
809 
        a[0] * b[4] + a[2] * b[5] + a[4],
810 
        a[1] * b[4] + a[3] * b[5] + a[5]
811 
      ];
812 
    },
813 
 
814 
    /**
815 
     * Returns string representation of function body
816 
     * @param {Function} fn Function to get body of
817 
     * @return {String} Function body
818 
     */
819 
    getFunctionBody: function(fn) {
820 
      return (String(fn).match(/function[^{]*\{([\s\S]*)\}/) || {})[1];
821 
    },
822 
 
823 
    /**
824 
     * Returns true if context has transparent pixel
825 
     * at specified location (taking tolerance into account)
826 
     * @param {CanvasRenderingContext2D} ctx context
827 
     * @param {Number} x x coordinate
828 
     * @param {Number} y y coordinate
829 
     * @param {Number} tolerance Tolerance
830 
     */
831 
    isTransparent: function(ctx, x, y, tolerance) {
832 
 
833 
      // If tolerance is > 0 adjust start coords to take into account.
834 
      // If moves off Canvas fix to 0
835 
      if (tolerance > 0) {
836 
        if (x > tolerance) {
837 
          x -= tolerance;
838 
        }
839 
        else {
840 
          x = 0;
841 
        }
842 
        if (y > tolerance) {
843 
          y -= tolerance;
844 
        }
845 
        else {
846 
          y = 0;
847 
        }
848 
      }
849 
 
850 
      var _isTransparent = true,
851 
          imageData = ctx.getImageData(x, y, (tolerance * 2) || 1, (tolerance * 2) || 1);
852 
 
853 
      // Split image data - for tolerance > 1, pixelDataSize = 4;
854 
      for (var i = 3, l = imageData.data.length; i < l; i += 4) {
855 
        var temp = imageData.data[i];
856 
        _isTransparent = temp <= 0;
857 
        if (_isTransparent === false) {
858 
          break; // Stop if colour found
859 
        }
860 
      }
861 
 
862 
      imageData = null;
863 
 
864 
      return _isTransparent;
865 
    }
866 
  };
867 
 
868 
})(typeof exports !== 'undefined' ? exports : this);
869 
 
870 
 
871 
(function() {
872 
 
873 
  var arcToSegmentsCache = { },
874 
      segmentToBezierCache = { },
875 
      boundsOfCurveCache = { },
876 
      _join = Array.prototype.join;
877 
 
878 
  /* Adapted from http://dxr.mozilla.org/mozilla-central/source/content/svg/content/src/nsSVGPathDataParser.cpp
879 
   * by Andrea Bogazzi code is under MPL. if you don't have a copy of the license you can take it here
880 
   * http://mozilla.org/MPL/2.0/
881 
   */
882 
  function arcToSegments(toX, toY, rx, ry, large, sweep, rotateX) {
883 
    var argsString = _join.call(arguments);
884 
    if (arcToSegmentsCache[argsString]) {
885 
      return arcToSegmentsCache[argsString];
886 
    }
887 
 
888 
    var PI = Math.PI, th = rotateX * PI / 180,
889 
        sinTh = Math.sin(th),
890 
        cosTh = Math.cos(th),
891 
        fromX = 0, fromY = 0;
892 
 
893 
    rx = Math.abs(rx);
894 
    ry = Math.abs(ry);
895 
 
896 
    var px = -cosTh * toX * 0.5 - sinTh * toY * 0.5,
897 
        py = -cosTh * toY * 0.5 + sinTh * toX * 0.5,
898 
        rx2 = rx * rx, ry2 = ry * ry, py2 = py * py, px2 = px * px,
899 
        pl = rx2 * ry2 - rx2 * py2 - ry2 * px2,
900 
        root = 0;
901 
 
902 
    if (pl < 0) {
903 
      var s = Math.sqrt(1 - pl/(rx2 * ry2));
904 
      rx *= s;
905 
      ry *= s;
906 
    }
907 
    else {
908 
      root = (large === sweep ? -1.0 : 1.0) *
909 
              Math.sqrt( pl /(rx2 * py2 + ry2 * px2));
910 
    }
911 
 
912 
    var cx = root * rx * py / ry,
913 
        cy = -root * ry * px / rx,
914 
        cx1 = cosTh * cx - sinTh * cy + toX * 0.5,
915 
        cy1 = sinTh * cx + cosTh * cy + toY * 0.5,
916 
        mTheta = calcVectorAngle(1, 0, (px - cx) / rx, (py - cy) / ry),
917 
        dtheta = calcVectorAngle((px - cx) / rx, (py - cy) / ry, (-px - cx) / rx, (-py - cy) / ry);
918 
 
919 
    if (sweep === 0 && dtheta > 0) {
920 
      dtheta -= 2 * PI;
921 
    }
922 
    else if (sweep === 1 && dtheta < 0) {
923 
      dtheta += 2 * PI;
924 
    }
925 
 
926 
    // Convert into cubic bezier segments <= 90deg
927 
    var segments = Math.ceil(Math.abs(dtheta / PI * 2)),
928 
        result = [], mDelta = dtheta / segments,
929 
        mT = 8 / 3 * Math.sin(mDelta / 4) * Math.sin(mDelta / 4) / Math.sin(mDelta / 2),
930 
        th3 = mTheta + mDelta;
931 
 
932 
    for (var i = 0; i < segments; i++) {
933 
      result[i] = segmentToBezier(mTheta, th3, cosTh, sinTh, rx, ry, cx1, cy1, mT, fromX, fromY);
934 
      fromX = result[i][4];
935 
      fromY = result[i][5];
936 
      mTheta = th3;
937 
      th3 += mDelta;
938 
    }
939 
    arcToSegmentsCache[argsString] = result;
940 
    return result;
941 
  }
942 
 
943 
  function segmentToBezier(th2, th3, cosTh, sinTh, rx, ry, cx1, cy1, mT, fromX, fromY) {
944 
    var argsString2 = _join.call(arguments);
945 
    if (segmentToBezierCache[argsString2]) {
946 
      return segmentToBezierCache[argsString2];
947 
    }
948 
 
949 
    var costh2 = Math.cos(th2),
950 
        sinth2 = Math.sin(th2),
951 
        costh3 = Math.cos(th3),
952 
        sinth3 = Math.sin(th3),
953 
        toX = cosTh * rx * costh3 - sinTh * ry * sinth3 + cx1,
954 
        toY = sinTh * rx * costh3 + cosTh * ry * sinth3 + cy1,
955 
        cp1X = fromX + mT * ( - cosTh * rx * sinth2 - sinTh * ry * costh2),
956 
        cp1Y = fromY + mT * ( - sinTh * rx * sinth2 + cosTh * ry * costh2),
957 
        cp2X = toX + mT * ( cosTh * rx * sinth3 + sinTh * ry * costh3),
958 
        cp2Y = toY + mT * ( sinTh * rx * sinth3 - cosTh * ry * costh3);
959 
 
960 
    segmentToBezierCache[argsString2] = [
961 
      cp1X, cp1Y,
962 
      cp2X, cp2Y,
963 
      toX, toY
964 
    ];
965 
    return segmentToBezierCache[argsString2];
966 
  }
967 
 
968 
  /*
969 
  * Private
970 
  */
971 
  function calcVectorAngle(ux, uy, vx, vy) {
972 
    var ta = Math.atan2(uy, ux),
973 
        tb = Math.atan2(vy, vx);
974 
    if (tb >= ta) {
975 
      return tb - ta;
976 
    }
977 
    else {
978 
      return 2 * Math.PI - (ta - tb);
979 
    }
980 
  }
981 
 
982 
  /**
983 
   * Draws arc
984 
   * @param {CanvasRenderingContext2D} ctx
985 
   * @param {Number} fx
986 
   * @param {Number} fy
987 
   * @param {Array} coords
988 
   */
989 
  fabric.util.drawArc = function(ctx, fx, fy, coords) {
990 
    var rx = coords[0],
991 
        ry = coords[1],
992 
        rot = coords[2],
993 
        large = coords[3],
994 
        sweep = coords[4],
995 
        tx = coords[5],
996 
        ty = coords[6],
997 
        segs = [[ ], [ ], [ ], [ ]],
998 
        segsNorm = arcToSegments(tx - fx, ty - fy, rx, ry, large, sweep, rot);
999 
 
1000 
    for (var i = 0, len = segsNorm.length; i < len; i++) {
1001 
      segs[i][0] = segsNorm[i][0] + fx;
1002 
      segs[i][1] = segsNorm[i][1] + fy;
1003 
      segs[i][2] = segsNorm[i][2] + fx;
1004 
      segs[i][3] = segsNorm[i][3] + fy;
1005 
      segs[i][4] = segsNorm[i][4] + fx;
1006 
      segs[i][5] = segsNorm[i][5] + fy;
1007 
      ctx.bezierCurveTo.apply(ctx, segs[i]);
1008 
    }
1009 
  };
1010 
 
1011 
  /**
1012 
   * Calculate bounding box of a elliptic-arc
1013 
   * @param {Number} fx start point of arc
1014 
   * @param {Number} fy
1015 
   * @param {Number} rx horizontal radius
1016 
   * @param {Number} ry vertical radius
1017 
   * @param {Number} rot angle of horizontal axe
1018 
   * @param {Number} large 1 or 0, whatever the arc is the big or the small on the 2 points
1019 
   * @param {Number} sweep 1 or 0, 1 clockwise or counterclockwise direction
1020 
   * @param {Number} tx end point of arc
1021 
   * @param {Number} ty
1022 
   */
1023 
  fabric.util.getBoundsOfArc = function(fx, fy, rx, ry, rot, large, sweep, tx, ty) {
1024 
 
1025 
    var fromX = 0, fromY = 0, bound = [ ], bounds = [ ],
1026 
    segs = arcToSegments(tx - fx, ty - fy, rx, ry, large, sweep, rot),
1027 
    boundCopy = [[ ], [ ]];
1028 
 
1029 
    for (var i = 0, len = segs.length; i < len; i++) {
1030 
      bound = getBoundsOfCurve(fromX, fromY, segs[i][0], segs[i][1], segs[i][2], segs[i][3], segs[i][4], segs[i][5]);
1031 
      boundCopy[0].x = bound[0].x + fx;
1032 
      boundCopy[0].y = bound[0].y + fy;
1033 
      boundCopy[1].x = bound[1].x + fx;
1034 
      boundCopy[1].y = bound[1].y + fy;
1035 
      bounds.push(boundCopy[0]);
1036 
      bounds.push(boundCopy[1]);
1037 
      fromX = segs[i][4];
1038 
      fromY = segs[i][5];
1039 
    }
1040 
    return bounds;
1041 
  };
1042 
 
1043 
  /**
1044 
   * Calculate bounding box of a beziercurve
1045 
   * @param {Number} x0 starting point
1046 
   * @param {Number} y0
1047 
   * @param {Number} x1 first control point
1048 
   * @param {Number} y1
1049 
   * @param {Number} x2 secondo control point
1050 
   * @param {Number} y2
1051 
   * @param {Number} x3 end of beizer
1052 
   * @param {Number} y3
1053 
   */
1054 
  // taken from http://jsbin.com/ivomiq/56/edit  no credits available for that.
1055 
  function getBoundsOfCurve(x0, y0, x1, y1, x2, y2, x3, y3) {
1056 
    var argsString = _join.call(arguments);
1057 
    if (boundsOfCurveCache[argsString]) {
1058 
      return boundsOfCurveCache[argsString];
1059 
    }
1060 
 
1061 
    var sqrt = Math.sqrt,
1062 
        min = Math.min, max = Math.max,
1063 
        abs = Math.abs, tvalues = [ ],
1064 
        bounds = [[ ], [ ]],
1065 
        a, b, c, t, t1, t2, b2ac, sqrtb2ac;
1066 
 
1067 
    b = 6 * x0 - 12 * x1 + 6 * x2;
1068 
    a = -3 * x0 + 9 * x1 - 9 * x2 + 3 * x3;
1069 
    c = 3 * x1 - 3 * x0;
1070 
 
1071 
    for (var i = 0; i < 2; ++i) {
1072 
      if (i > 0) {
1073 
        b = 6 * y0 - 12 * y1 + 6 * y2;
1074 
        a = -3 * y0 + 9 * y1 - 9 * y2 + 3 * y3;
1075 
        c = 3 * y1 - 3 * y0;
1076 
      }
1077 
 
1078 
      if (abs(a) < 1e-12) {
1079 
        if (abs(b) < 1e-12) {
1080 
          continue;
1081 
        }
1082 
        t = -c / b;
1083 
        if (0 < t && t < 1) {
1084 
          tvalues.push(t);
1085 
        }
1086 
        continue;
1087 
      }
1088 
      b2ac = b * b - 4 * c * a;
1089 
      if (b2ac < 0) {
1090 
        continue;
1091 
      }
1092 
      sqrtb2ac = sqrt(b2ac);
1093 
      t1 = (-b + sqrtb2ac) / (2 * a);
1094 
      if (0 < t1 && t1 < 1) {
1095 
        tvalues.push(t1);
1096 
      }
1097 
      t2 = (-b - sqrtb2ac) / (2 * a);
1098 
      if (0 < t2 && t2 < 1) {
1099 
        tvalues.push(t2);
1100 
      }
1101 
    }
1102 
 
1103 
    var x, y, j = tvalues.length, jlen = j, mt;
1104 
    while (j--) {
1105 
      t = tvalues[j];
1106 
      mt = 1 - t;
1107 
      x = (mt * mt * mt * x0) + (3 * mt * mt * t * x1) + (3 * mt * t * t * x2) + (t * t * t * x3);
1108 
      bounds[0][j] = x;
1109 
 
1110 
      y = (mt * mt * mt * y0) + (3 * mt * mt * t * y1) + (3 * mt * t * t * y2) + (t * t * t * y3);
1111 
      bounds[1][j] = y;
1112 
    }
1113 
 
1114 
    bounds[0][jlen] = x0;
1115 
    bounds[1][jlen] = y0;
1116 
    bounds[0][jlen + 1] = x3;
1117 
    bounds[1][jlen + 1] = y3;
1118 
    var result = [
1119 
      {
1120 
        x: min.apply(null, bounds[0]),
1121 
        y: min.apply(null, bounds[1])
1122 
      },
1123 
      {
1124 
        x: max.apply(null, bounds[0]),
1125 
        y: max.apply(null, bounds[1])
1126 
      }
1127 
    ];
1128 
    boundsOfCurveCache[argsString] = result;
1129 
    return result;
1130 
  }
1131 
 
1132 
  fabric.util.getBoundsOfCurve = getBoundsOfCurve;
1133 
 
1134 
})();
1135 
 
1136 
 
1137 
(function() {
1138 
 
1139 
  var slice = Array.prototype.slice;
1140 
 
1141 
  /* _ES5_COMPAT_START_ */
1142 
 
1143 
  if (!Array.prototype.indexOf) {
1144 
    /**
1145 
     * Finds index of an element in an array
1146 
     * @param {Any} searchElement
1147 
     * @param {Number} [fromIndex]
1148 
     * @return {Number}
1149 
     */
1150 
    Array.prototype.indexOf = function (searchElement /*, fromIndex */ ) {
1151 
      if (this === void 0 || this === null) {
1152 
        throw new TypeError();
1153 
      }
1154 
      var t = Object(this), len = t.length >>> 0;
1155 
      if (len === 0) {
1156 
        return -1;
1157 
      }
1158 
      var n = 0;
1159 
      if (arguments.length > 0) {
1160 
        n = Number(arguments[1]);
1161 
        if (n !== n) { // shortcut for verifying if it's NaN
1162 
          n = 0;
1163 
        }
1164 
        else if (n !== 0 && n !== Number.POSITIVE_INFINITY && n !== Number.NEGATIVE_INFINITY) {
1165 
          n = (n > 0 || -1) * Math.floor(Math.abs(n));
1166 
        }
1167 
      }
1168 
      if (n >= len) {
1169 
        return -1;
1170 
      }
1171 
      var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0);
1172 
      for (; k < len; k++) {
1173 
        if (k in t && t[k] === searchElement) {
1174 
          return k;
1175 
        }
1176 
      }
1177 
      return -1;
1178 
    };
1179 
  }
1180 
 
1181 
  if (!Array.prototype.forEach) {
1182 
    /**
1183 
     * Iterates an array, invoking callback for each element
1184 
     * @param {Function} fn Callback to invoke for each element
1185 
     * @param {Object} [context] Context to invoke callback in
1186 
     * @return {Array}
1187 
     */
1188 
    Array.prototype.forEach = function(fn, context) {
1189 
      for (var i = 0, len = this.length >>> 0; i < len; i++) {
1190 
        if (i in this) {
1191 
          fn.call(context, this[i], i, this);
1192 
        }
1193 
      }
1194 
    };
1195 
  }
1196 
 
1197 
  if (!Array.prototype.map) {
1198 
    /**
1199 
     * Returns a result of iterating over an array, invoking callback for each element
1200 
     * @param {Function} fn Callback to invoke for each element
1201 
     * @param {Object} [context] Context to invoke callback in
1202 
     * @return {Array}
1203 
     */
1204 
    Array.prototype.map = function(fn, context) {
1205 
      var result = [ ];
1206 
      for (var i = 0, len = this.length >>> 0; i < len; i++) {
1207 
        if (i in this) {
1208 
          result[i] = fn.call(context, this[i], i, this);
1209 
        }
1210 
      }
1211 
      return result;
1212 
    };
1213 
  }
1214 
 
1215 
  if (!Array.prototype.every) {
1216 
    /**
1217 
     * Returns true if a callback returns truthy value for all elements in an array
1218 
     * @param {Function} fn Callback to invoke for each element
1219 
     * @param {Object} [context] Context to invoke callback in
1220 
     * @return {Boolean}
1221 
     */
1222 
    Array.prototype.every = function(fn, context) {
1223 
      for (var i = 0, len = this.length >>> 0; i < len; i++) {
1224 
        if (i in this && !fn.call(context, this[i], i, this)) {
1225 
          return false;
1226 
        }
1227 
      }
1228 
      return true;
1229 
    };
1230 
  }
1231 
 
1232 
  if (!Array.prototype.some) {
1233 
    /**
1234 
     * Returns true if a callback returns truthy value for at least one element in an array
1235 
     * @param {Function} fn Callback to invoke for each element
1236 
     * @param {Object} [context] Context to invoke callback in
1237 
     * @return {Boolean}
1238 
     */
1239 
    Array.prototype.some = function(fn, context) {
1240 
      for (var i = 0, len = this.length >>> 0; i < len; i++) {
1241 
        if (i in this && fn.call(context, this[i], i, this)) {
1242 
          return true;
1243 
        }
1244 
      }
1245 
      return false;
1246 
    };
1247 
  }
1248 
 
1249 
  if (!Array.prototype.filter) {
1250 
    /**
1251 
     * Returns the result of iterating over elements in an array
1252 
     * @param {Function} fn Callback to invoke for each element
1253 
     * @param {Object} [context] Context to invoke callback in
1254 
     * @return {Array}
1255 
     */
1256 
    Array.prototype.filter = function(fn, context) {
1257 
      var result = [ ], val;
1258 
      for (var i = 0, len = this.length >>> 0; i < len; i++) {
1259 
        if (i in this) {
1260 
          val = this[i]; // in case fn mutates this
1261 
          if (fn.call(context, val, i, this)) {
1262 
            result.push(val);
1263 
          }
1264 
        }
1265 
      }
1266 
      return result;
1267 
    };
1268 
  }
1269 
 
1270 
  if (!Array.prototype.reduce) {
1271 
    /**
1272 
     * Returns "folded" (reduced) result of iterating over elements in an array
1273 
     * @param {Function} fn Callback to invoke for each element
1274 
     * @param {Object} [initial] Object to use as the first argument to the first call of the callback
1275 
     * @return {Any}
1276 
     */
1277 
    Array.prototype.reduce = function(fn /*, initial*/) {
1278 
      var len = this.length >>> 0,
1279 
          i = 0,
1280 
          rv;
1281 
 
1282 
      if (arguments.length > 1) {
1283 
        rv = arguments[1];
1284 
      }
1285 
      else {
1286 
        do {
1287 
          if (i in this) {
1288 
            rv = this[i++];
1289 
            break;
1290 
          }
1291 
          // if array contains no values, no initial value to return
1292 
          if (++i >= len) {
1293 
            throw new TypeError();
1294 
          }
1295 
        }
1296 
        while (true);
1297 
      }
1298 
      for (; i < len; i++) {
1299 
        if (i in this) {
1300 
          rv = fn.call(null, rv, this[i], i, this);
1301 
        }
1302 
      }
1303 
      return rv;
1304 
    };
1305 
  }
1306 
 
1307 
  /* _ES5_COMPAT_END_ */
1308 
 
1309 
  /**
1310 
   * Invokes method on all items in a given array
1311 
   * @memberOf fabric.util.array
1312 
   * @param {Array} array Array to iterate over
1313 
   * @param {String} method Name of a method to invoke
1314 
   * @return {Array}
1315 
   */
1316 
  function invoke(array, method) {
1317 
    var args = slice.call(arguments, 2), result = [ ];
1318 
    for (var i = 0, len = array.length; i < len; i++) {
1319 
      result[i] = args.length ? array[i][method].apply(array[i], args) : array[i][method].call(array[i]);
1320 
    }
1321 
    return result;
1322 
  }
1323 
 
1324 
  /**
1325 
   * Finds maximum value in array (not necessarily "first" one)
1326 
   * @memberOf fabric.util.array
1327 
   * @param {Array} array Array to iterate over
1328 
   * @param {String} byProperty
1329 
   * @return {Any}
1330 
   */
1331 
  function max(array, byProperty) {
1332 
    return find(array, byProperty, function(value1, value2) {
1333 
      return value1 >= value2;
1334 
    });
1335 
  }
1336 
 
1337 
  /**
1338 
   * Finds minimum value in array (not necessarily "first" one)
1339 
   * @memberOf fabric.util.array
1340 
   * @param {Array} array Array to iterate over
1341 
   * @param {String} byProperty
1342 
   * @return {Any}
1343 
   */
1344 
  function min(array, byProperty) {
1345 
    return find(array, byProperty, function(value1, value2) {
1346 
      return value1 < value2;
1347 
    });
1348 
  }
1349 
 
1350 
  /**
1351 
   * @private
1352 
   */
1353 
  function find(array, byProperty, condition) {
1354 
    if (!array || array.length === 0) {
1355 
      return;
1356 
    }
1357 
 
1358 
    var i = array.length - 1,
1359 
        result = byProperty ? array[i][byProperty] : array[i];
1360 
    if (byProperty) {
1361 
      while (i--) {
1362 
        if (condition(array[i][byProperty], result)) {
1363 
          result = array[i][byProperty];
1364 
        }
1365 
      }
1366 
    }
1367 
    else {
1368 
      while (i--) {
1369 
        if (condition(array[i], result)) {
1370 
          result = array[i];
1371 
        }
1372 
      }
1373 
    }
1374 
    return result;
1375 
  }
1376 
 
1377 
  /**
1378 
   * @namespace fabric.util.array
1379 
   */
1380 
  fabric.util.array = {
1381 
    invoke: invoke,
1382 
    min: min,
1383 
    max: max
1384 
  };
1385 
 
1386 
})();
1387 
 
1388 
 
1389 
(function() {
1390 
 
1391 
  /**
1392 
   * Copies all enumerable properties of one object to another
1393 
   * @memberOf fabric.util.object
1394 
   * @param {Object} destination Where to copy to
1395 
   * @param {Object} source Where to copy from
1396 
   * @return {Object}
1397 
   */
1398 
  function extend(destination, source) {
1399 
    // JScript DontEnum bug is not taken care of
1400 
    for (var property in source) {
1401 
      destination[property] = source[property];
1402 
    }
1403 
    return destination;
1404 
  }
1405 
 
1406 
  /**
1407 
   * Creates an empty object and copies all enumerable properties of another object to it
1408 
   * @memberOf fabric.util.object
1409 
   * @param {Object} object Object to clone
1410 
   * @return {Object}
1411 
   */
1412 
  function clone(object) {
1413 
    return extend({ }, object);
1414 
  }
1415 
 
1416 
  /** @namespace fabric.util.object */
1417 
  fabric.util.object = {
1418 
    extend: extend,
1419 
    clone: clone
1420 
  };
1421 
 
1422 
})();
1423 
 
1424 
 
1425 
(function() {
1426 
 
1427 
  /* _ES5_COMPAT_START_ */
1428 
  if (!String.prototype.trim) {
1429 
    /**
1430 
     * Trims a string (removing whitespace from the beginning and the end)
1431 
     * @function external:String#trim
1432 
     * @see <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/Trim">String#trim on MDN</a>
1433 
     */
1434 
    String.prototype.trim = function () {
1435 
      // this trim is not fully ES3 or ES5 compliant, but it should cover most cases for now
1436 
      return this.replace(/^[\s\xA0]+/, '').replace(/[\s\xA0]+$/, '');
1437 
    };
1438 
  }
1439 
  /* _ES5_COMPAT_END_ */
1440 
 
1441 
  /**
1442 
   * Camelizes a string
1443 
   * @memberOf fabric.util.string
1444 
   * @param {String} string String to camelize
1445 
   * @return {String} Camelized version of a string
1446 
   */
1447 
  function camelize(string) {
1448 
    return string.replace(/-+(.)?/g, function(match, character) {
1449 
      return character ? character.toUpperCase() : '';
1450 
    });
1451 
  }
1452 
 
1453 
  /**
1454 
   * Capitalizes a string
1455 
   * @memberOf fabric.util.string
1456 
   * @param {String} string String to capitalize
1457 
   * @param {Boolean} [firstLetterOnly] If true only first letter is capitalized
1458 
   * and other letters stay untouched, if false first letter is capitalized
1459 
   * and other letters are converted to lowercase.
1460 
   * @return {String} Capitalized version of a string
1461 
   */
1462 
  function capitalize(string, firstLetterOnly) {
1463 
    return string.charAt(0).toUpperCase() +
1464 
      (firstLetterOnly ? string.slice(1) : string.slice(1).toLowerCase());
1465 
  }
1466 
 
1467 
  /**
1468 
   * Escapes XML in a string
1469 
   * @memberOf fabric.util.string
1470 
   * @param {String} string String to escape
1471 
   * @return {String} Escaped version of a string
1472 
   */
1473 
  function escapeXml(string) {
1474 
    return string.replace(/&/g, '&amp;')
1475 
       .replace(/"/g, '&quot;')
1476 
       .replace(/'/g, '&apos;')
1477 
       .replace(/</g, '&lt;')
1478 
       .replace(/>/g, '&gt;');
1479 
  }
1480 
 
1481 
  /**
1482 
   * String utilities
1483 
   * @namespace fabric.util.string
1484 
   */
1485 
  fabric.util.string = {
1486 
    camelize: camelize,
1487 
    capitalize: capitalize,
1488 
    escapeXml: escapeXml
1489 
  };
1490 
}());
1491 
 
1492 
 
1493 
/* _ES5_COMPAT_START_ */
1494 
(function() {
1495 
 
1496 
  var slice = Array.prototype.slice,
1497 
      apply = Function.prototype.apply,
1498 
      Dummy = function() { };
1499 
 
1500 
  if (!Function.prototype.bind) {
1501 
    /**
1502 
     * Cross-browser approximation of ES5 Function.prototype.bind (not fully spec conforming)
1503 
     * @see <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind">Function#bind on MDN</a>
1504 
     * @param {Object} thisArg Object to bind function to
1505 
     * @param {Any[]} [...] Values to pass to a bound function
1506 
     * @return {Function}
1507 
     */
1508 
    Function.prototype.bind = function(thisArg) {
1509 
      var _this = this, args = slice.call(arguments, 1), bound;
1510 
      if (args.length) {
1511 
        bound = function() {
1512 
          return apply.call(_this, this instanceof Dummy ? this : thisArg, args.concat(slice.call(arguments)));
1513 
        };
1514 
      }
1515 
      else {
1516 
        /** @ignore */
1517 
        bound = function() {
1518 
          return apply.call(_this, this instanceof Dummy ? this : thisArg, arguments);
1519 
        };
1520 
      }
1521 
      Dummy.prototype = this.prototype;
1522 
      bound.prototype = new Dummy();
1523 
 
1524 
      return bound;
1525 
    };
1526 
  }
1527 
 
1528 
})();
1529 
/* _ES5_COMPAT_END_ */
1530 
 
1531 
 
1532 
(function() {
1533 
 
1534 
  var slice = Array.prototype.slice, emptyFunction = function() { },
1535 
 
1536 
      IS_DONTENUM_BUGGY = (function() {
1537 
        for (var p in { toString: 1 }) {
1538 
          if (p === 'toString') {
1539 
            return false;
1540 
          }
1541 
        }
1542 
        return true;
1543 
      })(),
1544 
 
1545 
      /** @ignore */
1546 
      addMethods = function(klass, source, parent) {
1547 
        for (var property in source) {
1548 
 
1549 
          if (property in klass.prototype &&
1550 
              typeof klass.prototype[property] === 'function' &&
1551 
              (source[property] + '').indexOf('callSuper') > -1) {
1552 
 
1553 
            klass.prototype[property] = (function(property) {
1554 
              return function() {
1555 
 
1556 
                var superclass = this.constructor.superclass;
1557 
                this.constructor.superclass = parent;
1558 
                var returnValue = source[property].apply(this, arguments);
1559 
                this.constructor.superclass = superclass;
1560 
 
1561 
                if (property !== 'initialize') {
1562 
                  return returnValue;
1563 
                }
1564 
              };
1565 
            })(property);
1566 
          }
1567 
          else {
1568 
            klass.prototype[property] = source[property];
1569 
          }
1570 
 
1571 
          if (IS_DONTENUM_BUGGY) {
1572 
            if (source.toString !== Object.prototype.toString) {
1573 
              klass.prototype.toString = source.toString;
1574 
            }
1575 
            if (source.valueOf !== Object.prototype.valueOf) {
1576 
              klass.prototype.valueOf = source.valueOf;
1577 
            }
1578 
          }
1579 
        }
1580 
      };
1581 
 
1582 
  function Subclass() { }
1583 
 
1584 
  function callSuper(methodName) {
1585 
    var fn = this.constructor.superclass.prototype[methodName];
1586 
    return (arguments.length > 1)
1587 
      ? fn.apply(this, slice.call(arguments, 1))
1588 
      : fn.call(this);
1589 
  }
1590 
 
1591 
  /**
1592 
   * Helper for creation of "classes".
1593 
   * @memberOf fabric.util
1594 
   * @param {Function} [parent] optional "Class" to inherit from
1595 
   * @param {Object} [properties] Properties shared by all instances of this class
1596 
   *                  (be careful modifying objects defined here as this would affect all instances)
1597 
   */
1598 
  function createClass() {
1599 
    var parent = null,
1600 
        properties = slice.call(arguments, 0);
1601 
 
1602 
    if (typeof properties[0] === 'function') {
1603 
      parent = properties.shift();
1604 
    }
1605 
    function klass() {
1606 
      this.initialize.apply(this, arguments);
1607 
    }
1608 
 
1609 
    klass.superclass = parent;
1610 
    klass.subclasses = [ ];
1611 
 
1612 
    if (parent) {
1613 
      Subclass.prototype = parent.prototype;
1614 
      klass.prototype = new Subclass();
1615 
      parent.subclasses.push(klass);
1616 
    }
1617 
    for (var i = 0, length = properties.length; i < length; i++) {
1618 
      addMethods(klass, properties[i], parent);
1619 
    }
1620 
    if (!klass.prototype.initialize) {
1621 
      klass.prototype.initialize = emptyFunction;
1622 
    }
1623 
    klass.prototype.constructor = klass;
1624 
    klass.prototype.callSuper = callSuper;
1625 
    return klass;
1626 
  }
1627 
 
1628 
  fabric.util.createClass = createClass;
1629 
})();
1630 
 
1631 
 
1632 
(function () {
1633 
 
1634 
  var unknown = 'unknown';
1635 
 
1636 
  /* EVENT HANDLING */
1637 
 
1638 
  function areHostMethods(object) {
1639 
    var methodNames = Array.prototype.slice.call(arguments, 1),
1640 
        t, i, len = methodNames.length;
1641 
    for (i = 0; i < len; i++) {
1642 
      t = typeof object[methodNames[i]];
1643 
      if (!(/^(?:function|object|unknown)$/).test(t)) {
1644 
        return false;
1645 
      }
1646 
    }
1647 
    return true;
1648 
  }
1649 
 
1650 
  /** @ignore */
1651 
  var getElement,
1652 
      setElement,
1653 
      getUniqueId = (function () {
1654 
        var uid = 0;
1655 
        return function (element) {
1656 
          return element.__uniqueID || (element.__uniqueID = 'uniqueID__' + uid++);
1657 
        };
1658 
      })();
1659 
 
1660 
  (function () {
1661 
    var elements = { };
1662 
    /** @ignore */
1663 
    getElement = function (uid) {
1664 
      return elements[uid];
1665 
    };
1666 
    /** @ignore */
1667 
    setElement = function (uid, element) {
1668 
      elements[uid] = element;
1669 
    };
1670 
  })();
1671 
 
1672 
  function createListener(uid, handler) {
1673 
    return {
1674 
      handler: handler,
1675 
      wrappedHandler: createWrappedHandler(uid, handler)
1676 
    };
1677 
  }
1678 
 
1679 
  function createWrappedHandler(uid, handler) {
1680 
    return function (e) {
1681 
      handler.call(getElement(uid), e || fabric.window.event);
1682 
    };
1683 
  }
1684 
 
1685 
  function createDispatcher(uid, eventName) {
1686 
    return function (e) {
1687 
      if (handlers[uid] && handlers[uid][eventName]) {
1688 
        var handlersForEvent = handlers[uid][eventName];
1689 
        for (var i = 0, len = handlersForEvent.length; i < len; i++) {
1690 
          handlersForEvent[i].call(this, e || fabric.window.event);
1691 
        }
1692 
      }
1693 
    };
1694 
  }
1695 
 
1696 
  var shouldUseAddListenerRemoveListener = (
1697 
        areHostMethods(fabric.document.documentElement, 'addEventListener', 'removeEventListener') &&
1698 
        areHostMethods(fabric.window, 'addEventListener', 'removeEventListener')),
1699 
 
1700 
      shouldUseAttachEventDetachEvent = (
1701 
        areHostMethods(fabric.document.documentElement, 'attachEvent', 'detachEvent') &&
1702 
        areHostMethods(fabric.window, 'attachEvent', 'detachEvent')),
1703 
 
1704 
      // IE branch
1705 
      listeners = { },
1706 
 
1707 
      // DOM L0 branch
1708 
      handlers = { },
1709 
 
1710 
      addListener, removeListener;
1711 
 
1712 
  if (shouldUseAddListenerRemoveListener) {
1713 
    /** @ignore */
1714 
    addListener = function (element, eventName, handler) {
1715 
      element.addEventListener(eventName, handler, false);
1716 
    };
1717 
    /** @ignore */
1718 
    removeListener = function (element, eventName, handler) {
1719 
      element.removeEventListener(eventName, handler, false);
1720 
    };
1721 
  }
1722 
 
1723 
  else if (shouldUseAttachEventDetachEvent) {
1724 
    /** @ignore */
1725 
    addListener = function (element, eventName, handler) {
1726 
      var uid = getUniqueId(element);
1727 
      setElement(uid, element);
1728 
      if (!listeners[uid]) {
1729 
        listeners[uid] = { };
1730 
      }
1731 
      if (!listeners[uid][eventName]) {
1732 
        listeners[uid][eventName] = [ ];
1733 
 
1734 
      }
1735 
      var listener = createListener(uid, handler);
1736 
      listeners[uid][eventName].push(listener);
1737 
      element.attachEvent('on' + eventName, listener.wrappedHandler);
1738 
    };
1739 
    /** @ignore */
1740 
    removeListener = function (element, eventName, handler) {
1741 
      var uid = getUniqueId(element), listener;
1742 
      if (listeners[uid] && listeners[uid][eventName]) {
1743 
        for (var i = 0, len = listeners[uid][eventName].length; i < len; i++) {
1744 
          listener = listeners[uid][eventName][i];
1745 
          if (listener && listener.handler === handler) {
1746 
            element.detachEvent('on' + eventName, listener.wrappedHandler);
1747 
            listeners[uid][eventName][i] = null;
1748 
          }
1749 
        }
1750 
      }
1751 
    };
1752 
  }
1753 
  else {
1754 
    /** @ignore */
1755 
    addListener = function (element, eventName, handler) {
1756 
      var uid = getUniqueId(element);
1757 
      if (!handlers[uid]) {
1758 
        handlers[uid] = { };
1759 
      }
1760 
      if (!handlers[uid][eventName]) {
1761 
        handlers[uid][eventName] = [ ];
1762 
        var existingHandler = element['on' + eventName];
1763 
        if (existingHandler) {
1764 
          handlers[uid][eventName].push(existingHandler);
1765 
        }
1766 
        element['on' + eventName] = createDispatcher(uid, eventName);
1767 
      }
1768 
      handlers[uid][eventName].push(handler);
1769 
    };
1770 
    /** @ignore */
1771 
    removeListener = function (element, eventName, handler) {
1772 
      var uid = getUniqueId(element);
1773 
      if (handlers[uid] && handlers[uid][eventName]) {
1774 
        var handlersForEvent = handlers[uid][eventName];
1775 
        for (var i = 0, len = handlersForEvent.length; i < len; i++) {
1776 
          if (handlersForEvent[i] === handler) {
1777 
            handlersForEvent.splice(i, 1);
1778 
          }
1779 
        }
1780 
      }
1781 
    };
1782 
  }
1783 
 
1784 
  /**
1785 
   * Adds an event listener to an element
1786 
   * @function
1787 
   * @memberOf fabric.util
1788 
   * @param {HTMLElement} element
1789 
   * @param {String} eventName
1790 
   * @param {Function} handler
1791 
   */
1792 
  fabric.util.addListener = addListener;
1793 
 
1794 
  /**
1795 
   * Removes an event listener from an element
1796 
   * @function
1797 
   * @memberOf fabric.util
1798 
   * @param {HTMLElement} element
1799 
   * @param {String} eventName
1800 
   * @param {Function} handler
1801 
   */
1802 
  fabric.util.removeListener = removeListener;
1803 
 
1804 
  /**
1805 
   * Cross-browser wrapper for getting event's coordinates
1806 
   * @memberOf fabric.util
1807 
   * @param {Event} event Event object
1808 
   * @param {HTMLCanvasElement} upperCanvasEl &lt;canvas> element on which object selection is drawn
1809 
   */
1810 
  function getPointer(event, upperCanvasEl) {
1811 
    event || (event = fabric.window.event);
1812 
 
1813 
    var element = event.target ||
1814 
                  (typeof event.srcElement !== unknown ? event.srcElement : null),
1815 
 
1816 
        scroll = fabric.util.getScrollLeftTop(element, upperCanvasEl);
1817 
 
1818 
    return {
1819 
      x: pointerX(event) + scroll.left,
1820 
      y: pointerY(event) + scroll.top
1821 
    };
1822 
  }
1823 
 
1824 
  var pointerX = function(event) {
1825 
    // looks like in IE (<9) clientX at certain point (apparently when mouseup fires on VML element)
1826 
    // is represented as COM object, with all the consequences, like "unknown" type and error on [[Get]]
1827 
    // need to investigate later
1828 
    return (typeof event.clientX !== unknown ? event.clientX : 0);
1829 
  },
1830 
 
1831 
  pointerY = function(event) {
1832 
    return (typeof event.clientY !== unknown ? event.clientY : 0);
1833 
  };
1834 
 
1835 
  function _getPointer(event, pageProp, clientProp) {
1836 
    var touchProp = event.type === 'touchend' ? 'changedTouches' : 'touches';
1837 
 
1838 
    return (event[touchProp] && event[touchProp][0]
1839 
      ? (event[touchProp][0][pageProp] - (event[touchProp][0][pageProp] - event[touchProp][0][clientProp]))
1840 
        || event[clientProp]
1841 
      : event[clientProp]);
1842 
  }
1843 
 
1844 
  if (fabric.isTouchSupported) {
1845 
    pointerX = function(event) {
1846 
      return _getPointer(event, 'pageX', 'clientX');
1847 
    };
1848 
    pointerY = function(event) {
1849 
      return _getPointer(event, 'pageY', 'clientY');
1850 
    };
1851 
  }
1852 
 
1853 
  fabric.util.getPointer = getPointer;
1854 
 
1855 
  fabric.util.object.extend(fabric.util, fabric.Observable);
1856 
 
1857 
})();
1858 
 
1859 
 
1860 
(function () {
1861 
 
1862 
  /**
1863 
   * Cross-browser wrapper for setting element's style
1864 
   * @memberOf fabric.util
1865 
   * @param {HTMLElement} element
1866 
   * @param {Object} styles
1867 
   * @return {HTMLElement} Element that was passed as a first argument
1868 
   */
1869 
  function setStyle(element, styles) {
1870 
    var elementStyle = element.style;
1871 
    if (!elementStyle) {
1872 
      return element;
1873 
    }
1874 
    if (typeof styles === 'string') {
1875 
      element.style.cssText += ';' + styles;
1876 
      return styles.indexOf('opacity') > -1
1877 
        ? setOpacity(element, styles.match(/opacity:\s*(\d?\.?\d*)/)[1])
1878 
        : element;
1879 
    }
1880 
    for (var property in styles) {
1881 
      if (property === 'opacity') {
1882 
        setOpacity(element, styles[property]);
1883 
      }
1884 
      else {
1885 
        var normalizedProperty = (property === 'float' || property === 'cssFloat')
1886 
          ? (typeof elementStyle.styleFloat === 'undefined' ? 'cssFloat' : 'styleFloat')
1887 
          : property;
1888 
        elementStyle[normalizedProperty] = styles[property];
1889 
      }
1890 
    }
1891 
    return element;
1892 
  }
1893 
 
1894 
  var parseEl = fabric.document.createElement('div'),
1895 
      supportsOpacity = typeof parseEl.style.opacity === 'string',
1896 
      supportsFilters = typeof parseEl.style.filter === 'string',
1897 
      reOpacity = /alpha\s*\(\s*opacity\s*=\s*([^\)]+)\)/,
1898 
 
1899 
      /** @ignore */
1900 
      setOpacity = function (element) { return element; };
1901 
 
1902 
  if (supportsOpacity) {
1903 
    /** @ignore */
1904 
    setOpacity = function(element, value) {
1905 
      element.style.opacity = value;
1906 
      return element;
1907 
    };
1908 
  }
1909 
  else if (supportsFilters) {
1910 
    /** @ignore */
1911 
    setOpacity = function(element, value) {
1912 
      var es = element.style;
1913 
      if (element.currentStyle && !element.currentStyle.hasLayout) {
1914 
        es.zoom = 1;
1915 
      }
1916 
      if (reOpacity.test(es.filter)) {
1917 
        value = value >= 0.9999 ? '' : ('alpha(opacity=' + (value * 100) + ')');
1918 
        es.filter = es.filter.replace(reOpacity, value);
1919 
      }
1920 
      else {
1921 
        es.filter += ' alpha(opacity=' + (value * 100) + ')';
1922 
      }
1923 
      return element;
1924 
    };
1925 
  }
1926 
 
1927 
  fabric.util.setStyle = setStyle;
1928 
 
1929 
})();
1930 
 
1931 
 
1932 
(function() {
1933 
 
1934 
  var _slice = Array.prototype.slice;
1935 
 
1936 
  /**
1937 
   * Takes id and returns an element with that id (if one exists in a document)
1938 
   * @memberOf fabric.util
1939 
   * @param {String|HTMLElement} id
1940 
   * @return {HTMLElement|null}
1941 
   */
1942 
  function getById(id) {
1943 
    return typeof id === 'string' ? fabric.document.getElementById(id) : id;
1944 
  }
1945 
 
1946 
  var sliceCanConvertNodelists,
1947 
      /**
1948 
       * Converts an array-like object (e.g. arguments or NodeList) to an array
1949 
       * @memberOf fabric.util
1950 
       * @param {Object} arrayLike
1951 
       * @return {Array}
1952 
       */
1953 
      toArray = function(arrayLike) {
1954 
        return _slice.call(arrayLike, 0);
1955 
      };
1956 
 
1957 
  try {
1958 
    sliceCanConvertNodelists = toArray(fabric.document.childNodes) instanceof Array;
1959 
  }
1960 
  catch (err) { }
1961 
 
1962 
  if (!sliceCanConvertNodelists) {
1963 
    toArray = function(arrayLike) {
1964 
      var arr = new Array(arrayLike.length), i = arrayLike.length;
1965 
      while (i--) {
1966 
        arr[i] = arrayLike[i];
1967 
      }
1968 
      return arr;
1969 
    };
1970 
  }
1971 
 
1972 
  /**
1973 
   * Creates specified element with specified attributes
1974 
   * @memberOf fabric.util
1975 
   * @param {String} tagName Type of an element to create
1976 
   * @param {Object} [attributes] Attributes to set on an element
1977 
   * @return {HTMLElement} Newly created element
1978 
   */
1979 
  function makeElement(tagName, attributes) {
1980 
    var el = fabric.document.createElement(tagName);
1981 
    for (var prop in attributes) {
1982 
      if (prop === 'class') {
1983 
        el.className = attributes[prop];
1984 
      }
1985 
      else if (prop === 'for') {
1986 
        el.htmlFor = attributes[prop];
1987 
      }
1988 
      else {
1989 
        el.setAttribute(prop, attributes[prop]);
1990 
      }
1991 
    }
1992 
    return el;
1993 
  }
1994 
 
1995 
  /**
1996 
   * Adds class to an element
1997 
   * @memberOf fabric.util
1998 
   * @param {HTMLElement} element Element to add class to
1999 
   * @param {String} className Class to add to an element
2000 
   */
2001 
  function addClass(element, className) {
2002 
    if (element && (' ' + element.className + ' ').indexOf(' ' + className + ' ') === -1) {
2003 
      element.className += (element.className ? ' ' : '') + className;
2004 
    }
2005 
  }
2006 
 
2007 
  /**
2008 
   * Wraps element with another element
2009 
   * @memberOf fabric.util
2010 
   * @param {HTMLElement} element Element to wrap
2011 
   * @param {HTMLElement|String} wrapper Element to wrap with
2012 
   * @param {Object} [attributes] Attributes to set on a wrapper
2013 
   * @return {HTMLElement} wrapper
2014 
   */
2015 
  function wrapElement(element, wrapper, attributes) {
2016 
    if (typeof wrapper === 'string') {
2017 
      wrapper = makeElement(wrapper, attributes);
2018 
    }
2019 
    if (element.parentNode) {
2020 
      element.parentNode.replaceChild(wrapper, element);
2021 
    }
2022 
    wrapper.appendChild(element);
2023 
    return wrapper;
2024 
  }
2025 
 
2026 
  /**
2027 
   * Returns element scroll offsets
2028 
   * @memberOf fabric.util
2029 
   * @param {HTMLElement} element Element to operate on
2030 
   * @param {HTMLElement} upperCanvasEl Upper canvas element
2031 
   * @return {Object} Object with left/top values
2032 
   */
2033 
  function getScrollLeftTop(element, upperCanvasEl) {
2034 
 
2035 
    var firstFixedAncestor,
2036 
        origElement,
2037 
        left = 0,
2038 
        top = 0,
2039 
        docElement = fabric.document.documentElement,
2040 
        body = fabric.document.body || {
2041 
          scrollLeft: 0, scrollTop: 0
2042 
        };
2043 
 
2044 
    origElement = element;
2045 
 
2046 
    while (element && element.parentNode && !firstFixedAncestor) {
2047 
 
2048 
      element = element.parentNode;
2049 
 
2050 
      if (element.nodeType === 1 &&
2051 
          fabric.util.getElementStyle(element, 'position') === 'fixed') {
2052 
        firstFixedAncestor = element;
2053 
      }
2054 
 
2055 
      if (element.nodeType === 1 &&
2056 
          origElement !== upperCanvasEl &&
2057 
          fabric.util.getElementStyle(element, 'position') === 'absolute') {
2058 
        left = 0;
2059 
        top = 0;
2060 
      }
2061 
      else if (element === fabric.document) {
2062 
        left = body.scrollLeft || docElement.scrollLeft || 0;
2063 
        top = body.scrollTop ||  docElement.scrollTop || 0;
2064 
      }
2065 
      else {
2066 
        left += element.scrollLeft || 0;
2067 
        top += element.scrollTop || 0;
2068 
      }
2069 
    }
2070 
 
2071 
    return { left: left, top: top };
2072 
  }
2073 
 
2074 
  /**
2075 
   * Returns offset for a given element
2076 
   * @function
2077 
   * @memberOf fabric.util
2078 
   * @param {HTMLElement} element Element to get offset for
2079 
   * @return {Object} Object with "left" and "top" properties
2080 
   */
2081 
  function getElementOffset(element) {
2082 
    var docElem,
2083 
        doc = element && element.ownerDocument,
2084 
        box = { left: 0, top: 0 },
2085 
        offset = { left: 0, top: 0 },
2086 
        scrollLeftTop,
2087 
        offsetAttributes = {
2088 
          borderLeftWidth: 'left',
2089 
          borderTopWidth:  'top',
2090 
          paddingLeft:     'left',
2091 
          paddingTop:      'top'
2092 
        };
2093 
 
2094 
    if (!doc) {
2095 
      return { left: 0, top: 0 };
2096 
    }
2097 
 
2098 
    for (var attr in offsetAttributes) {
2099 
      offset[offsetAttributes[attr]] += parseInt(getElementStyle(element, attr), 10) || 0;
2100 
    }
2101 
 
2102 
    docElem = doc.documentElement;
2103 
    if ( typeof element.getBoundingClientRect !== 'undefined' ) {
2104 
      box = element.getBoundingClientRect();
2105 
    }
2106 
 
2107 
    scrollLeftTop = fabric.util.getScrollLeftTop(element, null);
2108 
 
2109 
    return {
2110 
      left: box.left + scrollLeftTop.left - (docElem.clientLeft || 0) + offset.left,
2111 
      top: box.top + scrollLeftTop.top - (docElem.clientTop || 0)  + offset.top
2112 
    };
2113 
  }
2114 
 
2115 
  /**
2116 
  * Returns style attribute value of a given element
2117 
  * @memberOf fabric.util
2118 
  * @param {HTMLElement} element Element to get style attribute for
2119 
  * @param {String} attr Style attribute to get for element
2120 
  * @return {String} Style attribute value of the given element.
2121 
  */
2122 
  var getElementStyle;
2123 
  if (fabric.document.defaultView && fabric.document.defaultView.getComputedStyle) {
2124 
    getElementStyle = function(element, attr) {
2125 
      var style = fabric.document.defaultView.getComputedStyle(element, null);
2126 
      return style ? style[attr] : undefined;
2127 
    };
2128 
  }
2129 
  else {
2130 
    getElementStyle = function(element, attr) {
2131 
      var value = element.style[attr];
2132 
      if (!value && element.currentStyle) {
2133 
        value = element.currentStyle[attr];
2134 
      }
2135 
      return value;
2136 
    };
2137 
  }
2138 
 
2139 
  (function () {
2140 
    var style = fabric.document.documentElement.style,
2141 
        selectProp = 'userSelect' in style
2142 
          ? 'userSelect'
2143 
          : 'MozUserSelect' in style
2144 
            ? 'MozUserSelect'
2145 
            : 'WebkitUserSelect' in style
2146 
              ? 'WebkitUserSelect'
2147 
              : 'KhtmlUserSelect' in style
2148 
                ? 'KhtmlUserSelect'
2149 
                : '';
2150 
 
2151 
    /**
2152 
     * Makes element unselectable
2153 
     * @memberOf fabric.util
2154 
     * @param {HTMLElement} element Element to make unselectable
2155 
     * @return {HTMLElement} Element that was passed in
2156 
     */
2157 
    function makeElementUnselectable(element) {
2158 
      if (typeof element.onselectstart !== 'undefined') {
2159 
        element.onselectstart = fabric.util.falseFunction;
2160 
      }
2161 
      if (selectProp) {
2162 
        element.style[selectProp] = 'none';
2163 
      }
2164 
      else if (typeof element.unselectable === 'string') {
2165 
        element.unselectable = 'on';
2166 
      }
2167 
      return element;
2168 
    }
2169 
 
2170 
    /**
2171 
     * Makes element selectable
2172 
     * @memberOf fabric.util
2173 
     * @param {HTMLElement} element Element to make selectable
2174 
     * @return {HTMLElement} Element that was passed in
2175 
     */
2176 
    function makeElementSelectable(element) {
2177 
      if (typeof element.onselectstart !== 'undefined') {
2178 
        element.onselectstart = null;
2179 
      }
2180 
      if (selectProp) {
2181 
        element.style[selectProp] = '';
2182 
      }
2183 
      else if (typeof element.unselectable === 'string') {
2184 
        element.unselectable = '';
2185 
      }
2186 
      return element;
2187 
    }
2188 
 
2189 
    fabric.util.makeElementUnselectable = makeElementUnselectable;
2190 
    fabric.util.makeElementSelectable = makeElementSelectable;
2191 
  })();
2192 
 
2193 
  (function() {
2194 
 
2195 
    /**
2196 
     * Inserts a script element with a given url into a document; invokes callback, when that script is finished loading
2197 
     * @memberOf fabric.util
2198 
     * @param {String} url URL of a script to load
2199 
     * @param {Function} callback Callback to execute when script is finished loading
2200 
     */
2201 
    function getScript(url, callback) {
2202 
      var headEl = fabric.document.getElementsByTagName('head')[0],
2203 
          scriptEl = fabric.document.createElement('script'),
2204 
          loading = true;
2205 
 
2206 
      /** @ignore */
2207 
      scriptEl.onload = /** @ignore */ scriptEl.onreadystatechange = function(e) {
2208 
        if (loading) {
2209 
          if (typeof this.readyState === 'string' &&
2210 
              this.readyState !== 'loaded' &&
2211 
              this.readyState !== 'complete') {
2212 
            return;
2213 
          }
2214 
          loading = false;
2215 
          callback(e || fabric.window.event);
2216 
          scriptEl = scriptEl.onload = scriptEl.onreadystatechange = null;
2217 
        }
2218 
      };
2219 
      scriptEl.src = url;
2220 
      headEl.appendChild(scriptEl);
2221 
      // causes issue in Opera
2222 
      // headEl.removeChild(scriptEl);
2223 
    }
2224 
 
2225 
    fabric.util.getScript = getScript;
2226 
  })();
2227 
 
2228 
  fabric.util.getById = getById;
2229 
  fabric.util.toArray = toArray;
2230 
  fabric.util.makeElement = makeElement;
2231 
  fabric.util.addClass = addClass;
2232 
  fabric.util.wrapElement = wrapElement;
2233 
  fabric.util.getScrollLeftTop = getScrollLeftTop;
2234 
  fabric.util.getElementOffset = getElementOffset;
2235 
  fabric.util.getElementStyle = getElementStyle;
2236 
 
2237 
})();
2238 
 
2239 
 
2240 
(function() {
2241 
 
2242 
  function addParamToUrl(url, param) {
2243 
    return url + (/\?/.test(url) ? '&' : '?') + param;
2244 
  }
2245 
 
2246 
  var makeXHR = (function() {
2247 
    var factories = [
2248 
      function() { return new ActiveXObject('Microsoft.XMLHTTP'); },
2249 
      function() { return new ActiveXObject('Msxml2.XMLHTTP'); },
2250 
      function() { return new ActiveXObject('Msxml2.XMLHTTP.3.0'); },
2251 
      function() { return new XMLHttpRequest(); }
2252 
    ];
2253 
    for (var i = factories.length; i--; ) {
2254 
      try {
2255 
        var req = factories[i]();
2256 
        if (req) {
2257 
          return factories[i];
2258 
        }
2259 
      }
2260 
      catch (err) { }
2261 
    }
2262 
  })();
2263 
 
2264 
  function emptyFn() { }
2265 
 
2266 
  /**
2267 
   * Cross-browser abstraction for sending XMLHttpRequest
2268 
   * @memberOf fabric.util
2269 
   * @param {String} url URL to send XMLHttpRequest to
2270 
   * @param {Object} [options] Options object
2271 
   * @param {String} [options.method="GET"]
2272 
   * @param {Function} options.onComplete Callback to invoke when request is completed
2273 
   * @return {XMLHttpRequest} request
2274 
   */
2275 
  function request(url, options) {
2276 
 
2277 
    options || (options = { });
2278 
 
2279 
    var method = options.method ? options.method.toUpperCase() : 'GET',
2280 
        onComplete = options.onComplete || function() { },
2281 
        xhr = makeXHR(),
2282 
        body;
2283 
 
2284 
    /** @ignore */
2285 
    xhr.onreadystatechange = function() {
2286 
      if (xhr.readyState === 4) {
2287 
        onComplete(xhr);
2288 
        xhr.onreadystatechange = emptyFn;
2289 
      }
2290 
    };
2291 
 
2292 
    if (method === 'GET') {
2293 
      body = null;
2294 
      if (typeof options.parameters === 'string') {
2295 
        url = addParamToUrl(url, options.parameters);
2296 
      }
2297 
    }
2298 
 
2299 
    xhr.open(method, url, true);
2300 
 
2301 
    if (method === 'POST' || method === 'PUT') {
2302 
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
2303 
    }
2304 
 
2305 
    xhr.send(body);
2306 
    return xhr;
2307 
  }
2308 
 
2309 
  fabric.util.request = request;
2310 
})();
2311 
 
2312 
 
2313 
/**
2314 
 * Wrapper around `console.log` (when available)
2315 
 * @param {Any} [values] Values to log
2316 
 */
2317 
fabric.log = function() { };
2318 
 
2319 
/**
2320 
 * Wrapper around `console.warn` (when available)
2321 
 * @param {Any} [values] Values to log as a warning
2322 
 */
2323 
fabric.warn = function() { };
2324 
 
2325 
if (typeof console !== 'undefined') {
2326 
 
2327 
  ['log', 'warn'].forEach(function(methodName) {
2328 
 
2329 
    if (typeof console[methodName] !== 'undefined' &&
2330 
        typeof console[methodName].apply === 'function') {
2331 
 
2332 
      fabric[methodName] = function() {
2333 
        return console[methodName].apply(console, arguments);
2334 
      };
2335 
    }
2336 
  });
2337 
}
2338 
 
2339 
 
2340 
(function() {
2341 
 
2342 
  /**
2343 
   * Changes value from one to another within certain period of time, invoking callbacks as value is being changed.
2344 
   * @memberOf fabric.util
2345 
   * @param {Object} [options] Animation options
2346 
   * @param {Function} [options.onChange] Callback; invoked on every value change
2347 
   * @param {Function} [options.onComplete] Callback; invoked when value change is completed
2348 
   * @param {Number} [options.startValue=0] Starting value
2349 
   * @param {Number} [options.endValue=100] Ending value
2350 
   * @param {Number} [options.byValue=100] Value to modify the property by
2351 
   * @param {Function} [options.easing] Easing function
2352 
   * @param {Number} [options.duration=500] Duration of change (in ms)
2353 
   */
2354 
  function animate(options) {
2355 
 
2356 
    requestAnimFrame(function(timestamp) {
2357 
      options || (options = { });
2358 
 
2359 
      var start = timestamp || +new Date(),
2360 
          duration = options.duration || 500,
2361 
          finish = start + duration, time,
2362 
          onChange = options.onChange || function() { },
2363 
          abort = options.abort || function() { return false; },
2364 
          easing = options.easing || function(t, b, c, d) {return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;},
2365 
          startValue = 'startValue' in options ? options.startValue : 0,
2366 
          endValue = 'endValue' in options ? options.endValue : 100,
2367 
          byValue = options.byValue || endValue - startValue;
2368 
 
2369 
      options.onStart && options.onStart();
2370 
 
2371 
      (function tick(ticktime) {
2372 
        time = ticktime || +new Date();
2373 
        var currentTime = time > finish ? duration : (time - start);
2374 
        if (abort()) {
2375 
          options.onComplete && options.onComplete();
2376 
          return;
2377 
        }
2378 
        onChange(easing(currentTime, startValue, byValue, duration));
2379 
        if (time > finish) {
2380 
          options.onComplete && options.onComplete();
2381 
          return;
2382 
        }
2383 
        requestAnimFrame(tick);
2384 
      })(start);
2385 
    });
2386 
 
2387 
  }
2388 
 
2389 
  var _requestAnimFrame = fabric.window.requestAnimationFrame       ||
2390 
                          fabric.window.webkitRequestAnimationFrame ||
2391 
                          fabric.window.mozRequestAnimationFrame    ||
2392 
                          fabric.window.oRequestAnimationFrame      ||
2393 
                          fabric.window.msRequestAnimationFrame     ||
2394 
                          function(callback) {
2395 
                            fabric.window.setTimeout(callback, 1000 / 60);
2396 
                          };
2397 
  /**
2398 
    * requestAnimationFrame polyfill based on http://paulirish.com/2011/requestanimationframe-for-smart-animating/
2399 
    * In order to get a precise start time, `requestAnimFrame` should be called as an entry into the method
2400 
    * @memberOf fabric.util
2401 
    * @param {Function} callback Callback to invoke
2402 
    * @param {DOMElement} element optional Element to associate with animation
2403 
    */
2404 
  function requestAnimFrame() {
2405 
    return _requestAnimFrame.apply(fabric.window, arguments);
2406 
  }
2407 
 
2408 
  fabric.util.animate = animate;
2409 
  fabric.util.requestAnimFrame = requestAnimFrame;
2410 
 
2411 
})();
2412 
 
2413 
 
2414 
(function() {
2415 
 
2416 
  function normalize(a, c, p, s) {
2417 
    if (a < Math.abs(c)) {
2418 
      a = c;
2419 
      s = p / 4;
2420 
    }
2421 
    else {
2422 
      s = p / (2 * Math.PI) * Math.asin(c / a);
2423 
    }
2424 
    return { a: a, c: c, p: p, s: s };
2425 
  }
2426 
 
2427 
  function elastic(opts, t, d) {
2428 
    return opts.a *
2429 
      Math.pow(2, 10 * (t -= 1)) *
2430 
      Math.sin( (t * d - opts.s) * (2 * Math.PI) / opts.p );
2431 
  }
2432 
 
2433 
  /**
2434 
   * Cubic easing out
2435 
   * @memberOf fabric.util.ease
2436 
   */
2437 
  function easeOutCubic(t, b, c, d) {
2438 
    return c * ((t = t / d - 1) * t * t + 1) + b;
2439 
  }
2440 
 
2441 
  /**
2442 
   * Cubic easing in and out
2443 
   * @memberOf fabric.util.ease
2444 
   */
2445 
  function easeInOutCubic(t, b, c, d) {
2446 
    t /= d/2;
2447 
    if (t < 1) {
2448 
      return c / 2 * t * t * t + b;
2449 
    }
2450 
    return c / 2 * ((t -= 2) * t * t + 2) + b;
2451 
  }
2452 
 
2453 
  /**
2454 
   * Quartic easing in
2455 
   * @memberOf fabric.util.ease
2456 
   */
2457 
  function easeInQuart(t, b, c, d) {
2458 
    return c * (t /= d) * t * t * t + b;
2459 
  }
2460 
 
2461 
  /**
2462 
   * Quartic easing out
2463 
   * @memberOf fabric.util.ease
2464 
   */
2465 
  function easeOutQuart(t, b, c, d) {
2466 
    return -c * ((t = t / d - 1) * t * t * t - 1) + b;
2467 
  }
2468 
 
2469 
  /**
2470 
   * Quartic easing in and out
2471 
   * @memberOf fabric.util.ease
2472 
   */
2473 
  function easeInOutQuart(t, b, c, d) {
2474 
    t /= d / 2;
2475 
    if (t < 1) {
2476 
      return c / 2 * t * t * t * t + b;
2477 
    }
2478 
    return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
2479 
  }
2480 
 
2481 
  /**
2482 
   * Quintic easing in
2483 
   * @memberOf fabric.util.ease
2484 
   */
2485 
  function easeInQuint(t, b, c, d) {
2486 
    return c * (t /= d) * t * t * t * t + b;
2487 
  }
2488 
 
2489 
  /**
2490 
   * Quintic easing out
2491 
   * @memberOf fabric.util.ease
2492 
   */
2493 
  function easeOutQuint(t, b, c, d) {
2494 
    return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
2495 
  }
2496 
 
2497 
  /**
2498 
   * Quintic easing in and out
2499 
   * @memberOf fabric.util.ease
2500 
   */
2501 
  function easeInOutQuint(t, b, c, d) {
2502 
    t /= d / 2;
2503 
    if (t < 1) {
2504 
      return c / 2 * t * t * t * t * t + b;
2505 
    }
2506 
    return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
2507 
  }
2508 
 
2509 
  /**
2510 
   * Sinusoidal easing in
2511 
   * @memberOf fabric.util.ease
2512 
   */
2513 
  function easeInSine(t, b, c, d) {
2514 
    return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
2515 
  }
2516 
 
2517 
  /**
2518 
   * Sinusoidal easing out
2519 
   * @memberOf fabric.util.ease
2520 
   */
2521 
  function easeOutSine(t, b, c, d) {
2522 
    return c * Math.sin(t / d * (Math.PI / 2)) + b;
2523 
  }
2524 
 
2525 
  /**
2526 
   * Sinusoidal easing in and out
2527 
   * @memberOf fabric.util.ease
2528 
   */
2529 
  function easeInOutSine(t, b, c, d) {
2530 
    return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
2531 
  }
2532 
 
2533 
  /**
2534 
   * Exponential easing in
2535 
   * @memberOf fabric.util.ease
2536 
   */
2537 
  function easeInExpo(t, b, c, d) {
2538 
    return (t === 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;
2539 
  }
2540 
 
2541 
  /**
2542 
   * Exponential easing out
2543 
   * @memberOf fabric.util.ease
2544 
   */
2545 
  function easeOutExpo(t, b, c, d) {
2546 
    return (t === d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
2547 
  }
2548 
 
2549 
  /**
2550 
   * Exponential easing in and out
2551 
   * @memberOf fabric.util.ease
2552 
   */
2553 
  function easeInOutExpo(t, b, c, d) {
2554 
    if (t === 0) {
2555 
      return b;
2556 
    }
2557 
    if (t === d) {
2558 
      return b + c;
2559 
    }
2560 
    t /= d / 2;
2561 
    if (t < 1) {
2562 
      return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
2563 
    }
2564 
    return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
2565 
  }
2566 
 
2567 
  /**
2568 
   * Circular easing in
2569 
   * @memberOf fabric.util.ease
2570 
   */
2571 
  function easeInCirc(t, b, c, d) {
2572 
    return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
2573 
  }
2574 
 
2575 
  /**
2576 
   * Circular easing out
2577 
   * @memberOf fabric.util.ease
2578 
   */
2579 
  function easeOutCirc(t, b, c, d) {
2580 
    return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
2581 
  }
2582 
 
2583 
  /**
2584 
   * Circular easing in and out
2585 
   * @memberOf fabric.util.ease
2586 
   */
2587 
  function easeInOutCirc(t, b, c, d) {
2588 
    t /= d / 2;
2589 
    if (t < 1) {
2590 
      return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
2591 
    }
2592 
    return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
2593 
  }
2594 
 
2595 
  /**
2596 
   * Elastic easing in
2597 
   * @memberOf fabric.util.ease
2598 
   */
2599 
  function easeInElastic(t, b, c, d) {
2600 
    var s = 1.70158, p = 0, a = c;
2601 
    if (t === 0) {
2602 
      return b;
2603 
    }
2604 
    t /= d;
2605 
    if (t === 1) {
2606 
      return b + c;
2607 
    }
2608 
    if (!p) {
2609 
      p = d * 0.3;
2610 
    }
2611 
    var opts = normalize(a, c, p, s);
2612 
    return -elastic(opts, t, d) + b;
2613 
  }
2614 
 
2615 
  /**
2616 
   * Elastic easing out
2617 
   * @memberOf fabric.util.ease
2618 
   */
2619 
  function easeOutElastic(t, b, c, d) {
2620 
    var s = 1.70158, p = 0, a = c;
2621 
    if (t === 0) {
2622 
      return b;
2623 
    }
2624 
    t /= d;
2625 
    if (t === 1) {
2626 
      return b + c;
2627 
    }
2628 
    if (!p) {
2629 
      p = d * 0.3;
2630 
    }
2631 
    var opts = normalize(a, c, p, s);
2632 
    return opts.a * Math.pow(2, -10 * t) * Math.sin((t * d - opts.s) * (2 * Math.PI) / opts.p ) + opts.c + b;
2633 
  }
2634 
 
2635 
  /**
2636 
   * Elastic easing in and out
2637 
   * @memberOf fabric.util.ease
2638 
   */
2639 
  function easeInOutElastic(t, b, c, d) {
2640 
    var s = 1.70158, p = 0, a = c;
2641 
    if (t === 0) {
2642 
      return b;
2643 
    }
2644 
    t /= d / 2;
2645 
    if (t === 2) {
2646 
      return b + c;
2647 
    }
2648 
    if (!p) {
2649 
      p = d * (0.3 * 1.5);
2650 
    }
2651 
    var opts = normalize(a, c, p, s);
2652 
    if (t < 1) {
2653 
      return -0.5 * elastic(opts, t, d) + b;
2654 
    }
2655 
    return opts.a * Math.pow(2, -10 * (t -= 1)) *
2656 
      Math.sin((t * d - opts.s) * (2 * Math.PI) / opts.p ) * 0.5 + opts.c + b;
2657 
  }
2658 
 
2659 
  /**
2660 
   * Backwards easing in
2661 
   * @memberOf fabric.util.ease
2662 
   */
2663 
  function easeInBack(t, b, c, d, s) {
2664 
    if (s === undefined) {
2665 
      s = 1.70158;
2666 
    }
2667 
    return c * (t /= d) * t * ((s + 1) * t - s) + b;
2668 
  }
2669 
 
2670 
  /**
2671 
   * Backwards easing out
2672 
   * @memberOf fabric.util.ease
2673 
   */
2674 
  function easeOutBack(t, b, c, d, s) {
2675 
    if (s === undefined) {
2676 
      s = 1.70158;
2677 
    }
2678 
    return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
2679 
  }
2680 
 
2681 
  /**
2682 
   * Backwards easing in and out
2683 
   * @memberOf fabric.util.ease
2684 
   */
2685 
  function easeInOutBack(t, b, c, d, s) {
2686 
    if (s === undefined) {
2687 
      s = 1.70158;
2688 
    }
2689 
    t /= d / 2;
2690 
    if (t < 1) {
2691 
      return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
2692 
    }
2693 
    return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
2694 
  }
2695 
 
2696 
  /**
2697 
   * Bouncing easing in
2698 
   * @memberOf fabric.util.ease
2699 
   */
2700 
  function easeInBounce(t, b, c, d) {
2701 
    return c - easeOutBounce (d - t, 0, c, d) + b;
2702 
  }
2703 
 
2704 
  /**
2705 
   * Bouncing easing out
2706 
   * @memberOf fabric.util.ease
2707 
   */
2708 
  function easeOutBounce(t, b, c, d) {
2709 
    if ((t /= d) < (1 / 2.75)) {
2710 
      return c * (7.5625 * t * t) + b;
2711 
    }
2712 
    else if (t < (2/2.75)) {
2713 
      return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b;
2714 
    }
2715 
    else if (t < (2.5/2.75)) {
2716 
      return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b;
2717 
    }
2718 
    else {
2719 
      return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b;
2720 
    }
2721 
  }
2722 
 
2723 
  /**
2724 
   * Bouncing easing in and out
2725 
   * @memberOf fabric.util.ease
2726 
   */
2727 
  function easeInOutBounce(t, b, c, d) {
2728 
    if (t < d / 2) {
2729 
      return easeInBounce (t * 2, 0, c, d) * 0.5 + b;
2730 
    }
2731 
    return easeOutBounce(t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b;
2732 
  }
2733 
 
2734 
  /**
2735 
   * Easing functions
2736 
   * See <a href="http://gizma.com/easing/">Easing Equations by Robert Penner</a>
2737 
   * @namespace fabric.util.ease
2738 
   */
2739 
  fabric.util.ease = {
2740 
 
2741 
    /**
2742 
     * Quadratic easing in
2743 
     * @memberOf fabric.util.ease
2744 
     */
2745 
    easeInQuad: function(t, b, c, d) {
2746 
      return c * (t /= d) * t + b;
2747 
    },
2748 
 
2749 
    /**
2750 
     * Quadratic easing out
2751 
     * @memberOf fabric.util.ease
2752 
     */
2753 
    easeOutQuad: function(t, b, c, d) {
2754 
      return -c * (t /= d) * (t - 2) + b;
2755 
    },
2756 
 
2757 
    /**
2758 
     * Quadratic easing in and out
2759 
     * @memberOf fabric.util.ease
2760 
     */
2761 
    easeInOutQuad: function(t, b, c, d) {
2762 
      t /= (d / 2);
2763 
      if (t < 1) {
2764 
        return c / 2 * t * t + b;
2765 
      }
2766 
      return -c / 2 * ((--t) * (t - 2) - 1) + b;
2767 
    },
2768 
 
2769 
    /**
2770 
     * Cubic easing in
2771 
     * @memberOf fabric.util.ease
2772 
     */
2773 
    easeInCubic: function(t, b, c, d) {
2774 
      return c * (t /= d) * t * t + b;
2775 
    },
2776 
 
2777 
    easeOutCubic: easeOutCubic,
2778 
    easeInOutCubic: easeInOutCubic,
2779 
    easeInQuart: easeInQuart,
2780 
    easeOutQuart: easeOutQuart,
2781 
    easeInOutQuart: easeInOutQuart,
2782 
    easeInQuint: easeInQuint,
2783 
    easeOutQuint: easeOutQuint,
2784 
    easeInOutQuint: easeInOutQuint,
2785 
    easeInSine: easeInSine,
2786 
    easeOutSine: easeOutSine,
2787 
    easeInOutSine: easeInOutSine,
2788 
    easeInExpo: easeInExpo,
2789 
    easeOutExpo: easeOutExpo,
2790 
    easeInOutExpo: easeInOutExpo,
2791 
    easeInCirc: easeInCirc,
2792 
    easeOutCirc: easeOutCirc,
2793 
    easeInOutCirc: easeInOutCirc,
2794 
    easeInElastic: easeInElastic,
2795 
    easeOutElastic: easeOutElastic,
2796 
    easeInOutElastic: easeInOutElastic,
2797 
    easeInBack: easeInBack,
2798 
    easeOutBack: easeOutBack,
2799 
    easeInOutBack: easeInOutBack,
2800 
    easeInBounce: easeInBounce,
2801 
    easeOutBounce: easeOutBounce,
2802 
    easeInOutBounce: easeInOutBounce
2803 
  };
2804 
 
2805 
}());
2806 
 
2807 
 
2808 
(function(global) {
2809 
 
2810 
  'use strict';
2811 
 
2812 
  /**
2813 
   * @name fabric
2814 
   * @namespace
2815 
   */
2816 
 
2817 
  var fabric = global.fabric || (global.fabric = { }),
2818 
      extend = fabric.util.object.extend,
2819 
      capitalize = fabric.util.string.capitalize,
2820 
      clone = fabric.util.object.clone,
2821 
      toFixed = fabric.util.toFixed,
2822 
      parseUnit = fabric.util.parseUnit,
2823 
      multiplyTransformMatrices = fabric.util.multiplyTransformMatrices,
2824 
 
2825 
      attributesMap = {
2826 
        cx:                   'left',
2827 
        x:                    'left',
2828 
        r:                    'radius',
2829 
        cy:                   'top',
2830 
        y:                    'top',
2831 
        display:              'visible',
2832 
        visibility:           'visible',
2833 
        transform:            'transformMatrix',
2834 
        'fill-opacity':       'fillOpacity',
2835 
        'fill-rule':          'fillRule',
2836 
        'font-family':        'fontFamily',
2837 
        'font-size':          'fontSize',
2838 
        'font-style':         'fontStyle',
2839 
        'font-weight':        'fontWeight',
2840 
        'stroke-dasharray':   'strokeDashArray',
2841 
        'stroke-linecap':     'strokeLineCap',
2842 
        'stroke-linejoin':    'strokeLineJoin',
2843 
        'stroke-miterlimit':  'strokeMiterLimit',
2844 
        'stroke-opacity':     'strokeOpacity',
2845 
        'stroke-width':       'strokeWidth',
2846 
        'text-decoration':    'textDecoration',
2847 
        'text-anchor':        'originX'
2848 
      },
2849 
 
2850 
      colorAttributes = {
2851 
        stroke: 'strokeOpacity',
2852 
        fill:   'fillOpacity'
2853 
      };
2854 
 
2855 
  fabric.cssRules = { };
2856 
  fabric.gradientDefs = { };
2857 
 
2858 
  function normalizeAttr(attr) {
2859 
    // transform attribute names
2860 
    if (attr in attributesMap) {
2861 
      return attributesMap[attr];
2862 
    }
2863 
    return attr;
2864 
  }
2865 
 
2866 
  function normalizeValue(attr, value, parentAttributes, fontSize) {
2867 
    var isArray = Object.prototype.toString.call(value) === '[object Array]',
2868 
        parsed;
2869 
 
2870 
    if ((attr === 'fill' || attr === 'stroke') && value === 'none') {
2871 
      value = '';
2872 
    }
2873 
    else if (attr === 'strokeDashArray') {
2874 
      value = value.replace(/,/g, ' ').split(/\s+/).map(function(n) {
2875 
        return parseFloat(n);
2876 
      });
2877 
    }
2878 
    else if (attr === 'transformMatrix') {
2879 
      if (parentAttributes && parentAttributes.transformMatrix) {
2880 
        value = multiplyTransformMatrices(
2881 
          parentAttributes.transformMatrix, fabric.parseTransformAttribute(value));
2882 
      }
2883 
      else {
2884 
        value = fabric.parseTransformAttribute(value);
2885 
      }
2886 
    }
2887 
    else if (attr === 'visible') {
2888 
      value = (value === 'none' || value === 'hidden') ? false : true;
2889 
      // display=none on parent element always takes precedence over child element
2890 
      if (parentAttributes && parentAttributes.visible === false) {
2891 
        value = false;
2892 
      }
2893 
    }
2894 
    else if (attr === 'originX' /* text-anchor */) {
2895 
      value = value === 'start' ? 'left' : value === 'end' ? 'right' : 'center';
2896 
    }
2897 
    else {
2898 
      parsed = isArray ? value.map(parseUnit) : parseUnit(value, fontSize);
2899 
    }
2900 
 
2901 
    return (!isArray && isNaN(parsed) ? value : parsed);
2902 
  }
2903 
 
2904 
  /**
2905 
   * @private
2906 
   * @param {Object} attributes Array of attributes to parse
2907 
   */
2908 
  function _setStrokeFillOpacity(attributes) {
2909 
    for (var attr in colorAttributes) {
2910 
 
2911 
      if (!attributes[attr] || typeof attributes[colorAttributes[attr]] === 'undefined') {
2912 
        continue;
2913 
      }
2914 
 
2915 
      if (attributes[attr].indexOf('url(') === 0) {
2916 
        continue;
2917 
      }
2918 
 
2919 
      var color = new fabric.Color(attributes[attr]);
2920 
      attributes[attr] = color.setAlpha(toFixed(color.getAlpha() * attributes[colorAttributes[attr]], 2)).toRgba();
2921 
    }
2922 
    return attributes;
2923 
  }
2924 
 
2925 
  /**
2926 
   * Parses "transform" attribute, returning an array of values
2927 
   * @static
2928 
   * @function
2929 
   * @memberOf fabric
2930 
   * @param {String} attributeValue String containing attribute value
2931 
   * @return {Array} Array of 6 elements representing transformation matrix
2932 
   */
2933 
  fabric.parseTransformAttribute = (function() {
2934 
    function rotateMatrix(matrix, args) {
2935 
      var angle = args[0];
2936 
 
2937 
      matrix[0] = Math.cos(angle);
2938 
      matrix[1] = Math.sin(angle);
2939 
      matrix[2] = -Math.sin(angle);
2940 
      matrix[3] = Math.cos(angle);
2941 
    }
2942 
 
2943 
    function scaleMatrix(matrix, args) {
2944 
      var multiplierX = args[0],
2945 
          multiplierY = (args.length === 2) ? args[1] : args[0];
2946 
 
2947 
      matrix[0] = multiplierX;
2948 
      matrix[3] = multiplierY;
2949 
    }
2950 
 
2951 
    function skewXMatrix(matrix, args) {
2952 
      matrix[2] = Math.tan(fabric.util.degreesToRadians(args[0]));
2953 
    }
2954 
 
2955 
    function skewYMatrix(matrix, args) {
2956 
      matrix[1] = Math.tan(fabric.util.degreesToRadians(args[0]));
2957 
    }
2958 
 
2959 
    function translateMatrix(matrix, args) {
2960 
      matrix[4] = args[0];
2961 
      if (args.length === 2) {
2962 
        matrix[5] = args[1];
2963 
      }
2964 
    }
2965 
 
2966 
    // identity matrix
2967 
    var iMatrix = [
2968 
          1, // a
2969 
          0, // b
2970 
          0, // c
2971 
          1, // d
2972 
          0, // e
2973 
 
2974 
        ],
2975 
 
2976 
        // == begin transform regexp
2977 
        number = fabric.reNum,
2978 
 
2979 
        commaWsp = '(?:\\s+,?\\s*|,\\s*)',
2980 
 
2981 
        skewX = '(?:(skewX)\\s*\\(\\s*(' + number + ')\\s*\\))',
2982 
 
2983 
        skewY = '(?:(skewY)\\s*\\(\\s*(' + number + ')\\s*\\))',
2984 
 
2985 
        rotate = '(?:(rotate)\\s*\\(\\s*(' + number + ')(?:' +
2986 
                    commaWsp + '(' + number + ')' +
2987 
                    commaWsp + '(' + number + '))?\\s*\\))',
2988 
 
2989 
        scale = '(?:(scale)\\s*\\(\\s*(' + number + ')(?:' +
2990 
                    commaWsp + '(' + number + '))?\\s*\\))',
2991 
 
2992 
        translate = '(?:(translate)\\s*\\(\\s*(' + number + ')(?:' +
2993 
                    commaWsp + '(' + number + '))?\\s*\\))',
2994 
 
2995 
        matrix = '(?:(matrix)\\s*\\(\\s*' +
2996 
                  '(' + number + ')' + commaWsp +
2997 
                  '(' + number + ')' + commaWsp +
2998 
                  '(' + number + ')' + commaWsp +
2999 
                  '(' + number + ')' + commaWsp +
3000 
                  '(' + number + ')' + commaWsp +
3001 
                  '(' + number + ')' +
3002 
                  '\\s*\\))',
3003 
 
3004 
        transform = '(?:' +
3005 
                    matrix + '|' +
3006 
                    translate + '|' +
3007 
                    scale + '|' +
3008 
                    rotate + '|' +
3009 
                    skewX + '|' +
3010 
                    skewY +
3011 
                    ')',
3012 
 
3013 
        transforms = '(?:' + transform + '(?:' + commaWsp + transform + ')*' + ')',
3014 
 
3015 
        transformList = '^\\s*(?:' + transforms + '?)\\s*$',
3016 
 
3017 
        // http://www.w3.org/TR/SVG/coords.html#TransformAttribute
3018 
        reTransformList = new RegExp(transformList),
3019 
        // == end transform regexp
3020 
 
3021 
        reTransform = new RegExp(transform, 'g');
3022 
 
3023 
    return function(attributeValue) {
3024 
 
3025 
      // start with identity matrix
3026 
      var matrix = iMatrix.concat(),
3027 
          matrices = [ ];
3028 
 
3029 
      // return if no argument was given or
3030 
      // an argument does not match transform attribute regexp
3031 
      if (!attributeValue || (attributeValue && !reTransformList.test(attributeValue))) {
3032 
        return matrix;
3033 
      }
3034 
 
3035 
      attributeValue.replace(reTransform, function(match) {
3036 
 
3037 
        var m = new RegExp(transform).exec(match).filter(function (match) {
3038 
              return (match !== '' && match != null);
3039 
            }),
3040 
            operation = m[1],
3041 
            args = m.slice(2).map(parseFloat);
3042 
 
3043 
        switch (operation) {
3044 
          case 'translate':
3045 
            translateMatrix(matrix, args);
3046 
            break;
3047 
          case 'rotate':
3048 
            args[0] = fabric.util.degreesToRadians(args[0]);
3049 
            rotateMatrix(matrix, args);
3050 
            break;
3051 
          case 'scale':
3052 
            scaleMatrix(matrix, args);
3053 
            break;
3054 
          case 'skewX':
3055 
            skewXMatrix(matrix, args);
3056 
            break;
3057 
          case 'skewY':
3058 
            skewYMatrix(matrix, args);
3059 
            break;
3060 
          case 'matrix':
3061 
            matrix = args;
3062 
            break;
3063 
        }
3064 
 
3065 
        // snapshot current matrix into matrices array
3066 
        matrices.push(matrix.concat());
3067 
        // reset
3068 
        matrix = iMatrix.concat();
3069 
      });
3070 
 
3071 
      var combinedMatrix = matrices[0];
3072 
      while (matrices.length > 1) {
3073 
        matrices.shift();
3074 
        combinedMatrix = fabric.util.multiplyTransformMatrices(combinedMatrix, matrices[0]);
3075 
      }
3076 
      return combinedMatrix;
3077 
    };
3078 
  })();
3079 
 
3080 
  /**
3081 
   * @private
3082 
   */
3083 
  function parseStyleString(style, oStyle) {
3084 
    var attr, value;
3085 
    style.replace(/;$/, '').split(';').forEach(function (chunk) {
3086 
      var pair = chunk.split(':');
3087 
 
3088 
      attr = normalizeAttr(pair[0].trim().toLowerCase());
3089 
      value = normalizeValue(attr, pair[1].trim());
3090 
 
3091 
      oStyle[attr] = value;
3092 
    });
3093 
  }
3094 
 
3095 
  /**
3096 
   * @private
3097 
   */
3098 
  function parseStyleObject(style, oStyle) {
3099 
    var attr, value;
3100 
    for (var prop in style) {
3101 
      if (typeof style[prop] === 'undefined') {
3102 
        continue;
3103 
      }
3104 
 
3105 
      attr = normalizeAttr(prop.toLowerCase());
3106 
      value = normalizeValue(attr, style[prop]);
3107 
 
3108 
      oStyle[attr] = value;
3109 
    }
3110 
  }
3111 
 
3112 
  /**
3113 
   * @private
3114 
   */
3115 
  function getGlobalStylesForElement(element, svgUid) {
3116 
    var styles = { };
3117 
    for (var rule in fabric.cssRules[svgUid]) {
3118 
      if (elementMatchesRule(element, rule.split(' '))) {
3119 
        for (var property in fabric.cssRules[svgUid][rule]) {
3120 
          styles[property] = fabric.cssRules[svgUid][rule][property];
3121 
        }
3122 
      }
3123 
    }
3124 
    return styles;
3125 
  }
3126 
 
3127 
  /**
3128 
   * @private
3129 
   */
3130 
  function elementMatchesRule(element, selectors) {
3131 
    var firstMatching, parentMatching = true;
3132 
    //start from rightmost selector.
3133 
    firstMatching = selectorMatches(element, selectors.pop());
3134 
    if (firstMatching && selectors.length) {
3135 
      parentMatching = doesSomeParentMatch(element, selectors);
3136 
    }
3137 
    return firstMatching && parentMatching && (selectors.length === 0);
3138 
  }
3139 
 
3140 
  function doesSomeParentMatch(element, selectors) {
3141 
    var selector, parentMatching = true;
3142 
    while (element.parentNode && element.parentNode.nodeType === 1 && selectors.length) {
3143 
      if (parentMatching) {
3144 
        selector = selectors.pop();
3145 
      }
3146 
      element = element.parentNode;
3147 
      parentMatching = selectorMatches(element, selector);
3148 
    }
3149 
    return selectors.length === 0;
3150 
  }
3151 
  /**
3152 
   * @private
3153 
   */
3154 
  function selectorMatches(element, selector) {
3155 
    var nodeName = element.nodeName,
3156 
        classNames = element.getAttribute('class'),
3157 
        id = element.getAttribute('id'), matcher;
3158 
    // i check if a selector matches slicing away part from it.
3159 
    // if i get empty string i should match
3160 
    matcher = new RegExp('^' + nodeName, 'i');
3161 
    selector = selector.replace(matcher, '');
3162 
    if (id && selector.length) {
3163 
      matcher = new RegExp('#' + id + '(?![a-zA-Z\\-]+)', 'i');
3164 
      selector = selector.replace(matcher, '');
3165 
    }
3166 
    if (classNames && selector.length) {
3167 
      classNames = classNames.split(' ');
3168 
      for (var i = classNames.length; i--;) {
3169 
        matcher = new RegExp('\\.' + classNames[i] + '(?![a-zA-Z\\-]+)', 'i');
3170 
        selector = selector.replace(matcher, '');
3171 
      }
3172 
    }
3173 
    return selector.length === 0;
3174 
  }
3175 
 
3176 
  /**
3177 
   * @private
3178 
   */
3179 
  function parseUseDirectives(doc) {
3180 
    var nodelist = doc.getElementsByTagName('use');
3181 
    while (nodelist.length) {
3182 
      var el = nodelist[0],
3183 
          xlink = el.getAttribute('xlink:href').substr(1),
3184 
          x = el.getAttribute('x') || 0,
3185 
          y = el.getAttribute('y') || 0,
3186 
          el2 = doc.getElementById(xlink).cloneNode(true),
3187 
          currentTrans = (el2.getAttribute('transform') || '') + ' translate(' + x + ', ' + y + ')',
3188 
          parentNode;
3189 
 
3190 
      for (var j = 0, attrs = el.attributes, l = attrs.length; j < l; j++) {
3191 
        var attr = attrs.item(j);
3192 
        if (attr.nodeName === 'x' || attr.nodeName === 'y' || attr.nodeName === 'xlink:href') {
3193 
          continue;
3194 
        }
3195 
 
3196 
        if (attr.nodeName === 'transform') {
3197 
          currentTrans = attr.nodeValue + ' ' + currentTrans;
3198 
        }
3199 
        else {
3200 
          el2.setAttribute(attr.nodeName, attr.nodeValue);
3201 
        }
3202 
      }
3203 
 
3204 
      el2.setAttribute('transform', currentTrans);
3205 
      el2.setAttribute('instantiated_by_use', '1');
3206 
      el2.removeAttribute('id');
3207 
      parentNode = el.parentNode;
3208 
      parentNode.replaceChild(el2, el);
3209 
    }
3210 
  }
3211 
 
3212 
  // http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute
3213 
  // matches, e.g.: +14.56e-12, etc.
3214 
  var reViewBoxAttrValue = new RegExp(
3215 
    '^' +
3216 
    '\\s*(' + fabric.reNum + '+)\\s*,?' +
3217 
    '\\s*(' + fabric.reNum + '+)\\s*,?' +
3218 
    '\\s*(' + fabric.reNum + '+)\\s*,?' +
3219 
    '\\s*(' + fabric.reNum + '+)\\s*' +
3220 
    '$'
3221 
  );
3222 
 
3223 
  /**
3224 
   * Add a <g> element that envelop all child elements and makes the viewbox transformMatrix descend on all elements
3225 
   */
3226 
  function addVBTransform(element, widthAttr, heightAttr) {
3227 
 
3228 
    var viewBoxAttr = element.getAttribute('viewBox'),
3229 
        scaleX = 1,
3230 
        scaleY = 1,
3231 
        minX = 0,
3232 
        minY = 0,
3233 
        viewBoxWidth, viewBoxHeight, matrix, el;
3234 
 
3235 
    if (viewBoxAttr && (viewBoxAttr = viewBoxAttr.match(reViewBoxAttrValue))) {
3236 
      minX = -parseFloat(viewBoxAttr[1]),
3237 
      minY = -parseFloat(viewBoxAttr[2]),
3238 
      viewBoxWidth = parseFloat(viewBoxAttr[3]),
3239 
      viewBoxHeight = parseFloat(viewBoxAttr[4]);
3240 
    }
3241 
    else {
3242 
      return;
3243 
    }
3244 
    if (widthAttr && widthAttr !== viewBoxWidth) {
3245 
      scaleX = widthAttr / viewBoxWidth;
3246 
    }
3247 
    if (heightAttr && heightAttr !== viewBoxHeight) {
3248 
      scaleY = heightAttr / viewBoxHeight;
3249 
    }
3250 
 
3251 
    // default is to preserve aspect ratio
3252 
    // preserveAspectRatio attribute to be implemented
3253 
    scaleY = scaleX = (scaleX > scaleY ? scaleY : scaleX);
3254 
 
3255 
    if (!(scaleX !== 1 || scaleY !== 1 || minX !== 0 || minY !== 0)) {
3256 
      return;
3257 
    }
3258 
    matrix = ' matrix(' + scaleX +
3259 
                  ' 0' +
3260 
                  ' 0 ' +
3261 
                  scaleY + ' ' +
3262 
                  (minX * scaleX) + ' ' +
3263 
                  (minY * scaleY) + ') ';
3264 
 
3265 
    if (element.tagName === 'svg') {
3266 
      el = element.ownerDocument.createElement('g');
3267 
      while (element.firstChild != null) {
3268 
        el.appendChild(element.firstChild);
3269 
      }
3270 
      element.appendChild(el);
3271 
    }
3272 
    else {
3273 
      el = element;
3274 
      matrix = el.getAttribute('transform') + matrix;
3275 
    }
3276 
 
3277 
    el.setAttribute('transform', matrix);
3278 
  }
3279 
 
3280 
  /**
3281 
   * Parses an SVG document, converts it to an array of corresponding fabric.* instances and passes them to a callback
3282 
   * @static
3283 
   * @function
3284 
   * @memberOf fabric
3285 
   * @param {SVGDocument} doc SVG document to parse
3286 
   * @param {Function} callback Callback to call when parsing is finished; It's being passed an array of elements (parsed from a document).
3287 
   * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created.
3288 
   */
3289 
  fabric.parseSVGDocument = (function() {
3290 
 
3291 
    var reAllowedSVGTagNames = /^(path|circle|polygon|polyline|ellipse|rect|line|image|text)$/,
3292 
        reViewBoxTagNames = /^(symbol|image|marker|pattern|view)$/;
3293 
 
3294 
    function hasAncestorWithNodeName(element, nodeName) {
3295 
      while (element && (element = element.parentNode)) {
3296 
        if (nodeName.test(element.nodeName) && !element.getAttribute('instantiated_by_use')) {
3297 
          return true;
3298 
        }
3299 
      }
3300 
      return false;
3301 
    }
3302 
 
3303 
    return function(doc, callback, reviver) {
3304 
      if (!doc) {
3305 
        return;
3306 
      }
3307 
 
3308 
      parseUseDirectives(doc);
3309 
 
3310 
      var startTime = new Date(),
3311 
          svgUid =  fabric.Object.__uid++,
3312 
          widthAttr, heightAttr, toBeParsed = false;
3313 
 
3314 
      if (doc.getAttribute('width') && doc.getAttribute('width') !== '100%') {
3315 
        widthAttr = parseUnit(doc.getAttribute('width'));
3316 
      }
3317 
      if (doc.getAttribute('height') && doc.getAttribute('height') !== '100%') {
3318 
        heightAttr = parseUnit(doc.getAttribute('height'));
3319 
      }
3320 
 
3321 
      if (!widthAttr || !heightAttr) {
3322 
        var viewBoxAttr = doc.getAttribute('viewBox');
3323 
        if (viewBoxAttr && (viewBoxAttr = viewBoxAttr.match(reViewBoxAttrValue))) {
3324 
          widthAttr = parseFloat(viewBoxAttr[3]),
3325 
          heightAttr = parseFloat(viewBoxAttr[4]);
3326 
        }
3327 
        else {
3328 
          toBeParsed = true;
3329 
        }
3330 
      }
3331 
 
3332 
      addVBTransform(doc, widthAttr, heightAttr);
3333 
 
3334 
      var descendants = fabric.util.toArray(doc.getElementsByTagName('*'));
3335 
 
3336 
      if (descendants.length === 0 && fabric.isLikelyNode) {
3337 
        // we're likely in node, where "o3-xml" library fails to gEBTN("*")
3338 
        // https://github.com/ajaxorg/node-o3-xml/issues/21
3339 
        descendants = doc.selectNodes('//*[name(.)!="svg"]');
3340 
        var arr = [ ];
3341 
        for (var i = 0, len = descendants.length; i < len; i++) {
3342 
          arr[i] = descendants[i];
3343 
        }
3344 
        descendants = arr;
3345 
      }
3346 
 
3347 
      var elements = descendants.filter(function(el) {
3348 
        reViewBoxTagNames.test(el.tagName) && addVBTransform(el, 0, 0);
3349 
        return reAllowedSVGTagNames.test(el.tagName) &&
3350 
              !hasAncestorWithNodeName(el, /^(?:pattern|defs|symbol)$/); // http://www.w3.org/TR/SVG/struct.html#DefsElement
3351 
      });
3352 
 
3353 
      if (!elements || (elements && !elements.length)) {
3354 
        callback && callback([], {});
3355 
        return;
3356 
      }
3357 
 
3358 
      var options = {
3359 
        width: widthAttr,
3360 
        height: heightAttr,
3361 
        svgUid: svgUid,
3362 
        toBeParsed: toBeParsed
3363 
      };
3364 
 
3365 
      fabric.gradientDefs[svgUid] = fabric.getGradientDefs(doc);
3366 
      fabric.cssRules[svgUid] = fabric.getCSSRules(doc);
3367 
      // Precedence of rules:   style > class > attribute
3368 
      fabric.parseElements(elements, function(instances) {
3369 
        fabric.documentParsingTime = new Date() - startTime;
3370 
        if (callback) {
3371 
          callback(instances, options);
3372 
        }
3373 
      }, clone(options), reviver);
3374 
    };
3375 
  })();
3376 
 
3377 
  /**
3378 
   * Used for caching SVG documents (loaded via `fabric.Canvas#loadSVGFromURL`)
3379 
   * @namespace
3380 
   */
3381 
  var svgCache = {
3382 
 
3383 
    /**
3384 
    * @param {String} name
3385 
    * @param {Function} callback
3386 
    */
3387 
    has: function (name, callback) {
3388 
      callback(false);
3389 
    },
3390 
 
3391 
    get: function () {
3392 
      /* NOOP */
3393 
    },
3394 
 
3395 
    set: function () {
3396 
      /* NOOP */
3397 
    }
3398 
  };
3399 
 
3400 
  /**
3401 
   * @private
3402 
   */
3403 
  function _enlivenCachedObject(cachedObject) {
3404 
 
3405 
    var objects = cachedObject.objects,
3406 
        options = cachedObject.options;
3407 
 
3408 
    objects = objects.map(function (o) {
3409 
      return fabric[capitalize(o.type)].fromObject(o);
3410 
    });
3411 
 
3412 
    return ({ objects: objects, options: options });
3413 
  }
3414 
 
3415 
  /**
3416 
   * @private
3417 
   */
3418 
  function _createSVGPattern(markup, canvas, property) {
3419 
    if (canvas[property] && canvas[property].toSVG) {
3420 
      markup.push(
3421 
        '<pattern x="0" y="0" id="', property, 'Pattern" ',
3422 
          'width="', canvas[property].source.width,
3423 
          '" height="', canvas[property].source.height,
3424 
          '" patternUnits="userSpaceOnUse">',
3425 
        '<image x="0" y="0" ',
3426 
        'width="', canvas[property].source.width,
3427 
        '" height="', canvas[property].source.height,
3428 
        '" xlink:href="', canvas[property].source.src,
3429 
        '"></image></pattern>'
3430 
      );
3431 
    }
3432 
  }
3433 
 
3434 
  var reFontDeclaration = new RegExp(
3435 
    '(normal|italic)?\\s*(normal|small-caps)?\\s*' +
3436 
    '(normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900)?\\s*(' +
3437 
      fabric.reNum +
3438 
    '(?:px|cm|mm|em|pt|pc|in)*)(?:\\/(normal|' + fabric.reNum + '))?\\s+(.*)');
3439 
 
3440 
  extend(fabric, {
3441 
    /**
3442 
     * Parses a short font declaration, building adding its properties to a style object
3443 
     * @static
3444 
     * @function
3445 
     * @memberOf fabric
3446 
     * @param {String} value font declaration
3447 
     * @param {Object} oStyle definition
3448 
     */
3449 
    parseFontDeclaration: function(value, oStyle) {
3450 
      var match = value.match(reFontDeclaration);
3451 
 
3452 
      if (!match) {
3453 
        return;
3454 
      }
3455 
      var fontStyle = match[1],
3456 
          // font variant is not used
3457 
          // fontVariant = match[2],
3458 
          fontWeight = match[3],
3459 
          fontSize = match[4],
3460 
          lineHeight = match[5],
3461 
          fontFamily = match[6];
3462 
 
3463 
      if (fontStyle) {
3464 
        oStyle.fontStyle = fontStyle;
3465 
      }
3466 
      if (fontWeight) {
3467 
        oStyle.fontWeight = isNaN(parseFloat(fontWeight)) ? fontWeight : parseFloat(fontWeight);
3468 
      }
3469 
      if (fontSize) {
3470 
        oStyle.fontSize = parseUnit(fontSize);
3471 
      }
3472 
      if (fontFamily) {
3473 
        oStyle.fontFamily = fontFamily;
3474 
      }
3475 
      if (lineHeight) {
3476 
        oStyle.lineHeight = lineHeight === 'normal' ? 1 : lineHeight;
3477 
      }
3478 
    },
3479 
 
3480 
    /**
3481 
     * Parses an SVG document, returning all of the gradient declarations found in it
3482 
     * @static
3483 
     * @function
3484 
     * @memberOf fabric
3485 
     * @param {SVGDocument} doc SVG document to parse
3486 
     * @return {Object} Gradient definitions; key corresponds to element id, value -- to gradient definition element
3487 
     */
3488 
    getGradientDefs: function(doc) {
3489 
      var linearGradientEls = doc.getElementsByTagName('linearGradient'),
3490 
          radialGradientEls = doc.getElementsByTagName('radialGradient'),
3491 
          el, i, j = 0, id, xlink, elList = [ ],
3492 
          gradientDefs = { }, idsToXlinkMap = { };
3493 
 
3494 
      elList.length = linearGradientEls.length + radialGradientEls.length;
3495 
      i = linearGradientEls.length;
3496 
      while (i--) {
3497 
        elList[j++] = linearGradientEls[i];
3498 
      }
3499 
      i = radialGradientEls.length;
3500 
      while (i--) {
3501 
        elList[j++] = radialGradientEls[i];
3502 
      }
3503 
 
3504 
      while (j--) {
3505 
        el = elList[j];
3506 
        xlink = el.getAttribute('xlink:href');
3507 
        id = el.getAttribute('id');
3508 
        if (xlink) {
3509 
          idsToXlinkMap[id] = xlink.substr(1);
3510 
        }
3511 
        gradientDefs[id] = el;
3512 
      }
3513 
 
3514 
      for (id in idsToXlinkMap) {
3515 
        var el2 = gradientDefs[idsToXlinkMap[id]].cloneNode(true);
3516 
        el = gradientDefs[id];
3517 
        while (el2.firstChild) {
3518 
          el.appendChild(el2.firstChild);
3519 
        }
3520 
      }
3521 
      return gradientDefs;
3522 
    },
3523 
 
3524 
    /**
3525 
     * Returns an object of attributes' name/value, given element and an array of attribute names;
3526 
     * Parses parent "g" nodes recursively upwards.
3527 
     * @static
3528 
     * @memberOf fabric
3529 
     * @param {DOMElement} element Element to parse
3530 
     * @param {Array} attributes Array of attributes to parse
3531 
     * @return {Object} object containing parsed attributes' names/values
3532 
     */
3533 
    parseAttributes: function(element, attributes, svgUid) {
3534 
 
3535 
      if (!element) {
3536 
        return;
3537 
      }
3538 
 
3539 
      var value,
3540 
          parentAttributes = { },
3541 
          fontSize;
3542 
 
3543 
      if (typeof svgUid === 'undefined') {
3544 
        svgUid = element.getAttribute('svgUid');
3545 
      }
3546 
      // if there's a parent container (`g` or `a` or `symbol` node), parse its attributes recursively upwards
3547 
      if (element.parentNode && /^symbol|[g|a]$/i.test(element.parentNode.nodeName)) {
3548 
        parentAttributes = fabric.parseAttributes(element.parentNode, attributes, svgUid);
3549 
      }
3550 
      fontSize = (parentAttributes && parentAttributes.fontSize ) ||
3551 
                 element.getAttribute('font-size') || fabric.Text.DEFAULT_SVG_FONT_SIZE;
3552 
 
3553 
      var ownAttributes = attributes.reduce(function(memo, attr) {
3554 
        value = element.getAttribute(attr);
3555 
        if (value) {
3556 
          attr = normalizeAttr(attr);
3557 
          value = normalizeValue(attr, value, parentAttributes, fontSize);
3558 
 
3559 
          memo[attr] = value;
3560 
        }
3561 
        return memo;
3562 
      }, { });
3563 
 
3564 
      // add values parsed from style, which take precedence over attributes
3565 
      // (see: http://www.w3.org/TR/SVG/styling.html#UsingPresentationAttributes)
3566 
      ownAttributes = extend(ownAttributes,
3567 
        extend(getGlobalStylesForElement(element, svgUid), fabric.parseStyleAttribute(element)));
3568 
      if (ownAttributes.font) {
3569 
        fabric.parseFontDeclaration(ownAttributes.font, ownAttributes);
3570 
      }
3571 
      return _setStrokeFillOpacity(extend(parentAttributes, ownAttributes));
3572 
    },
3573 
 
3574 
    /**
3575 
     * Transforms an array of svg elements to corresponding fabric.* instances
3576 
     * @static
3577 
     * @memberOf fabric
3578 
     * @param {Array} elements Array of elements to parse
3579 
     * @param {Function} callback Being passed an array of fabric instances (transformed from SVG elements)
3580 
     * @param {Object} [options] Options object
3581 
     * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created.
3582 
     */
3583 
    parseElements: function(elements, callback, options, reviver) {
3584 
      new fabric.ElementsParser(elements, callback, options, reviver).parse();
3585 
    },
3586 
 
3587 
    /**
3588 
     * Parses "style" attribute, retuning an object with values
3589 
     * @static
3590 
     * @memberOf fabric
3591 
     * @param {SVGElement} element Element to parse
3592 
     * @return {Object} Objects with values parsed from style attribute of an element
3593 
     */
3594 
    parseStyleAttribute: function(element) {
3595 
      var oStyle = { },
3596 
          style = element.getAttribute('style');
3597 
 
3598 
      if (!style) {
3599 
        return oStyle;
3600 
      }
3601 
 
3602 
      if (typeof style === 'string') {
3603 
        parseStyleString(style, oStyle);
3604 
      }
3605 
      else {
3606 
        parseStyleObject(style, oStyle);
3607 
      }
3608 
 
3609 
      return oStyle;
3610 
    },
3611 
 
3612 
    /**
3613 
     * Parses "points" attribute, returning an array of values
3614 
     * @static
3615 
     * @memberOf fabric
3616 
     * @param {String} points points attribute string
3617 
     * @return {Array} array of points
3618 
     */
3619 
    parsePointsAttribute: function(points) {
3620 
 
3621 
      // points attribute is required and must not be empty
3622 
      if (!points) {
3623 
        return null;
3624 
      }
3625 
 
3626 
      // replace commas with whitespace and remove bookending whitespace
3627 
      points = points.replace(/,/g, ' ').trim();
3628 
 
3629 
      points = points.split(/\s+/);
3630 
      var parsedPoints = [ ], i, len;
3631 
 
3632 
      i = 0;
3633 
      len = points.length;
3634 
      for (; i < len; i+=2) {
3635 
        parsedPoints.push({
3636 
          x: parseFloat(points[i]),
3637 
          y: parseFloat(points[i + 1])
3638 
        });
3639 
      }
3640 
 
3641 
      // odd number of points is an error
3642 
      // if (parsedPoints.length % 2 !== 0) {
3643 
      //   return null;
3644 
      // }
3645 
 
3646 
      return parsedPoints;
3647 
    },
3648 
 
3649 
    /**
3650 
     * Returns CSS rules for a given SVG document
3651 
     * @static
3652 
     * @function
3653 
     * @memberOf fabric
3654 
     * @param {SVGDocument} doc SVG document to parse
3655 
     * @return {Object} CSS rules of this document
3656 
     */
3657 
    getCSSRules: function(doc) {
3658 
      var styles = doc.getElementsByTagName('style'),
3659 
          allRules = { }, rules;
3660 
 
3661 
      // very crude parsing of style contents
3662 
      for (var i = 0, len = styles.length; i < len; i++) {
3663 
        var styleContents = styles[i].textContent;
3664 
 
3665 
        // remove comments
3666 
        styleContents = styleContents.replace(/\/\*[\s\S]*?\*\//g, '');
3667 
        if (styleContents.trim() === '') {
3668 
          continue;
3669 
        }
3670 
        rules = styleContents.match(/[^{]*\{[\s\S]*?\}/g);
3671 
        rules = rules.map(function(rule) { return rule.trim(); });
3672 
 
3673 
        rules.forEach(function(rule) {
3674 
 
3675 
          var match = rule.match(/([\s\S]*?)\s*\{([^}]*)\}/),
3676 
          ruleObj = { }, declaration = match[2].trim(),
3677 
          propertyValuePairs = declaration.replace(/;$/, '').split(/\s*;\s*/);
3678 
 
3679 
          for (var i = 0, len = propertyValuePairs.length; i < len; i++) {
3680 
            var pair = propertyValuePairs[i].split(/\s*:\s*/),
3681 
                property = normalizeAttr(pair[0]),
3682 
                value = normalizeValue(property, pair[1], pair[0]);
3683 
            ruleObj[property] = value;
3684 
          }
3685 
          rule = match[1];
3686 
          rule.split(',').forEach(function(_rule) {
3687 
            _rule = _rule.replace(/^svg/i, '').trim();
3688 
            if (_rule === '') {
3689 
              return;
3690 
            }
3691 
            allRules[_rule] = fabric.util.object.clone(ruleObj);
3692 
          });
3693 
        });
3694 
      }
3695 
      return allRules;
3696 
    },
3697 
 
3698 
    /**
3699 
     * Takes url corresponding to an SVG document, and parses it into a set of fabric objects. Note that SVG is fetched via XMLHttpRequest, so it needs to conform to SOP (Same Origin Policy)
3700 
     * @memberof fabric
3701 
     * @param {String} url
3702 
     * @param {Function} callback
3703 
     * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created.
3704 
     */
3705 
    loadSVGFromURL: function(url, callback, reviver) {
3706 
 
3707 
      url = url.replace(/^\n\s*/, '').trim();
3708 
      svgCache.has(url, function (hasUrl) {
3709 
        if (hasUrl) {
3710 
          svgCache.get(url, function (value) {
3711 
            var enlivedRecord = _enlivenCachedObject(value);
3712 
            callback(enlivedRecord.objects, enlivedRecord.options);
3713 
          });
3714 
        }
3715 
        else {
3716 
          new fabric.util.request(url, {
3717 
            method: 'get',
3718 
            onComplete: onComplete
3719 
          });
3720 
        }
3721 
      });
3722 
 
3723 
      function onComplete(r) {
3724 
 
3725 
        var xml = r.responseXML;
3726 
        if (xml && !xml.documentElement && fabric.window.ActiveXObject && r.responseText) {
3727 
          xml = new ActiveXObject('Microsoft.XMLDOM');
3728 
          xml.async = 'false';
3729 
          //IE chokes on DOCTYPE
3730 
          xml.loadXML(r.responseText.replace(/<!DOCTYPE[\s\S]*?(\[[\s\S]*\])*?>/i, ''));
3731 
        }
3732 
        if (!xml || !xml.documentElement) {
3733 
          return;
3734 
        }
3735 
 
3736 
        fabric.parseSVGDocument(xml.documentElement, function (results, options) {
3737 
          svgCache.set(url, {
3738 
            objects: fabric.util.array.invoke(results, 'toObject'),
3739 
            options: options
3740 
          });
3741 
          callback(results, options);
3742 
        }, reviver);
3743 
      }
3744 
    },
3745 
 
3746 
    /**
3747 
     * Takes string corresponding to an SVG document, and parses it into a set of fabric objects
3748 
     * @memberof fabric
3749 
     * @param {String} string
3750 
     * @param {Function} callback
3751 
     * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created.
3752 
     */
3753 
    loadSVGFromString: function(string, callback, reviver) {
3754 
      string = string.trim();
3755 
      var doc;
3756 
      if (typeof DOMParser !== 'undefined') {
3757 
        var parser = new DOMParser();
3758 
        if (parser && parser.parseFromString) {
3759 
          doc = parser.parseFromString(string, 'text/xml');
3760 
        }
3761 
      }
3762 
      else if (fabric.window.ActiveXObject) {
3763 
        doc = new ActiveXObject('Microsoft.XMLDOM');
3764 
        doc.async = 'false';
3765 
        // IE chokes on DOCTYPE
3766 
        doc.loadXML(string.replace(/<!DOCTYPE[\s\S]*?(\[[\s\S]*\])*?>/i, ''));
3767 
      }
3768 
 
3769 
      fabric.parseSVGDocument(doc.documentElement, function (results, options) {
3770 
        callback(results, options);
3771 
      }, reviver);
3772 
    },
3773 
 
3774 
    /**
3775 
     * Creates markup containing SVG font faces
3776 
     * @param {Array} objects Array of fabric objects
3777 
     * @return {String}
3778 
     */
3779 
    createSVGFontFacesMarkup: function(objects) {
3780 
      var markup = '';
3781 
 
3782 
      for (var i = 0, len = objects.length; i < len; i++) {
3783 
        if (objects[i].type !== 'text' || !objects[i].path) {
3784 
          continue;
3785 
        }
3786 
 
3787 
        markup += [
3788 
          //jscs:disable validateIndentation
3789 
          '@font-face {',
3790 
            'font-family: ', objects[i].fontFamily, '; ',
3791 
            'src: url(\'', objects[i].path, '\')',
3792 
          '}'
3793 
          //jscs:enable validateIndentation
3794 
        ].join('');
3795 
      }
3796 
 
3797 
      if (markup) {
3798 
        markup = [
3799 
          //jscs:disable validateIndentation
3800 
          '<style type="text/css">',
3801 
            '<![CDATA[',
3802 
              markup,
3803 
            ']]>',
3804 
          '</style>'
3805 
          //jscs:enable validateIndentation
3806 
        ].join('');
3807 
      }
3808 
 
3809 
      return markup;
3810 
    },
3811 
 
3812 
    /**
3813 
     * Creates markup containing SVG referenced elements like patterns, gradients etc.
3814 
     * @param {fabric.Canvas} canvas instance of fabric.Canvas
3815 
     * @return {String}
3816 
     */
3817 
    createSVGRefElementsMarkup: function(canvas) {
3818 
      var markup = [ ];
3819 
 
3820 
      _createSVGPattern(markup, canvas, 'backgroundColor');
3821 
      _createSVGPattern(markup, canvas, 'overlayColor');
3822 
 
3823 
      return markup.join('');
3824 
    }
3825 
  });
3826 
 
3827 
})(typeof exports !== 'undefined' ? exports : this);
3828 
 
3829 
 
3830 
fabric.ElementsParser = function(elements, callback, options, reviver) {
3831 
  this.elements = elements;
3832 
  this.callback = callback;
3833 
  this.options = options;
3834 
  this.reviver = reviver;
3835 
  this.svgUid = (options && options.svgUid) || 0;
3836 
};
3837 
 
3838 
fabric.ElementsParser.prototype.parse = function() {
3839 
  this.instances = new Array(this.elements.length);
3840 
  this.numElements = this.elements.length;
3841 
 
3842 
  this.createObjects();
3843 
};
3844 
 
3845 
fabric.ElementsParser.prototype.createObjects = function() {
3846 
  for (var i = 0, len = this.elements.length; i < len; i++) {
3847 
    this.elements[i].setAttribute('svgUid', this.svgUid);
3848 
    (function(_this, i) {
3849 
      setTimeout(function() {
3850 
        _this.createObject(_this.elements[i], i);
3851 
      }, 0);
3852 
    })(this, i);
3853 
  }
3854 
};
3855 
 
3856 
fabric.ElementsParser.prototype.createObject = function(el, index) {
3857 
  var klass = fabric[fabric.util.string.capitalize(el.tagName)];
3858 
  if (klass && klass.fromElement) {
3859 
    try {
3860 
      this._createObject(klass, el, index);
3861 
    }
3862 
    catch (err) {
3863 
      fabric.log(err);
3864 
    }
3865 
  }
3866 
  else {
3867 
    this.checkIfDone();
3868 
  }
3869 
};
3870 
 
3871 
fabric.ElementsParser.prototype._createObject = function(klass, el, index) {
3872 
  if (klass.async) {
3873 
    klass.fromElement(el, this.createCallback(index, el), this.options);
3874 
  }
3875 
  else {
3876 
    var obj = klass.fromElement(el, this.options);
3877 
    this.resolveGradient(obj, 'fill');
3878 
    this.resolveGradient(obj, 'stroke');
3879 
    this.reviver && this.reviver(el, obj);
3880 
    this.instances[index] = obj;
3881 
    this.checkIfDone();
3882 
  }
3883 
};
3884 
 
3885 
fabric.ElementsParser.prototype.createCallback = function(index, el) {
3886 
  var _this = this;
3887 
  return function(obj) {
3888 
    _this.resolveGradient(obj, 'fill');
3889 
    _this.resolveGradient(obj, 'stroke');
3890 
    _this.reviver && _this.reviver(el, obj);
3891 
    _this.instances[index] = obj;
3892 
    _this.checkIfDone();
3893 
  };
3894 
};
3895 
 
3896 
fabric.ElementsParser.prototype.resolveGradient = function(obj, property) {
3897 
 
3898 
  var instanceFillValue = obj.get(property);
3899 
  if (!(/^url\(/).test(instanceFillValue)) {
3900 
    return;
3901 
  }
3902 
  var gradientId = instanceFillValue.slice(5, instanceFillValue.length - 1);
3903 
  if (fabric.gradientDefs[this.svgUid][gradientId]) {
3904 
    obj.set(property,
3905 
      fabric.Gradient.fromElement(fabric.gradientDefs[this.svgUid][gradientId], obj));
3906 
  }
3907 
};
3908 
 
3909 
fabric.ElementsParser.prototype.checkIfDone = function() {
3910 
  if (--this.numElements === 0) {
3911 
    this.instances = this.instances.filter(function(el) {
3912 
      return el != null;
3913 
    });
3914 
    this.callback(this.instances);
3915 
  }
3916 
};
3917 
 
3918 
 
3919 
(function(global) {
3920 
 
3921 
  'use strict';
3922 
 
3923 
  /* Adaptation of work of Kevin Lindsey (kevin@kevlindev.com) */
3924 
 
3925 
  var fabric = global.fabric || (global.fabric = { });
3926 
 
3927 
  if (fabric.Point) {
3928 
    fabric.warn('fabric.Point is already defined');
3929 
    return;
3930 
  }
3931 
 
3932 
  fabric.Point = Point;
3933 
 
3934 
  /**
3935 
   * Point class
3936 
   * @class fabric.Point
3937 
   * @memberOf fabric
3938 
   * @constructor
3939 
   * @param {Number} x
3940 
   * @param {Number} y
3941 
   * @return {fabric.Point} thisArg
3942 
   */
3943 
  function Point(x, y) {
3944 
    this.x = x;
3945 
    this.y = y;
3946 
  }
3947 
 
3948 
  Point.prototype = /** @lends fabric.Point.prototype */ {
3949 
 
3950 
    constructor: Point,
3951 
 
3952 
    /**
3953 
     * Adds another point to this one and returns another one
3954 
     * @param {fabric.Point} that
3955 
     * @return {fabric.Point} new Point instance with added values
3956 
     */
3957 
    add: function (that) {
3958 
      return new Point(this.x + that.x, this.y + that.y);
3959 
    },
3960 
 
3961 
    /**
3962 
     * Adds another point to this one
3963 
     * @param {fabric.Point} that
3964 
     * @return {fabric.Point} thisArg
3965 
     */
3966 
    addEquals: function (that) {
3967 
      this.x += that.x;
3968 
      this.y += that.y;
3969 
      return this;
3970 
    },
3971 
 
3972 
    /**
3973 
     * Adds value to this point and returns a new one
3974 
     * @param {Number} scalar
3975 
     * @return {fabric.Point} new Point with added value
3976 
     */
3977 
    scalarAdd: function (scalar) {
3978 
      return new Point(this.x + scalar, this.y + scalar);
3979 
    },
3980 
 
3981 
    /**
3982 
     * Adds value to this point
3983 
     * @param {Number} scalar
3984 
     * @return {fabric.Point} thisArg
3985 
     */
3986 
    scalarAddEquals: function (scalar) {
3987 
      this.x += scalar;
3988 
      this.y += scalar;
3989 
      return this;
3990 
    },
3991 
 
3992 
    /**
3993 
     * Subtracts another point from this point and returns a new one
3994 
     * @param {fabric.Point} that
3995 
     * @return {fabric.Point} new Point object with subtracted values
3996 
     */
3997 
    subtract: function (that) {
3998 
      return new Point(this.x - that.x, this.y - that.y);
3999 
    },
4000 
 
4001 
    /**
4002 
     * Subtracts another point from this point
4003 
     * @param {fabric.Point} that
4004 
     * @return {fabric.Point} thisArg
4005 
     */
4006 
    subtractEquals: function (that) {
4007 
      this.x -= that.x;
4008 
      this.y -= that.y;
4009 
      return this;
4010 
    },
4011 
 
4012 
    /**
4013 
     * Subtracts value from this point and returns a new one
4014 
     * @param {Number} scalar
4015 
     * @return {fabric.Point}
4016 
     */
4017 
    scalarSubtract: function (scalar) {
4018 
      return new Point(this.x - scalar, this.y - scalar);
4019 
    },
4020 
 
4021 
    /**
4022 
     * Subtracts value from this point
4023 
     * @param {Number} scalar
4024 
     * @return {fabric.Point} thisArg
4025 
     */
4026 
    scalarSubtractEquals: function (scalar) {
4027 
      this.x -= scalar;
4028 
      this.y -= scalar;
4029 
      return this;
4030 
    },
4031 
 
4032 
    /**
4033 
     * Miltiplies this point by a value and returns a new one
4034 
     * @param {Number} scalar
4035 
     * @return {fabric.Point}
4036 
     */
4037 
    multiply: function (scalar) {
4038 
      return new Point(this.x * scalar, this.y * scalar);
4039 
    },
4040 
 
4041 
    /**
4042 
     * Miltiplies this point by a value
4043 
     * @param {Number} scalar
4044 
     * @return {fabric.Point} thisArg
4045 
     */
4046 
    multiplyEquals: function (scalar) {
4047 
      this.x *= scalar;
4048 
      this.y *= scalar;
4049 
      return this;
4050 
    },
4051 
 
4052 
    /**
4053 
     * Divides this point by a value and returns a new one
4054 
     * @param {Number} scalar
4055 
     * @return {fabric.Point}
4056 
     */
4057 
    divide: function (scalar) {
4058 
      return new Point(this.x / scalar, this.y / scalar);
4059 
    },
4060 
 
4061 
    /**
4062 
     * Divides this point by a value
4063 
     * @param {Number} scalar
4064 
     * @return {fabric.Point} thisArg
4065 
     */
4066 
    divideEquals: function (scalar) {
4067 
      this.x /= scalar;
4068 
      this.y /= scalar;
4069 
      return this;
4070 
    },
4071 
 
4072 
    /**
4073 
     * Returns true if this point is equal to another one
4074 
     * @param {fabric.Point} that
4075 
     * @return {Boolean}
4076 
     */
4077 
    eq: function (that) {
4078 
      return (this.x === that.x && this.y === that.y);
4079 
    },
4080 
 
4081 
    /**
4082 
     * Returns true if this point is less than another one
4083 
     * @param {fabric.Point} that
4084 
     * @return {Boolean}
4085 
     */
4086 
    lt: function (that) {
4087 
      return (this.x < that.x && this.y < that.y);
4088 
    },
4089 
 
4090 
    /**
4091 
     * Returns true if this point is less than or equal to another one
4092 
     * @param {fabric.Point} that
4093 
     * @return {Boolean}
4094 
     */
4095 
    lte: function (that) {
4096 
      return (this.x <= that.x && this.y <= that.y);
4097 
    },
4098 
 
4099 
    /**
4100 
 
4101 
     * Returns true if this point is greater another one
4102 
     * @param {fabric.Point} that
4103 
     * @return {Boolean}
4104 
     */
4105 
    gt: function (that) {
4106 
      return (this.x > that.x && this.y > that.y);
4107 
    },
4108 
 
4109 
    /**
4110 
     * Returns true if this point is greater than or equal to another one
4111 
     * @param {fabric.Point} that
4112 
     * @return {Boolean}
4113 
     */
4114 
    gte: function (that) {
4115 
      return (this.x >= that.x && this.y >= that.y);
4116 
    },
4117 
 
4118 
    /**
4119 
     * Returns new point which is the result of linear interpolation with this one and another one
4120 
     * @param {fabric.Point} that
4121 
     * @param {Number} t
4122 
     * @return {fabric.Point}
4123 
     */
4124 
    lerp: function (that, t) {
4125 
      return new Point(this.x + (that.x - this.x) * t, this.y + (that.y - this.y) * t);
4126 
    },
4127 
 
4128 
    /**
4129 
     * Returns distance from this point and another one
4130 
     * @param {fabric.Point} that
4131 
     * @return {Number}
4132 
     */
4133 
    distanceFrom: function (that) {
4134 
      var dx = this.x - that.x,
4135 
          dy = this.y - that.y;
4136 
      return Math.sqrt(dx * dx + dy * dy);
4137 
    },
4138 
 
4139 
    /**
4140 
     * Returns the point between this point and another one
4141 
     * @param {fabric.Point} that
4142 
     * @return {fabric.Point}
4143 
     */
4144 
    midPointFrom: function (that) {
4145 
      return new Point(this.x + (that.x - this.x)/2, this.y + (that.y - this.y)/2);
4146 
    },
4147 
 
4148 
    /**
4149 
     * Returns a new point which is the min of this and another one
4150 
     * @param {fabric.Point} that
4151 
     * @return {fabric.Point}
4152 
     */
4153 
    min: function (that) {
4154 
      return new Point(Math.min(this.x, that.x), Math.min(this.y, that.y));
4155 
    },
4156 
 
4157 
    /**
4158 
     * Returns a new point which is the max of this and another one
4159 
     * @param {fabric.Point} that
4160 
     * @return {fabric.Point}
4161 
     */
4162 
    max: function (that) {
4163 
      return new Point(Math.max(this.x, that.x), Math.max(this.y, that.y));
4164 
    },
4165 
 
4166 
    /**
4167 
     * Returns string representation of this point
4168 
     * @return {String}
4169 
     */
4170 
    toString: function () {
4171 
      return this.x + ',' + this.y;
4172 
    },
4173 
 
4174 
    /**
4175 
     * Sets x/y of this point
4176 
     * @param {Number} x
4177 
     * @param {Number} y
4178 
     */
4179 
    setXY: function (x, y) {
4180 
      this.x = x;
4181 
      this.y = y;
4182 
    },
4183 
 
4184 
    /**
4185 
     * Sets x/y of this point from another point
4186 
     * @param {fabric.Point} that
4187 
     */
4188 
    setFromPoint: function (that) {
4189 
      this.x = that.x;
4190 
      this.y = that.y;
4191 
    },
4192 
 
4193 
    /**
4194 
     * Swaps x/y of this point and another point
4195 
     * @param {fabric.Point} that
4196 
     */
4197 
    swap: function (that) {
4198 
      var x = this.x,
4199 
          y = this.y;
4200 
      this.x = that.x;
4201 
      this.y = that.y;
4202 
      that.x = x;
4203 
      that.y = y;
4204 
    }
4205 
  };
4206 
 
4207 
})(typeof exports !== 'undefined' ? exports : this);
4208 
 
4209 
 
4210 
(function(global) {
4211 
 
4212 
  'use strict';
4213 
 
4214 
  /* Adaptation of work of Kevin Lindsey (kevin@kevlindev.com) */
4215 
  var fabric = global.fabric || (global.fabric = { });
4216 
 
4217 
  if (fabric.Intersection) {
4218 
    fabric.warn('fabric.Intersection is already defined');
4219 
    return;
4220 
  }
4221 
 
4222 
  /**
4223 
   * Intersection class
4224 
   * @class fabric.Intersection
4225 
   * @memberOf fabric
4226 
   * @constructor
4227 
   */
4228 
  function Intersection(status) {
4229 
    this.status = status;
4230 
    this.points = [];
4231 
  }
4232 
 
4233 
  fabric.Intersection = Intersection;
4234 
 
4235 
  fabric.Intersection.prototype = /** @lends fabric.Intersection.prototype */ {
4236 
 
4237 
    /**
4238 
     * Appends a point to intersection
4239 
     * @param {fabric.Point} point
4240 
     */
4241 
    appendPoint: function (point) {
4242 
      this.points.push(point);
4243 
    },
4244 
 
4245 
    /**
4246 
     * Appends points to intersection
4247 
     * @param {Array} points
4248 
     */
4249 
    appendPoints: function (points) {
4250 
      this.points = this.points.concat(points);
4251 
    }
4252 
  };
4253 
 
4254 
  /**
4255 
   * Checks if one line intersects another
4256 
   * @static
4257 
   * @param {fabric.Point} a1
4258 
   * @param {fabric.Point} a2
4259 
   * @param {fabric.Point} b1
4260 
   * @param {fabric.Point} b2
4261 
   * @return {fabric.Intersection}
4262 
   */
4263 
  fabric.Intersection.intersectLineLine = function (a1, a2, b1, b2) {
4264 
    var result,
4265 
        uaT = (b2.x - b1.x) * (a1.y - b1.y) - (b2.y - b1.y) * (a1.x - b1.x),
4266 
        ubT = (a2.x - a1.x) * (a1.y - b1.y) - (a2.y - a1.y) * (a1.x - b1.x),
4267 
        uB = (b2.y - b1.y) * (a2.x - a1.x) - (b2.x - b1.x) * (a2.y - a1.y);
4268 
    if (uB !== 0) {
4269 
      var ua = uaT / uB,
4270 
          ub = ubT / uB;
4271 
      if (0 <= ua && ua <= 1 && 0 <= ub && ub <= 1) {
4272 
        result = new Intersection('Intersection');
4273 
        result.points.push(new fabric.Point(a1.x + ua * (a2.x - a1.x), a1.y + ua * (a2.y - a1.y)));
4274 
      }
4275 
      else {
4276 
        result = new Intersection();
4277 
      }
4278 
    }
4279 
    else {
4280 
      if (uaT === 0 || ubT === 0) {
4281 
        result = new Intersection('Coincident');
4282 
      }
4283 
      else {
4284 
        result = new Intersection('Parallel');
4285 
      }
4286 
    }
4287 
    return result;
4288 
  };
4289 
 
4290 
  /**
4291 
   * Checks if line intersects polygon
4292 
   * @static
4293 
   * @param {fabric.Point} a1
4294 
   * @param {fabric.Point} a2
4295 
   * @param {Array} points
4296 
   * @return {fabric.Intersection}
4297 
   */
4298 
  fabric.Intersection.intersectLinePolygon = function(a1, a2, points) {
4299 
    var result = new Intersection(),
4300 
        length = points.length;
4301 
 
4302 
    for (var i = 0; i < length; i++) {
4303 
      var b1 = points[i],
4304 
          b2 = points[(i + 1) % length],
4305 
          inter = Intersection.intersectLineLine(a1, a2, b1, b2);
4306 
 
4307 
      result.appendPoints(inter.points);
4308 
    }
4309 
    if (result.points.length > 0) {
4310 
      result.status = 'Intersection';
4311 
    }
4312 
    return result;
4313 
  };
4314 
 
4315 
  /**
4316 
   * Checks if polygon intersects another polygon
4317 
   * @static
4318 
   * @param {Array} points1
4319 
   * @param {Array} points2
4320 
   * @return {fabric.Intersection}
4321 
   */
4322 
  fabric.Intersection.intersectPolygonPolygon = function (points1, points2) {
4323 
    var result = new Intersection(),
4324 
        length = points1.length;
4325 
 
4326 
    for (var i = 0; i < length; i++) {
4327 
      var a1 = points1[i],
4328 
          a2 = points1[(i + 1) % length],
4329 
          inter = Intersection.intersectLinePolygon(a1, a2, points2);
4330 
 
4331 
      result.appendPoints(inter.points);
4332 
    }
4333 
    if (result.points.length > 0) {
4334 
      result.status = 'Intersection';
4335 
    }
4336 
    return result;
4337 
  };
4338 
 
4339 
  /**
4340 
   * Checks if polygon intersects rectangle
4341 
   * @static
4342 
   * @param {Array} points
4343 
   * @param {Number} r1
4344 
   * @param {Number} r2
4345 
   * @return {fabric.Intersection}
4346 
   */
4347 
  fabric.Intersection.intersectPolygonRectangle = function (points, r1, r2) {
4348 
    var min = r1.min(r2),
4349 
        max = r1.max(r2),
4350 
        topRight = new fabric.Point(max.x, min.y),
4351 
        bottomLeft = new fabric.Point(min.x, max.y),
4352 
        inter1 = Intersection.intersectLinePolygon(min, topRight, points),
4353 
        inter2 = Intersection.intersectLinePolygon(topRight, max, points),
4354 
        inter3 = Intersection.intersectLinePolygon(max, bottomLeft, points),
4355 
        inter4 = Intersection.intersectLinePolygon(bottomLeft, min, points),
4356 
        result = new Intersection();
4357 
 
4358 
    result.appendPoints(inter1.points);
4359 
    result.appendPoints(inter2.points);
4360 
    result.appendPoints(inter3.points);
4361 
    result.appendPoints(inter4.points);
4362 
 
4363 
    if (result.points.length > 0) {
4364 
      result.status = 'Intersection';
4365 
    }
4366 
    return result;
4367 
  };
4368 
 
4369 
})(typeof exports !== 'undefined' ? exports : this);
4370 
 
4371 
 
4372 
(function(global) {
4373 
 
4374 
  'use strict';
4375 
 
4376 
  var fabric = global.fabric || (global.fabric = { });
4377 
 
4378 
  if (fabric.Color) {
4379 
    fabric.warn('fabric.Color is already defined.');
4380 
    return;
4381 
  }
4382 
 
4383 
  /**
4384 
   * Color class
4385 
   * The purpose of {@link fabric.Color} is to abstract and encapsulate common color operations;
4386 
   * {@link fabric.Color} is a constructor and creates instances of {@link fabric.Color} objects.
4387 
   *
4388 
   * @class fabric.Color
4389 
   * @param {String} color optional in hex or rgb(a) format
4390 
   * @return {fabric.Color} thisArg
4391 
   * @tutorial {@link http://fabricjs.com/fabric-intro-part-2/#colors}
4392 
   */
4393 
  function Color(color) {
4394 
    if (!color) {
4395 
      this.setSource([0, 0, 0, 1]);
4396 
    }
4397 
    else {
4398 
      this._tryParsingColor(color);
4399 
    }
4400 
  }
4401 
 
4402 
  fabric.Color = Color;
4403 
 
4404 
  fabric.Color.prototype = /** @lends fabric.Color.prototype */ {
4405 
 
4406 
    /**
4407 
     * @private
4408 
     * @param {String|Array} color Color value to parse
4409 
     */
4410 
    _tryParsingColor: function(color) {
4411 
      var source;
4412 
 
4413 
      if (color in Color.colorNameMap) {
4414 
        color = Color.colorNameMap[color];
4415 
      }
4416 
 
4417 
      if (color === 'transparent') {
4418 
        this.setSource([255, 255, 255, 0]);
4419 
        return;
4420 
      }
4421 
 
4422 
      source = Color.sourceFromHex(color);
4423 
 
4424 
      if (!source) {
4425 
        source = Color.sourceFromRgb(color);
4426 
      }
4427 
      if (!source) {
4428 
        source = Color.sourceFromHsl(color);
4429 
      }
4430 
      if (source) {
4431 
        this.setSource(source);
4432 
      }
4433 
    },
4434 
 
4435 
    /**
4436 
     * Adapted from <a href="https://rawgithub.com/mjijackson/mjijackson.github.com/master/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript.html">https://github.com/mjijackson</a>
4437 
     * @private
4438 
     * @param {Number} r Red color value
4439 
     * @param {Number} g Green color value
4440 
     * @param {Number} b Blue color value
4441 
     * @return {Array} Hsl color
4442 
     */
4443 
    _rgbToHsl: function(r, g, b) {
4444 
      r /= 255, g /= 255, b /= 255;
4445 
 
4446 
      var h, s, l,
4447 
          max = fabric.util.array.max([r, g, b]),
4448 
          min = fabric.util.array.min([r, g, b]);
4449 
 
4450 
      l = (max + min) / 2;
4451 
 
4452 
      if (max === min) {
4453 
        h = s = 0; // achromatic
4454 
      }
4455 
      else {
4456 
        var d = max - min;
4457 
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
4458 
        switch (max) {
4459 
          case r:
4460 
            h = (g - b) / d + (g < b ? 6 : 0);
4461 
            break;
4462 
          case g:
4463 
            h = (b - r) / d + 2;
4464 
            break;
4465 
          case b:
4466 
            h = (r - g) / d + 4;
4467 
            break;
4468 
        }
4469 
        h /= 6;
4470 
      }
4471 
 
4472 
      return [
4473 
        Math.round(h * 360),
4474 
        Math.round(s * 100),
4475 
        Math.round(l * 100)
4476 
      ];
4477 
    },
4478 
 
4479 
    /**
4480 
     * Returns source of this color (where source is an array representation; ex: [200, 200, 100, 1])
4481 
     * @return {Array}
4482 
     */
4483 
    getSource: function() {
4484 
      return this._source;
4485 
    },
4486 
 
4487 
    /**
4488 
     * Sets source of this color (where source is an array representation; ex: [200, 200, 100, 1])
4489 
     * @param {Array} source
4490 
     */
4491 
    setSource: function(source) {
4492 
      this._source = source;
4493 
    },
4494 
 
4495 
    /**
4496 
     * Returns color represenation in RGB format
4497 
     * @return {String} ex: rgb(0-255,0-255,0-255)
4498 
     */
4499 
    toRgb: function() {
4500 
      var source = this.getSource();
4501 
      return 'rgb(' + source[0] + ',' + source[1] + ',' + source[2] + ')';
4502 
    },
4503 
 
4504 
    /**
4505 
     * Returns color represenation in RGBA format
4506 
     * @return {String} ex: rgba(0-255,0-255,0-255,0-1)
4507 
     */
4508 
    toRgba: function() {
4509 
      var source = this.getSource();
4510 
      return 'rgba(' + source[0] + ',' + source[1] + ',' + source[2] + ',' + source[3] + ')';
4511 
    },
4512 
 
4513 
    /**
4514 
     * Returns color represenation in HSL format
4515 
     * @return {String} ex: hsl(0-360,0%-100%,0%-100%)
4516 
     */
4517 
    toHsl: function() {
4518 
      var source = this.getSource(),
4519 
          hsl = this._rgbToHsl(source[0], source[1], source[2]);
4520 
 
4521 
      return 'hsl(' + hsl[0] + ',' + hsl[1] + '%,' + hsl[2] + '%)';
4522 
    },
4523 
 
4524 
    /**
4525 
     * Returns color represenation in HSLA format
4526 
     * @return {String} ex: hsla(0-360,0%-100%,0%-100%,0-1)
4527 
     */
4528 
    toHsla: function() {
4529 
      var source = this.getSource(),
4530 
          hsl = this._rgbToHsl(source[0], source[1], source[2]);
4531 
 
4532 
      return 'hsla(' + hsl[0] + ',' + hsl[1] + '%,' + hsl[2] + '%,' + source[3] + ')';
4533 
    },
4534 
 
4535 
    /**
4536 
     * Returns color represenation in HEX format
4537 
     * @return {String} ex: FF5555
4538 
     */
4539 
    toHex: function() {
4540 
      var source = this.getSource(), r, g, b;
4541 
 
4542 
      r = source[0].toString(16);
4543 
      r = (r.length === 1) ? ('0' + r) : r;
4544 
 
4545 
      g = source[1].toString(16);
4546 
      g = (g.length === 1) ? ('0' + g) : g;
4547 
 
4548 
      b = source[2].toString(16);
4549 
      b = (b.length === 1) ? ('0' + b) : b;
4550 
 
4551 
      return r.toUpperCase() + g.toUpperCase() + b.toUpperCase();
4552 
    },
4553 
 
4554 
    /**
4555 
     * Gets value of alpha channel for this color
4556 
     * @return {Number} 0-1
4557 
     */
4558 
    getAlpha: function() {
4559 
      return this.getSource()[3];
4560 
    },
4561 
 
4562 
    /**
4563 
     * Sets value of alpha channel for this color
4564 
     * @param {Number} alpha Alpha value 0-1
4565 
     * @return {fabric.Color} thisArg
4566 
     */
4567 
    setAlpha: function(alpha) {
4568 
      var source = this.getSource();
4569 
      source[3] = alpha;
4570 
      this.setSource(source);
4571 
      return this;
4572 
    },
4573 
 
4574 
    /**
4575 
     * Transforms color to its grayscale representation
4576 
     * @return {fabric.Color} thisArg
4577 
     */
4578 
    toGrayscale: function() {
4579 
      var source = this.getSource(),
4580 
          average = parseInt((source[0] * 0.3 + source[1] * 0.59 + source[2] * 0.11).toFixed(0), 10),
4581 
          currentAlpha = source[3];
4582 
      this.setSource([average, average, average, currentAlpha]);
4583 
      return this;
4584 
    },
4585 
 
4586 
    /**
4587 
     * Transforms color to its black and white representation
4588 
     * @param {Number} threshold
4589 
     * @return {fabric.Color} thisArg
4590 
     */
4591 
    toBlackWhite: function(threshold) {
4592 
      var source = this.getSource(),
4593 
          average = (source[0] * 0.3 + source[1] * 0.59 + source[2] * 0.11).toFixed(0),
4594 
          currentAlpha = source[3];
4595 
 
4596 
      threshold = threshold || 127;
4597 
 
4598 
      average = (Number(average) < Number(threshold)) ? 0 : 255;
4599 
      this.setSource([average, average, average, currentAlpha]);
4600 
      return this;
4601 
    },
4602 
 
4603 
    /**
4604 
     * Overlays color with another color
4605 
     * @param {String|fabric.Color} otherColor
4606 
     * @return {fabric.Color} thisArg
4607 
     */
4608 
    overlayWith: function(otherColor) {
4609 
      if (!(otherColor instanceof Color)) {
4610 
        otherColor = new Color(otherColor);
4611 
      }
4612 
 
4613 
      var result = [],
4614 
          alpha = this.getAlpha(),
4615 
          otherAlpha = 0.5,
4616 
          source = this.getSource(),
4617 
          otherSource = otherColor.getSource();
4618 
 
4619 
      for (var i = 0; i < 3; i++) {
4620 
        result.push(Math.round((source[i] * (1 - otherAlpha)) + (otherSource[i] * otherAlpha)));
4621 
      }
4622 
 
4623 
      result[3] = alpha;
4624 
      this.setSource(result);
4625 
      return this;
4626 
    }
4627 
  };
4628 
 
4629 
  /**
4630 
   * Regex matching color in RGB or RGBA formats (ex: rgb(0, 0, 0), rgba(255, 100, 10, 0.5), rgba( 255 , 100 , 10 , 0.5 ), rgb(1,1,1), rgba(100%, 60%, 10%, 0.5))
4631 
   * @static
4632 
   * @field
4633 
   * @memberOf fabric.Color
4634 
   */
4635 
  fabric.Color.reRGBa = /^rgba?\(\s*(\d{1,3}(?:\.\d+)?\%?)\s*,\s*(\d{1,3}(?:\.\d+)?\%?)\s*,\s*(\d{1,3}(?:\.\d+)?\%?)\s*(?:\s*,\s*(\d+(?:\.\d+)?)\s*)?\)$/;
4636 
 
4637 
  /**
4638 
   * Regex matching color in HSL or HSLA formats (ex: hsl(200, 80%, 10%), hsla(300, 50%, 80%, 0.5), hsla( 300 , 50% , 80% , 0.5 ))
4639 
   * @static
4640 
   * @field
4641 
   * @memberOf fabric.Color
4642 
   */
4643 
  fabric.Color.reHSLa = /^hsla?\(\s*(\d{1,3})\s*,\s*(\d{1,3}\%)\s*,\s*(\d{1,3}\%)\s*(?:\s*,\s*(\d+(?:\.\d+)?)\s*)?\)$/;
4644 
 
4645 
  /**
4646 
   * Regex matching color in HEX format (ex: #FF5555, 010155, aff)
4647 
   * @static
4648 
   * @field
4649 
   * @memberOf fabric.Color
4650 
   */
4651 
  fabric.Color.reHex = /^#?([0-9a-f]{6}|[0-9a-f]{3})$/i;
4652 
 
4653 
  /**
4654 
   * Map of the 17 basic color names with HEX code
4655 
   * @static
4656 
   * @field
4657 
   * @memberOf fabric.Color
4658 
   * @see: http://www.w3.org/TR/CSS2/syndata.html#color-units
4659 
   */
4660 
  fabric.Color.colorNameMap = {
4661 
    aqua:    '#00FFFF',
4662 
    black:   '#000000',
4663 
    blue:    '#0000FF',
4664 
    fuchsia: '#FF00FF',
4665 
    gray:    '#808080',
4666 
    green:   '#008000',
4667 
    lime:    '#00FF00',
4668 
    maroon:  '#800000',
4669 
    navy:    '#000080',
4670 
    olive:   '#808000',
4671 
    orange:  '#FFA500',
4672 
    purple:  '#800080',
4673 
    red:     '#FF0000',
4674 
    silver:  '#C0C0C0',
4675 
    teal:    '#008080',
4676 
    white:   '#FFFFFF',
4677 
    yellow:  '#FFFF00'
4678 
  };
4679 
 
4680 
  /**
4681 
   * @private
4682 
   * @param {Number} p
4683 
   * @param {Number} q
4684 
   * @param {Number} t
4685 
   * @return {Number}
4686 
   */
4687 
  function hue2rgb(p, q, t) {
4688 
    if (t < 0) {
4689 
      t += 1;
4690 
    }
4691 
    if (t > 1) {
4692 
      t -= 1;
4693 
    }
4694 
    if (t < 1/6) {
4695 
      return p + (q - p) * 6 * t;
4696 
    }
4697 
    if (t < 1/2) {
4698 
      return q;
4699 
    }
4700 
    if (t < 2/3) {
4701 
      return p + (q - p) * (2/3 - t) * 6;
4702 
    }
4703 
    return p;
4704 
  }
4705 
 
4706 
  /**
4707 
   * Returns new color object, when given a color in RGB format
4708 
   * @memberOf fabric.Color
4709 
   * @param {String} color Color value ex: rgb(0-255,0-255,0-255)
4710 
   * @return {fabric.Color}
4711 
   */
4712 
  fabric.Color.fromRgb = function(color) {
4713 
    return Color.fromSource(Color.sourceFromRgb(color));
4714 
  };
4715 
 
4716 
  /**
4717 
   * Returns array represenatation (ex: [100, 100, 200, 1]) of a color that's in RGB or RGBA format
4718 
   * @memberOf fabric.Color
4719 
   * @param {String} color Color value ex: rgb(0-255,0-255,0-255), rgb(0%-100%,0%-100%,0%-100%)
4720 
   * @return {Array} source
4721 
   */
4722 
  fabric.Color.sourceFromRgb = function(color) {
4723 
    var match = color.match(Color.reRGBa);
4724 
    if (match) {
4725 
      var r = parseInt(match[1], 10) / (/%$/.test(match[1]) ? 100 : 1) * (/%$/.test(match[1]) ? 255 : 1),
4726 
          g = parseInt(match[2], 10) / (/%$/.test(match[2]) ? 100 : 1) * (/%$/.test(match[2]) ? 255 : 1),
4727 
          b = parseInt(match[3], 10) / (/%$/.test(match[3]) ? 100 : 1) * (/%$/.test(match[3]) ? 255 : 1);
4728 
 
4729 
      return [
4730 
        parseInt(r, 10),
4731 
        parseInt(g, 10),
4732 
        parseInt(b, 10),
4733 
        match[4] ? parseFloat(match[4]) : 1
4734 
      ];
4735 
    }
4736 
  };
4737 
 
4738 
  /**
4739 
   * Returns new color object, when given a color in RGBA format
4740 
   * @static
4741 
   * @function
4742 
   * @memberOf fabric.Color
4743 
   * @param {String} color
4744 
   * @return {fabric.Color}
4745 
   */
4746 
  fabric.Color.fromRgba = Color.fromRgb;
4747 
 
4748 
  /**
4749 
   * Returns new color object, when given a color in HSL format
4750 
   * @param {String} color Color value ex: hsl(0-260,0%-100%,0%-100%)
4751 
   * @memberOf fabric.Color
4752 
   * @return {fabric.Color}
4753 
   */
4754 
  fabric.Color.fromHsl = function(color) {
4755 
    return Color.fromSource(Color.sourceFromHsl(color));
4756 
  };
4757 
 
4758 
  /**
4759 
   * Returns array represenatation (ex: [100, 100, 200, 1]) of a color that's in HSL or HSLA format.
4760 
   * Adapted from <a href="https://rawgithub.com/mjijackson/mjijackson.github.com/master/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript.html">https://github.com/mjijackson</a>
4761 
   * @memberOf fabric.Color
4762 
   * @param {String} color Color value ex: hsl(0-360,0%-100%,0%-100%) or hsla(0-360,0%-100%,0%-100%, 0-1)
4763 
   * @return {Array} source
4764 
   * @see http://http://www.w3.org/TR/css3-color/#hsl-color
4765 
   */
4766 
  fabric.Color.sourceFromHsl = function(color) {
4767 
    var match = color.match(Color.reHSLa);
4768 
    if (!match) {
4769 
      return;
4770 
    }
4771 
 
4772 
    var h = (((parseFloat(match[1]) % 360) + 360) % 360) / 360,
4773 
        s = parseFloat(match[2]) / (/%$/.test(match[2]) ? 100 : 1),
4774 
        l = parseFloat(match[3]) / (/%$/.test(match[3]) ? 100 : 1),
4775 
        r, g, b;
4776 
 
4777 
    if (s === 0) {
4778 
      r = g = b = l;
4779 
    }
4780 
    else {
4781 
      var q = l <= 0.5 ? l * (s + 1) : l + s - l * s,
4782 
          p = l * 2 - q;
4783 
 
4784 
      r = hue2rgb(p, q, h + 1/3);
4785 
      g = hue2rgb(p, q, h);
4786 
      b = hue2rgb(p, q, h - 1/3);
4787 
    }
4788 
 
4789 
    return [
4790 
      Math.round(r * 255),
4791 
      Math.round(g * 255),
4792 
      Math.round(b * 255),
4793 
      match[4] ? parseFloat(match[4]) : 1
4794 
    ];
4795 
  };
4796 
 
4797 
  /**
4798 
   * Returns new color object, when given a color in HSLA format
4799 
   * @static
4800 
   * @function
4801 
   * @memberOf fabric.Color
4802 
   * @param {String} color
4803 
   * @return {fabric.Color}
4804 
   */
4805 
  fabric.Color.fromHsla = Color.fromHsl;
4806 
 
4807 
  /**
4808 
   * Returns new color object, when given a color in HEX format
4809 
   * @static
4810 
   * @memberOf fabric.Color
4811 
   * @param {String} color Color value ex: FF5555
4812 
   * @return {fabric.Color}
4813 
   */
4814 
  fabric.Color.fromHex = function(color) {
4815 
    return Color.fromSource(Color.sourceFromHex(color));
4816 
  };
4817 
 
4818 
  /**
4819 
   * Returns array represenatation (ex: [100, 100, 200, 1]) of a color that's in HEX format
4820 
   * @static
4821 
   * @memberOf fabric.Color
4822 
   * @param {String} color ex: FF5555
4823 
   * @return {Array} source
4824 
   */
4825 
  fabric.Color.sourceFromHex = function(color) {
4826 
    if (color.match(Color.reHex)) {
4827 
      var value = color.slice(color.indexOf('#') + 1),
4828 
          isShortNotation = (value.length === 3),
4829 
          r = isShortNotation ? (value.charAt(0) + value.charAt(0)) : value.substring(0, 2),
4830 
          g = isShortNotation ? (value.charAt(1) + value.charAt(1)) : value.substring(2, 4),
4831 
          b = isShortNotation ? (value.charAt(2) + value.charAt(2)) : value.substring(4, 6);
4832 
 
4833 
      return [
4834 
        parseInt(r, 16),
4835 
        parseInt(g, 16),
4836 
        parseInt(b, 16),
4837 
        1
4838 
      ];
4839 
    }
4840 
  };
4841 
 
4842 
  /**
4843 
   * Returns new color object, when given color in array representation (ex: [200, 100, 100, 0.5])
4844 
   * @static
4845 
   * @memberOf fabric.Color
4846 
   * @param {Array} source
4847 
   * @return {fabric.Color}
4848 
   */
4849 
  fabric.Color.fromSource = function(source) {
4850 
    var oColor = new Color();
4851 
    oColor.setSource(source);
4852 
    return oColor;
4853 
  };
4854 
 
4855 
})(typeof exports !== 'undefined' ? exports : this);
4856 
 
4857 
 
4858 
(function() {
4859 
 
4860 
  /* _FROM_SVG_START_ */
4861 
  function getColorStop(el) {
4862 
    var style = el.getAttribute('style'),
4863 
        offset = el.getAttribute('offset'),
4864 
        color, colorAlpha, opacity;
4865 
 
4866 
    // convert percents to absolute values
4867 
    offset = parseFloat(offset) / (/%$/.test(offset) ? 100 : 1);
4868 
    offset = offset < 0 ? 0 : offset > 1 ? 1 : offset;
4869 
    if (style) {
4870 
      var keyValuePairs = style.split(/\s*;\s*/);
4871 
 
4872 
      if (keyValuePairs[keyValuePairs.length - 1] === '') {
4873 
        keyValuePairs.pop();
4874 
      }
4875 
 
4876 
      for (var i = keyValuePairs.length; i--; ) {
4877 
 
4878 
        var split = keyValuePairs[i].split(/\s*:\s*/),
4879 
            key = split[0].trim(),
4880 
            value = split[1].trim();
4881 
 
4882 
        if (key === 'stop-color') {
4883 
          color = value;
4884 
        }
4885 
        else if (key === 'stop-opacity') {
4886 
          opacity = value;
4887 
        }
4888 
      }
4889 
    }
4890 
 
4891 
    if (!color) {
4892 
      color = el.getAttribute('stop-color') || 'rgb(0,0,0)';
4893 
    }
4894 
    if (!opacity) {
4895 
      opacity = el.getAttribute('stop-opacity');
4896 
    }
4897 
 
4898 
    color = new fabric.Color(color);
4899 
    colorAlpha = color.getAlpha();
4900 
    opacity = isNaN(parseFloat(opacity)) ? 1 : parseFloat(opacity);
4901 
    opacity *= colorAlpha;
4902 
 
4903 
    return {
4904 
      offset: offset,
4905 
      color: color.toRgb(),
4906 
      opacity: opacity
4907 
    };
4908 
  }
4909 
 
4910 
  function getLinearCoords(el) {
4911 
    return {
4912 
      x1: el.getAttribute('x1') || 0,
4913 
      y1: el.getAttribute('y1') || 0,
4914 
      x2: el.getAttribute('x2') || '100%',
4915 
      y2: el.getAttribute('y2') || 0
4916 
    };
4917 
  }
4918 
 
4919 
  function getRadialCoords(el) {
4920 
    return {
4921 
      x1: el.getAttribute('fx') || el.getAttribute('cx') || '50%',
4922 
      y1: el.getAttribute('fy') || el.getAttribute('cy') || '50%',
4923 
      r1: 0,
4924 
      x2: el.getAttribute('cx') || '50%',
4925 
      y2: el.getAttribute('cy') || '50%',
4926 
      r2: el.getAttribute('r') || '50%'
4927 
    };
4928 
  }
4929 
  /* _FROM_SVG_END_ */
4930 
 
4931 
  /**
4932 
   * Gradient class
4933 
   * @class fabric.Gradient
4934 
   * @tutorial {@link http://fabricjs.com/fabric-intro-part-2/#gradients}
4935 
   * @see {@link fabric.Gradient#initialize} for constructor definition
4936 
   */
4937 
  fabric.Gradient = fabric.util.createClass(/** @lends fabric.Gradient.prototype */ {
4938 
 
4939 
    /**
4940 
     * Horizontal offset for aligning gradients coming from SVG when outside pathgroups
4941 
     * @type Number
4942 
     * @default 0
4943 
     */
4944 
    offsetX: 0,
4945 
 
4946 
    /**
4947 
     * Vertical offset for aligning gradients coming from SVG when outside pathgroups
4948 
     * @type Number
4949 
     * @default 0
4950 
     */
4951 
    offsetY: 0,
4952 
 
4953 
    /**
4954 
     * Constructor
4955 
     * @param {Object} [options] Options object with type, coords, gradientUnits and colorStops
4956 
     * @return {fabric.Gradient} thisArg
4957 
     */
4958 
    initialize: function(options) {
4959 
      options || (options = { });
4960 
 
4961 
      var coords = { };
4962 
 
4963 
      this.id = fabric.Object.__uid++;
4964 
      this.type = options.type || 'linear';
4965 
 
4966 
      coords = {
4967 
        x1: options.coords.x1 || 0,
4968 
        y1: options.coords.y1 || 0,
4969 
        x2: options.coords.x2 || 0,
4970 
        y2: options.coords.y2 || 0
4971 
      };
4972 
 
4973 
      if (this.type === 'radial') {
4974 
        coords.r1 = options.coords.r1 || 0;
4975 
        coords.r2 = options.coords.r2 || 0;
4976 
      }
4977 
      this.coords = coords;
4978 
      this.colorStops = options.colorStops.slice();
4979 
      if (options.gradientTransform) {
4980 
        this.gradientTransform = options.gradientTransform;
4981 
      }
4982 
      this.offsetX = options.offsetX || this.offsetX;
4983 
      this.offsetY = options.offsetY || this.offsetY;
4984 
    },
4985 
 
4986 
    /**
4987 
     * Adds another colorStop
4988 
     * @param {Object} colorStop Object with offset and color
4989 
     * @return {fabric.Gradient} thisArg
4990 
     */
4991 
    addColorStop: function(colorStop) {
4992 
      for (var position in colorStop) {
4993 
        var color = new fabric.Color(colorStop[position]);
4994 
        this.colorStops.push({
4995 
          offset: position,
4996 
          color: color.toRgb(),
4997 
          opacity: color.getAlpha()
4998 
        });
4999 
      }
5000 
      return this;
5001 
    },
5002 
 
5003 
    /**
5004 
     * Returns object representation of a gradient
5005 
     * @return {Object}
5006 
     */
5007 
    toObject: function() {
5008 
      return {
5009 
        type: this.type,
5010 
        coords: this.coords,
5011 
        colorStops: this.colorStops,
5012 
        offsetX: this.offsetX,
5013 
        offsetY: this.offsetY
5014 
      };
5015 
    },
5016 
 
5017 
    /* _TO_SVG_START_ */
5018 
    /**
5019 
     * Returns SVG representation of an gradient
5020 
     * @param {Object} object Object to create a gradient for
5021 
     * @param {Boolean} normalize Whether coords should be normalized
5022 
     * @return {String} SVG representation of an gradient (linear/radial)
5023 
     */
5024 
    toSVG: function(object) {
5025 
      var coords = fabric.util.object.clone(this.coords),
5026 
          markup, commonAttributes;
5027 
 
5028 
      // colorStops must be sorted ascending
5029 
      this.colorStops.sort(function(a, b) {
5030 
        return a.offset - b.offset;
5031 
      });
5032 
 
5033 
      if (!(object.group && object.group.type === 'path-group')) {
5034 
        for (var prop in coords) {
5035 
          if (prop === 'x1' || prop === 'x2' || prop === 'r2') {
5036 
            coords[prop] += this.offsetX - object.width / 2;
5037 
          }
5038 
          else if (prop === 'y1' || prop === 'y2') {
5039 
            coords[prop] += this.offsetY - object.height / 2;
5040 
          }
5041 
        }
5042 
      }
5043 
 
5044 
      commonAttributes = 'id="SVGID_' + this.id +
5045 
                     '" gradientUnits="userSpaceOnUse"';
5046 
      if (this.gradientTransform) {
5047 
        commonAttributes += ' gradientTransform="matrix(' + this.gradientTransform.join(' ') + ')" ';
5048 
      }
5049 
      if (this.type === 'linear') {
5050 
        markup = [
5051 
          //jscs:disable validateIndentation
5052 
          '<linearGradient ',
5053 
            commonAttributes,
5054 
            ' x1="', coords.x1,
5055 
            '" y1="', coords.y1,
5056 
            '" x2="', coords.x2,
5057 
            '" y2="', coords.y2,
5058 
          '">\n'
5059 
          //jscs:enable validateIndentation
5060 
        ];
5061 
      }
5062 
      else if (this.type === 'radial') {
5063 
        markup = [
5064 
          //jscs:disable validateIndentation
5065 
          '<radialGradient ',
5066 
            commonAttributes,
5067 
            ' cx="', coords.x2,
5068 
            '" cy="', coords.y2,
5069 
            '" r="', coords.r2,
5070 
            '" fx="', coords.x1,
5071 
            '" fy="', coords.y1,
5072 
          '">\n'
5073 
          //jscs:enable validateIndentation
5074 
        ];
5075 
      }
5076 
 
5077 
      for (var i = 0; i < this.colorStops.length; i++) {
5078 
        markup.push(
5079 
          //jscs:disable validateIndentation
5080 
          '<stop ',
5081 
            'offset="', (this.colorStops[i].offset * 100) + '%',
5082 
            '" style="stop-color:', this.colorStops[i].color,
5083 
            (this.colorStops[i].opacity != null ? ';stop-opacity: ' + this.colorStops[i].opacity : ';'),
5084 
          '"/>\n'
5085 
          //jscs:enable validateIndentation
5086 
        );
5087 
      }
5088 
 
5089 
      markup.push((this.type === 'linear' ? '</linearGradient>\n' : '</radialGradient>\n'));
5090 
 
5091 
      return markup.join('');
5092 
    },
5093 
    /* _TO_SVG_END_ */
5094 
 
5095 
    /**
5096 
     * Returns an instance of CanvasGradient
5097 
     * @param {CanvasRenderingContext2D} ctx Context to render on
5098 
     * @return {CanvasGradient}
5099 
     */
5100 
    toLive: function(ctx, object) {
5101 
      var gradient, prop, coords = fabric.util.object.clone(this.coords);
5102 
 
5103 
      if (!this.type) {
5104 
        return;
5105 
      }
5106 
 
5107 
      if (object.group && object.group.type === 'path-group') {
5108 
        for (prop in coords) {
5109 
          if (prop === 'x1' || prop === 'x2') {
5110 
            coords[prop] += -this.offsetX + object.width / 2;
5111 
          }
5112 
          else if (prop === 'y1' || prop === 'y2') {
5113 
            coords[prop] += -this.offsetY + object.height / 2;
5114 
          }
5115 
        }
5116 
      }
5117 
 
5118 
      if (object.type === 'text' || object.type === 'i-text') {
5119 
        for (prop in coords) {
5120 
          if (prop === 'x1' || prop === 'x2') {
5121 
            coords[prop] -= object.width / 2;
5122 
          }
5123 
          else if (prop === 'y1' || prop === 'y2') {
5124 
            coords[prop] -= object.height / 2;
5125 
          }
5126 
        }
5127 
      }
5128 
 
5129 
      if (this.type === 'linear') {
5130 
        gradient = ctx.createLinearGradient(
5131 
          coords.x1, coords.y1, coords.x2, coords.y2);
5132 
      }
5133 
      else if (this.type === 'radial') {
5134 
        gradient = ctx.createRadialGradient(
5135 
          coords.x1, coords.y1, coords.r1, coords.x2, coords.y2, coords.r2);
5136 
      }
5137 
 
5138 
      for (var i = 0, len = this.colorStops.length; i < len; i++) {
5139 
        var color = this.colorStops[i].color,
5140 
            opacity = this.colorStops[i].opacity,
5141 
            offset = this.colorStops[i].offset;
5142 
 
5143 
        if (typeof opacity !== 'undefined') {
5144 
          color = new fabric.Color(color).setAlpha(opacity).toRgba();
5145 
        }
5146 
        gradient.addColorStop(parseFloat(offset), color);
5147 
      }
5148 
 
5149 
      return gradient;
5150 
    }
5151 
  });
5152 
 
5153 
  fabric.util.object.extend(fabric.Gradient, {
5154 
 
5155 
    /* _FROM_SVG_START_ */
5156 
    /**
5157 
     * Returns {@link fabric.Gradient} instance from an SVG element
5158 
     * @static
5159 
     * @memberof fabric.Gradient
5160 
     * @param {SVGGradientElement} el SVG gradient element
5161 
     * @param {fabric.Object} instance
5162 
     * @return {fabric.Gradient} Gradient instance
5163 
     * @see http://www.w3.org/TR/SVG/pservers.html#LinearGradientElement
5164 
     * @see http://www.w3.org/TR/SVG/pservers.html#RadialGradientElement
5165 
     */
5166 
    fromElement: function(el, instance) {
5167 
 
5168 
      /**
5169 
       *  @example:
5170 
       *
5171 
       *  <linearGradient id="linearGrad1">
5172 
       *    <stop offset="0%" stop-color="white"/>
5173 
       *    <stop offset="100%" stop-color="black"/>
5174 
       *  </linearGradient>
5175 
       *
5176 
       *  OR
5177 
       *
5178 
       *  <linearGradient id="linearGrad2">
5179 
       *    <stop offset="0" style="stop-color:rgb(255,255,255)"/>
5180 
       *    <stop offset="1" style="stop-color:rgb(0,0,0)"/>
5181 
       *  </linearGradient>
5182 
       *
5183 
       *  OR
5184 
       *
5185 
       *  <radialGradient id="radialGrad1">
5186 
       *    <stop offset="0%" stop-color="white" stop-opacity="1" />
5187 
       *    <stop offset="50%" stop-color="black" stop-opacity="0.5" />
5188 
       *    <stop offset="100%" stop-color="white" stop-opacity="1" />
5189 
       *  </radialGradient>
5190 
       *
5191 
       *  OR
5192 
       *
5193 
       *  <radialGradient id="radialGrad2">
5194 
       *    <stop offset="0" stop-color="rgb(255,255,255)" />
5195 
       *    <stop offset="0.5" stop-color="rgb(0,0,0)" />
5196 
       *    <stop offset="1" stop-color="rgb(255,255,255)" />
5197 
       *  </radialGradient>
5198 
       *
5199 
       */
5200 
 
5201 
      var colorStopEls = el.getElementsByTagName('stop'),
5202 
          type = (el.nodeName === 'linearGradient' ? 'linear' : 'radial'),
5203 
          gradientUnits = el.getAttribute('gradientUnits') || 'objectBoundingBox',
5204 
          gradientTransform = el.getAttribute('gradientTransform'),
5205 
          colorStops = [],
5206 
          coords = { }, ellipseMatrix;
5207 
 
5208 
      if (type === 'linear') {
5209 
        coords = getLinearCoords(el);
5210 
      }
5211 
      else if (type === 'radial') {
5212 
        coords = getRadialCoords(el);
5213 
      }
5214 
 
5215 
      for (var i = colorStopEls.length; i--; ) {
5216 
        colorStops.push(getColorStop(colorStopEls[i]));
5217 
      }
5218 
 
5219 
      ellipseMatrix = _convertPercentUnitsToValues(instance, coords, gradientUnits);
5220 
 
5221 
      var gradient = new fabric.Gradient({
5222 
        type: type,
5223 
        coords: coords,
5224 
        colorStops: colorStops,
5225 
        offsetX: -instance.left,
5226 
        offsetY: -instance.top
5227 
      });
5228 
 
5229 
      if (gradientTransform || ellipseMatrix !== '') {
5230 
        gradient.gradientTransform = fabric.parseTransformAttribute((gradientTransform || '') + ellipseMatrix);
5231 
      }
5232 
      return gradient;
5233 
    },
5234 
    /* _FROM_SVG_END_ */
5235 
 
5236 
    /**
5237 
     * Returns {@link fabric.Gradient} instance from its object representation
5238 
     * @static
5239 
     * @memberof fabric.Gradient
5240 
     * @param {Object} obj
5241 
     * @param {Object} [options] Options object
5242 
     */
5243 
    forObject: function(obj, options) {
5244 
      options || (options = { });
5245 
      _convertPercentUnitsToValues(obj, options.coords, 'userSpaceOnUse');
5246 
      return new fabric.Gradient(options);
5247 
    }
5248 
  });
5249 
 
5250 
  /**
5251 
   * @private
5252 
   */
5253 
  function _convertPercentUnitsToValues(object, options, gradientUnits) {
5254 
    var propValue, addFactor = 0, multFactor = 1, ellipseMatrix = '';
5255 
    for (var prop in options) {
5256 
      propValue = parseFloat(options[prop], 10);
5257 
      if (typeof options[prop] === 'string' && /^\d+%$/.test(options[prop])) {
5258 
        multFactor = 0.01;
5259 
      }
5260 
      else {
5261 
        multFactor = 1;
5262 
      }
5263 
      if (prop === 'x1' || prop === 'x2' || prop === 'r2') {
5264 
        multFactor *= gradientUnits === 'objectBoundingBox' ? object.width : 1;
5265 
        addFactor = gradientUnits === 'objectBoundingBox' ? object.left || 0 : 0;
5266 
      }
5267 
      else if (prop === 'y1' || prop === 'y2') {
5268 
        multFactor *= gradientUnits === 'objectBoundingBox' ? object.height : 1;
5269 
        addFactor = gradientUnits === 'objectBoundingBox' ? object.top || 0 : 0;
5270 
      }
5271 
      options[prop] = propValue * multFactor + addFactor;
5272 
    }
5273 
    if (object.type === 'ellipse' &&
5274 
        options.r2 !== null &&
5275 
        gradientUnits === 'objectBoundingBox' &&
5276 
        object.rx !== object.ry) {
5277 
 
5278 
      var scaleFactor = object.ry/object.rx;
5279 
      ellipseMatrix = ' scale(1, ' + scaleFactor + ')';
5280 
      if (options.y1) {
5281 
        options.y1 /= scaleFactor;
5282 
      }
5283 
      if (options.y2) {
5284 
        options.y2 /= scaleFactor;
5285 
      }
5286 
    }
5287 
    return ellipseMatrix;
5288 
  }
5289 
})();
5290 
 
5291 
 
5292 
/**
5293 
 * Pattern class
5294 
 * @class fabric.Pattern
5295 
 * @see {@link http://fabricjs.com/patterns/|Pattern demo}
5296 
 * @see {@link http://fabricjs.com/dynamic-patterns/|DynamicPattern demo}
5297 
 * @see {@link fabric.Pattern#initialize} for constructor definition
5298 
 */
5299 
fabric.Pattern = fabric.util.createClass(/** @lends fabric.Pattern.prototype */ {
5300 
 
5301 
  /**
5302 
   * Repeat property of a pattern (one of repeat, repeat-x, repeat-y or no-repeat)
5303 
   * @type String
5304 
   * @default
5305 
   */
5306 
  repeat: 'repeat',
5307 
 
5308 
  /**
5309 
   * Pattern horizontal offset from object's left/top corner
5310 
   * @type Number
5311 
   * @default
5312 
   */
5313 
  offsetX: 0,
5314 
 
5315 
  /**
5316 
   * Pattern vertical offset from object's left/top corner
5317 
   * @type Number
5318 
   * @default
5319 
   */
5320 
  offsetY: 0,
5321 
 
5322 
  /**
5323 
   * Constructor
5324 
   * @param {Object} [options] Options object
5325 
   * @return {fabric.Pattern} thisArg
5326 
   */
5327 
  initialize: function(options) {
5328 
    options || (options = { });
5329 
 
5330 
    this.id = fabric.Object.__uid++;
5331 
 
5332 
    if (options.source) {
5333 
      if (typeof options.source === 'string') {
5334 
        // function string
5335 
        if (typeof fabric.util.getFunctionBody(options.source) !== 'undefined') {
5336 
          this.source = new Function(fabric.util.getFunctionBody(options.source));
5337 
        }
5338 
        else {
5339 
          // img src string
5340 
          var _this = this;
5341 
          this.source = fabric.util.createImage();
5342 
          fabric.util.loadImage(options.source, function(img) {
5343 
            _this.source = img;
5344 
          });
5345 
        }
5346 
      }
5347 
      else {
5348 
        // img element
5349 
        this.source = options.source;
5350 
      }
5351 
    }
5352 
    if (options.repeat) {
5353 
      this.repeat = options.repeat;
5354 
    }
5355 
    if (options.offsetX) {
5356 
      this.offsetX = options.offsetX;
5357 
    }
5358 
    if (options.offsetY) {
5359 
      this.offsetY = options.offsetY;
5360 
    }
5361 
  },
5362 
 
5363 
  /**
5364 
   * Returns object representation of a pattern
5365 
   * @return {Object} Object representation of a pattern instance
5366 
   */
5367 
  toObject: function() {
5368 
 
5369 
    var source;
5370 
 
5371 
    // callback
5372 
    if (typeof this.source === 'function') {
5373 
      source = String(this.source);
5374 
    }
5375 
    // <img> element
5376 
    else if (typeof this.source.src === 'string') {
5377 
      source = this.source.src;
5378 
    }
5379 
 
5380 
    return {
5381 
      source: source,
5382 
      repeat: this.repeat,
5383 
      offsetX: this.offsetX,
5384 
      offsetY: this.offsetY
5385 
    };
5386 
  },
5387 
 
5388 
  /* _TO_SVG_START_ */
5389 
  /**
5390 
   * Returns SVG representation of a pattern
5391 
   * @param {fabric.Object} object
5392 
   * @return {String} SVG representation of a pattern
5393 
   */
5394 
  toSVG: function(object) {
5395 
    var patternSource = typeof this.source === 'function' ? this.source() : this.source,
5396 
        patternWidth = patternSource.width / object.getWidth(),
5397 
        patternHeight = patternSource.height / object.getHeight(),
5398 
        patternOffsetX = this.offsetX / object.getWidth(),
5399 
        patternOffsetY = this.offsetY / object.getHeight(),
5400 
        patternImgSrc = '';
5401 
    if (this.repeat === 'repeat-x' || this.repeat === 'no-repeat') {
5402 
      patternHeight = 1;
5403 
    }
5404 
    if (this.repeat === 'repeat-y' || this.repeat === 'no-repeat') {
5405 
      patternWidth = 1;
5406 
    }
5407 
    if (patternSource.src) {
5408 
      patternImgSrc = patternSource.src;
5409 
    }
5410 
    else if (patternSource.toDataURL) {
5411 
      patternImgSrc = patternSource.toDataURL();
5412 
    }
5413 
 
5414 
    return '<pattern id="SVGID_' + this.id +
5415 
                  '" x="' + patternOffsetX +
5416 
                  '" y="' + patternOffsetY +
5417 
                  '" width="' + patternWidth +
5418 
                  '" height="' + patternHeight + '">\n' +
5419 
             '<image x="0" y="0"' +
5420 
                    ' width="' + patternSource.width +
5421 
                    '" height="' + patternSource.height +
5422 
                    '" xlink:href="' + patternImgSrc +
5423 
             '"></image>\n' +
5424 
           '</pattern>\n';
5425 
  },
5426 
  /* _TO_SVG_END_ */
5427 
 
5428 
  /**
5429 
   * Returns an instance of CanvasPattern
5430 
   * @param {CanvasRenderingContext2D} ctx Context to create pattern
5431 
   * @return {CanvasPattern}
5432 
   */
5433 
  toLive: function(ctx) {
5434 
    var source = typeof this.source === 'function'
5435 
      ? this.source()
5436 
      : this.source;
5437 
 
5438 
    // if the image failed to load, return, and allow rest to continue loading
5439 
    if (!source) {
5440 
      return '';
5441 
    }
5442 
 
5443 
    // if an image
5444 
    if (typeof source.src !== 'undefined') {
5445 
      if (!source.complete) {
5446 
        return '';
5447 
      }
5448 
      if (source.naturalWidth === 0 || source.naturalHeight === 0) {
5449 
        return '';
5450 
      }
5451 
    }
5452 
    return ctx.createPattern(source, this.repeat);
5453 
  }
5454 
});
5455 
 
5456 
 
5457 
(function(global) {
5458 
 
5459 
  'use strict';
5460 
 
5461 
  var fabric = global.fabric || (global.fabric = { }),
5462 
      toFixed = fabric.util.toFixed;
5463 
 
5464 
  if (fabric.Shadow) {
5465 
    fabric.warn('fabric.Shadow is already defined.');
5466 
    return;
5467 
  }
5468 
 
5469 
  /**
5470 
   * Shadow class
5471 
   * @class fabric.Shadow
5472 
   * @see {@link http://fabricjs.com/shadows/|Shadow demo}
5473 
   * @see {@link fabric.Shadow#initialize} for constructor definition
5474 
   */
5475 
  fabric.Shadow = fabric.util.createClass(/** @lends fabric.Shadow.prototype */ {
5476 
 
5477 
    /**
5478 
     * Shadow color
5479 
     * @type String
5480 
     * @default
5481 
     */
5482 
    color: 'rgb(0,0,0)',
5483 
 
5484 
    /**
5485 
     * Shadow blur
5486 
     * @type Number
5487 
     */
5488 
    blur: 0,
5489 
 
5490 
    /**
5491 
     * Shadow horizontal offset
5492 
     * @type Number
5493 
     * @default
5494 
     */
5495 
    offsetX: 0,
5496 
 
5497 
    /**
5498 
     * Shadow vertical offset
5499 
     * @type Number
5500 
     * @default
5501 
     */
5502 
    offsetY: 0,
5503 
 
5504 
    /**
5505 
     * Whether the shadow should affect stroke operations
5506 
     * @type Boolean
5507 
     * @default
5508 
     */
5509 
    affectStroke: false,
5510 
 
5511 
    /**
5512 
     * Indicates whether toObject should include default values
5513 
     * @type Boolean
5514 
     * @default
5515 
     */
5516 
    includeDefaultValues: true,
5517 
 
5518 
    /**
5519 
     * Constructor
5520 
     * @param {Object|String} [options] Options object with any of color, blur, offsetX, offsetX properties or string (e.g. "rgba(0,0,0,0.2) 2px 2px 10px, "2px 2px 10px rgba(0,0,0,0.2)")
5521 
     * @return {fabric.Shadow} thisArg
5522 
     */
5523 
    initialize: function(options) {
5524 
 
5525 
      if (typeof options === 'string') {
5526 
        options = this._parseShadow(options);
5527 
      }
5528 
 
5529 
      for (var prop in options) {
5530 
        this[prop] = options[prop];
5531 
      }
5532 
 
5533 
      this.id = fabric.Object.__uid++;
5534 
    },
5535 
 
5536 
    /**
5537 
     * @private
5538 
     * @param {String} shadow Shadow value to parse
5539 
     * @return {Object} Shadow object with color, offsetX, offsetY and blur
5540 
     */
5541 
    _parseShadow: function(shadow) {
5542 
      var shadowStr = shadow.trim(),
5543 
          offsetsAndBlur = fabric.Shadow.reOffsetsAndBlur.exec(shadowStr) || [ ],
5544 
          color = shadowStr.replace(fabric.Shadow.reOffsetsAndBlur, '') || 'rgb(0,0,0)';
5545 
 
5546 
      return {
5547 
        color: color.trim(),
5548 
        offsetX: parseInt(offsetsAndBlur[1], 10) || 0,
5549 
        offsetY: parseInt(offsetsAndBlur[2], 10) || 0,
5550 
        blur: parseInt(offsetsAndBlur[3], 10) || 0
5551 
      };
5552 
    },
5553 
 
5554 
    /**
5555 
     * Returns a string representation of an instance
5556 
     * @see http://www.w3.org/TR/css-text-decor-3/#text-shadow
5557 
     * @return {String} Returns CSS3 text-shadow declaration
5558 
     */
5559 
    toString: function() {
5560 
      return [this.offsetX, this.offsetY, this.blur, this.color].join('px ');
5561 
    },
5562 
 
5563 
    /* _TO_SVG_START_ */
5564 
    /**
5565 
     * Returns SVG representation of a shadow
5566 
     * @param {fabric.Object} object
5567 
     * @return {String} SVG representation of a shadow
5568 
     */
5569 
    toSVG: function(object) {
5570 
      var mode = 'SourceAlpha', fBoxX = 40, fBoxY = 40;
5571 
 
5572 
      if (object && (object.fill === this.color || object.stroke === this.color)) {
5573 
        mode = 'SourceGraphic';
5574 
      }
5575 
 
5576 
      if (object.width && object.height) {
5577 
        //http://www.w3.org/TR/SVG/filters.html#FilterEffectsRegion
5578 
        // we add some extra space to filter box to contain the blur ( 20 )
5579 
        fBoxX = toFixed(Math.abs(this.offsetX / object.getWidth()), 2) * 100 + 20;
5580 
        fBoxY = toFixed(Math.abs(this.offsetY / object.getHeight()), 2) * 100 + 20;
5581 
      }
5582 
 
5583 
      return (
5584 
        '<filter id="SVGID_' + this.id + '" y="-' + fBoxY + '%" height="' + (100 + 2 * fBoxY) + '%" ' +
5585 
          'x="-' + fBoxX + '%" width="' + (100 + 2 * fBoxX) + '%" ' + '>\n' +
5586 
          '\t<feGaussianBlur in="' + mode + '" stdDeviation="' +
5587 
            toFixed(this.blur ? this.blur / 2 : 0, 3) +
5588 
          '" result="blurOut"></feGaussianBlur>\n' +
5589 
          '\t<feColorMatrix result="matrixOut" in="blurOut" type="matrix" ' +
5590 
          'values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.30 0" ></feColorMatrix >\n' +
5591 
          '\t<feOffset dx="' + this.offsetX + '" dy="' + this.offsetY + '"></feOffset>\n' +
5592 
          '\t<feMerge>\n' +
5593 
            '\t\t<feMergeNode></feMergeNode>\n' +
5594 
            '\t\t<feMergeNode in="SourceGraphic"></feMergeNode>\n' +
5595 
          '\t</feMerge>\n' +
5596 
        '</filter>\n');
5597 
    },
5598 
    /* _TO_SVG_END_ */
5599 
 
5600 
    /**
5601 
     * Returns object representation of a shadow
5602 
     * @return {Object} Object representation of a shadow instance
5603 
     */
5604 
    toObject: function() {
5605 
      if (this.includeDefaultValues) {
5606 
        return {
5607 
          color: this.color,
5608 
          blur: this.blur,
5609 
          offsetX: this.offsetX,
5610 
          offsetY: this.offsetY
5611 
        };
5612 
      }
5613 
      var obj = { }, proto = fabric.Shadow.prototype;
5614 
      if (this.color !== proto.color) {
5615 
        obj.color = this.color;
5616 
      }
5617 
      if (this.blur !== proto.blur) {
5618 
        obj.blur = this.blur;
5619 
      }
5620 
      if (this.offsetX !== proto.offsetX) {
5621 
        obj.offsetX = this.offsetX;
5622 
      }
5623 
      if (this.offsetY !== proto.offsetY) {
5624 
        obj.offsetY = this.offsetY;
5625 
      }
5626 
      return obj;
5627 
    }
5628 
  });
5629 
 
5630 
  /**
5631 
   * Regex matching shadow offsetX, offsetY and blur (ex: "2px 2px 10px rgba(0,0,0,0.2)", "rgb(0,255,0) 2px 2px")
5632 
   * @static
5633 
   * @field
5634 
   * @memberOf fabric.Shadow
5635 
   */
5636 
  fabric.Shadow.reOffsetsAndBlur = /(?:\s|^)(-?\d+(?:px)?(?:\s?|$))?(-?\d+(?:px)?(?:\s?|$))?(\d+(?:px)?)?(?:\s?|$)(?:$|\s)/;
5637 
 
5638 
})(typeof exports !== 'undefined' ? exports : this);
5639 
 
5640 
 
5641 
(function () {
5642 
 
5643 
  'use strict';
5644 
 
5645 
  if (fabric.StaticCanvas) {
5646 
    fabric.warn('fabric.StaticCanvas is already defined.');
5647 
    return;
5648 
  }
5649 
 
5650 
  // aliases for faster resolution
5651 
  var extend = fabric.util.object.extend,
5652 
      getElementOffset = fabric.util.getElementOffset,
5653 
      removeFromArray = fabric.util.removeFromArray,
5654 
 
5655 
      CANVAS_INIT_ERROR = new Error('Could not initialize `canvas` element');
5656 
 
5657 
  /**
5658 
   * Static canvas class
5659 
   * @class fabric.StaticCanvas
5660 
   * @mixes fabric.Collection
5661 
   * @mixes fabric.Observable
5662 
   * @see {@link http://fabricjs.com/static_canvas/|StaticCanvas demo}
5663 
   * @see {@link fabric.StaticCanvas#initialize} for constructor definition
5664 
   * @fires before:render
5665 
   * @fires after:render
5666 
   * @fires canvas:cleared
5667 
   * @fires object:added
5668 
   * @fires object:removed
5669 
   */
5670 
  fabric.StaticCanvas = fabric.util.createClass(/** @lends fabric.StaticCanvas.prototype */ {
5671 
 
5672 
    /**
5673 
     * Constructor
5674 
     * @param {HTMLElement | String} el &lt;canvas> element to initialize instance on
5675 
     * @param {Object} [options] Options object
5676 
     * @return {Object} thisArg
5677 
     */
5678 
    initialize: function(el, options) {
5679 
      options || (options = { });
5680 
 
5681 
      this._initStatic(el, options);
5682 
      fabric.StaticCanvas.activeInstance = this;
5683 
    },
5684 
 
5685 
    /**
5686 
     * Background color of canvas instance.
5687 
     * Should be set via {@link fabric.StaticCanvas#setBackgroundColor}.
5688 
     * @type {(String|fabric.Pattern)}
5689 
     * @default
5690 
     */
5691 
    backgroundColor: '',
5692 
 
5693 
    /**
5694 
     * Background image of canvas instance.
5695 
     * Should be set via {@link fabric.StaticCanvas#setBackgroundImage}.
5696 
     * <b>Backwards incompatibility note:</b> The "backgroundImageOpacity"
5697 
     * and "backgroundImageStretch" properties are deprecated since 1.3.9.
5698 
     * Use {@link fabric.Image#opacity}, {@link fabric.Image#width} and {@link fabric.Image#height}.
5699 
     * @type fabric.Image
5700 
     * @default
5701 
     */
5702 
    backgroundImage: null,
5703 
 
5704 
    /**
5705 
     * Overlay color of canvas instance.
5706 
     * Should be set via {@link fabric.StaticCanvas#setOverlayColor}
5707 
     * @since 1.3.9
5708 
     * @type {(String|fabric.Pattern)}
5709 
     * @default
5710 
     */
5711 
    overlayColor: '',
5712 
 
5713 
    /**
5714 
     * Overlay image of canvas instance.
5715 
     * Should be set via {@link fabric.StaticCanvas#setOverlayImage}.
5716 
     * <b>Backwards incompatibility note:</b> The "overlayImageLeft"
5717 
     * and "overlayImageTop" properties are deprecated since 1.3.9.
5718 
     * Use {@link fabric.Image#left} and {@link fabric.Image#top}.
5719 
     * @type fabric.Image
5720 
     * @default
5721 
     */
5722 
    overlayImage: null,
5723 
 
5724 
    /**
5725 
     * Indicates whether toObject/toDatalessObject should include default values
5726 
     * @type Boolean
5727 
     * @default
5728 
     */
5729 
    includeDefaultValues: true,
5730 
 
5731 
    /**
5732 
     * Indicates whether objects' state should be saved
5733 
     * @type Boolean
5734 
     * @default
5735 
     */
5736 
    stateful: true,
5737 
 
5738 
    /**
5739 
     * Indicates whether {@link fabric.Collection.add}, {@link fabric.Collection.insertAt} and {@link fabric.Collection.remove} should also re-render canvas.
5740 
     * Disabling this option could give a great performance boost when adding/removing a lot of objects to/from canvas at once
5741 
     * (followed by a manual rendering after addition/deletion)
5742 
     * @type Boolean
5743 
     * @default
5744 
     */
5745 
    renderOnAddRemove: true,
5746 
 
5747 
    /**
5748 
     * Function that determines clipping of entire canvas area
5749 
     * Being passed context as first argument. See clipping canvas area in {@link https://github.com/kangax/fabric.js/wiki/FAQ}
5750 
     * @type Function
5751 
     * @default
5752 
     */
5753 
    clipTo: null,
5754 
 
5755 
    /**
5756 
     * Indicates whether object controls (borders/controls) are rendered above overlay image
5757 
     * @type Boolean
5758 
     * @default
5759 
     */
5760 
    controlsAboveOverlay: false,
5761 
 
5762 
    /**
5763 
     * Indicates whether the browser can be scrolled when using a touchscreen and dragging on the canvas
5764 
     * @type Boolean
5765 
     * @default
5766 
     */
5767 
    allowTouchScrolling: false,
5768 
 
5769 
    /**
5770 
     * Indicates whether this canvas will use image smoothing, this is on by default in browsers
5771 
     * @type Boolean
5772 
     * @default
5773 
     */
5774 
    imageSmoothingEnabled: true,
5775 
 
5776 
    /**
5777 
     * Indicates whether objects should remain in current stack position when selected. When false objects are brought to top and rendered as part of the selection group
5778 
     * @type Boolean
5779 
     * @default
5780 
     */
5781 
    preserveObjectStacking: false,
5782 
 
5783 
    /**
5784 
     * The transformation (in the format of Canvas transform) which focuses the viewport
5785 
     * @type Array
5786 
     * @default
5787 
     */
5788 
    viewportTransform: [1, 0, 0, 1, 0, 0],
5789 
 
5790 
    /**
5791 
     * Callback; invoked right before object is about to be scaled/rotated
5792 
     */
5793 
    onBeforeScaleRotate: function () {
5794 
      /* NOOP */
5795 
    },
5796 
 
5797 
    /**
5798 
     * @private
5799 
     * @param {HTMLElement | String} el &lt;canvas> element to initialize instance on
5800 
     * @param {Object} [options] Options object
5801 
     */
5802 
    _initStatic: function(el, options) {
5803 
      this._objects = [];
5804 
 
5805 
      this._createLowerCanvas(el);
5806 
      this._initOptions(options);
5807 
      this._setImageSmoothing();
5808 
 
5809 
      if (options.overlayImage) {
5810 
        this.setOverlayImage(options.overlayImage, this.renderAll.bind(this));
5811 
      }
5812 
      if (options.backgroundImage) {
5813 
        this.setBackgroundImage(options.backgroundImage, this.renderAll.bind(this));
5814 
      }
5815 
      if (options.backgroundColor) {
5816 
        this.setBackgroundColor(options.backgroundColor, this.renderAll.bind(this));
5817 
      }
5818 
      if (options.overlayColor) {
5819 
        this.setOverlayColor(options.overlayColor, this.renderAll.bind(this));
5820 
      }
5821 
      this.calcOffset();
5822 
    },
5823 
 
5824 
    /**
5825 
     * Calculates canvas element offset relative to the document
5826 
     * This method is also attached as "resize" event handler of window
5827 
     * @return {fabric.Canvas} instance
5828 
     * @chainable
5829 
     */
5830 
    calcOffset: function () {
5831 
      this._offset = getElementOffset(this.lowerCanvasEl);
5832 
      return this;
5833 
    },
5834 
 
5835 
    /**
5836 
     * Sets {@link fabric.StaticCanvas#overlayImage|overlay image} for this canvas
5837 
     * @param {(fabric.Image|String)} image fabric.Image instance or URL of an image to set overlay to
5838 
     * @param {Function} callback callback to invoke when image is loaded and set as an overlay
5839 
     * @param {Object} [options] Optional options to set for the {@link fabric.Image|overlay image}.
5840 
     * @return {fabric.Canvas} thisArg
5841 
     * @chainable
5842 
     * @see {@link http://jsfiddle.net/fabricjs/MnzHT/|jsFiddle demo}
5843 
     * @example <caption>Normal overlayImage with left/top = 0</caption>
5844 
     * canvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), {
5845 
     *   // Needed to position overlayImage at 0/0
5846 
     *   originX: 'left',
5847 
     *   originY: 'top'
5848 
     * });
5849 
     * @example <caption>overlayImage with different properties</caption>
5850 
     * canvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), {
5851 
     *   opacity: 0.5,
5852 
     *   angle: 45,
5853 
     *   left: 400,
5854 
     *   top: 400,
5855 
     *   originX: 'left',
5856 
     *   originY: 'top'
5857 
     * });
5858 
     * @example <caption>Stretched overlayImage #1 - width/height correspond to canvas width/height</caption>
5859 
     * fabric.Image.fromURL('http://fabricjs.com/assets/jail_cell_bars.png', function(img) {
5860 
     *    img.set({width: canvas.width, height: canvas.height, originX: 'left', originY: 'top'});
5861 
     *    canvas.setOverlayImage(img, canvas.renderAll.bind(canvas));
5862 
     * });
5863 
     * @example <caption>Stretched overlayImage #2 - width/height correspond to canvas width/height</caption>
5864 
     * canvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), {
5865 
     *   width: canvas.width,
5866 
     *   height: canvas.height,
5867 
     *   // Needed to position overlayImage at 0/0
5868 
     *   originX: 'left',
5869 
     *   originY: 'top'
5870 
     * });
5871 
     * @example <caption>overlayImage loaded from cross-origin</caption>
5872 
     * canvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), {
5873 
     *   opacity: 0.5,
5874 
     *   angle: 45,
5875 
     *   left: 400,
5876 
     *   top: 400,
5877 
     *   originX: 'left',
5878 
     *   originY: 'top',
5879 
     *   crossOrigin: 'anonymous'
5880 
     * });
5881 
     */
5882 
    setOverlayImage: function (image, callback, options) {
5883 
      return this.__setBgOverlayImage('overlayImage', image, callback, options);
5884 
    },
5885 
 
5886 
    /**
5887 
     * Sets {@link fabric.StaticCanvas#backgroundImage|background image} for this canvas
5888 
     * @param {(fabric.Image|String)} image fabric.Image instance or URL of an image to set background to
5889 
     * @param {Function} callback Callback to invoke when image is loaded and set as background
5890 
     * @param {Object} [options] Optional options to set for the {@link fabric.Image|background image}.
5891 
     * @return {fabric.Canvas} thisArg
5892 
     * @chainable
5893 
     * @see {@link http://jsfiddle.net/fabricjs/YH9yD/|jsFiddle demo}
5894 
     * @example <caption>Normal backgroundImage with left/top = 0</caption>
5895 
     * canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png', canvas.renderAll.bind(canvas), {
5896 
     *   // Needed to position backgroundImage at 0/0
5897 
     *   originX: 'left',
5898 
     *   originY: 'top'
5899 
     * });
5900 
     * @example <caption>backgroundImage with different properties</caption>
5901 
     * canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png', canvas.renderAll.bind(canvas), {
5902 
     *   opacity: 0.5,
5903 
     *   angle: 45,
5904 
     *   left: 400,
5905 
     *   top: 400,
5906 
     *   originX: 'left',
5907 
     *   originY: 'top'
5908 
     * });
5909 
     * @example <caption>Stretched backgroundImage #1 - width/height correspond to canvas width/height</caption>
5910 
     * fabric.Image.fromURL('http://fabricjs.com/assets/honey_im_subtle.png', function(img) {
5911 
     *    img.set({width: canvas.width, height: canvas.height, originX: 'left', originY: 'top'});
5912 
     *    canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
5913 
     * });
5914 
     * @example <caption>Stretched backgroundImage #2 - width/height correspond to canvas width/height</caption>
5915 
     * canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png', canvas.renderAll.bind(canvas), {
5916 
     *   width: canvas.width,
5917 
     *   height: canvas.height,
5918 
     *   // Needed to position backgroundImage at 0/0
5919 
     *   originX: 'left',
5920 
     *   originY: 'top'
5921 
     * });
5922 
     * @example <caption>backgroundImage loaded from cross-origin</caption>
5923 
     * canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png', canvas.renderAll.bind(canvas), {
5924 
     *   opacity: 0.5,
5925 
     *   angle: 45,
5926 
     *   left: 400,
5927 
     *   top: 400,
5928 
     *   originX: 'left',
5929 
     *   originY: 'top',
5930 
     *   crossOrigin: 'anonymous'
5931 
     * });
5932 
     */
5933 
    setBackgroundImage: function (image, callback, options) {
5934 
      return this.__setBgOverlayImage('backgroundImage', image, callback, options);
5935 
    },
5936 
 
5937 
    /**
5938 
     * Sets {@link fabric.StaticCanvas#overlayColor|background color} for this canvas
5939 
     * @param {(String|fabric.Pattern)} overlayColor Color or pattern to set background color to
5940 
     * @param {Function} callback Callback to invoke when background color is set
5941 
     * @return {fabric.Canvas} thisArg
5942 
     * @chainable
5943 
     * @see {@link http://jsfiddle.net/fabricjs/pB55h/|jsFiddle demo}
5944 
     * @example <caption>Normal overlayColor - color value</caption>
5945 
     * canvas.setOverlayColor('rgba(255, 73, 64, 0.6)', canvas.renderAll.bind(canvas));
5946 
     * @example <caption>fabric.Pattern used as overlayColor</caption>
5947 
     * canvas.setOverlayColor({
5948 
     *   source: 'http://fabricjs.com/assets/escheresque_ste.png'
5949 
     * }, canvas.renderAll.bind(canvas));
5950 
     * @example <caption>fabric.Pattern used as overlayColor with repeat and offset</caption>
5951 
     * canvas.setOverlayColor({
5952 
     *   source: 'http://fabricjs.com/assets/escheresque_ste.png',
5953 
     *   repeat: 'repeat',
5954 
     *   offsetX: 200,
5955 
     *   offsetY: 100
5956 
     * }, canvas.renderAll.bind(canvas));
5957 
     */
5958 
    setOverlayColor: function(overlayColor, callback) {
5959 
      return this.__setBgOverlayColor('overlayColor', overlayColor, callback);
5960 
    },
5961 
 
5962 
    /**
5963 
     * Sets {@link fabric.StaticCanvas#backgroundColor|background color} for this canvas
5964 
     * @param {(String|fabric.Pattern)} backgroundColor Color or pattern to set background color to
5965 
     * @param {Function} callback Callback to invoke when background color is set
5966 
     * @return {fabric.Canvas} thisArg
5967 
     * @chainable
5968 
     * @see {@link http://jsfiddle.net/fabricjs/hXzvk/|jsFiddle demo}
5969 
     * @example <caption>Normal backgroundColor - color value</caption>
5970 
     * canvas.setBackgroundColor('rgba(255, 73, 64, 0.6)', canvas.renderAll.bind(canvas));
5971 
     * @example <caption>fabric.Pattern used as backgroundColor</caption>
5972 
     * canvas.setBackgroundColor({
5973 
     *   source: 'http://fabricjs.com/assets/escheresque_ste.png'
5974 
     * }, canvas.renderAll.bind(canvas));
5975 
     * @example <caption>fabric.Pattern used as backgroundColor with repeat and offset</caption>
5976 
     * canvas.setBackgroundColor({
5977 
     *   source: 'http://fabricjs.com/assets/escheresque_ste.png',
5978 
     *   repeat: 'repeat',
5979 
     *   offsetX: 200,
5980 
     *   offsetY: 100
5981 
     * }, canvas.renderAll.bind(canvas));
5982 
     */
5983 
    setBackgroundColor: function(backgroundColor, callback) {
5984 
      return this.__setBgOverlayColor('backgroundColor', backgroundColor, callback);
5985 
    },
5986 
 
5987 
    /**
5988 
     * @private
5989 
     * @see {@link http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-imagesmoothingenabled|WhatWG Canvas Standard}
5990 
     */
5991 
    _setImageSmoothing: function() {
5992 
      var ctx = this.getContext();
5993 
 
5994 
      ctx.imageSmoothingEnabled       = this.imageSmoothingEnabled;
5995 
      ctx.webkitImageSmoothingEnabled = this.imageSmoothingEnabled;
5996 
      ctx.mozImageSmoothingEnabled    = this.imageSmoothingEnabled;
5997 
      ctx.msImageSmoothingEnabled     = this.imageSmoothingEnabled;
5998 
      ctx.oImageSmoothingEnabled      = this.imageSmoothingEnabled;
5999 
    },
6000 
 
6001 
    /**
6002 
     * @private
6003 
     * @param {String} property Property to set ({@link fabric.StaticCanvas#backgroundImage|backgroundImage}
6004 
     * or {@link fabric.StaticCanvas#overlayImage|overlayImage})
6005 
     * @param {(fabric.Image|String|null)} image fabric.Image instance, URL of an image or null to set background or overlay to
6006 
     * @param {Function} callback Callback to invoke when image is loaded and set as background or overlay
6007 
     * @param {Object} [options] Optional options to set for the {@link fabric.Image|image}.
6008 
     */
6009 
    __setBgOverlayImage: function(property, image, callback, options) {
6010 
      if (typeof image === 'string') {
6011 
        fabric.util.loadImage(image, function(img) {
6012 
          this[property] = new fabric.Image(img, options);
6013 
          callback && callback();
6014 
        }, this, options && options.crossOrigin);
6015 
      }
6016 
      else {
6017 
        options && image.setOptions(options);
6018 
        this[property] = image;
6019 
        callback && callback();
6020 
      }
6021 
 
6022 
      return this;
6023 
    },
6024 
 
6025 
    /**
6026 
     * @private
6027 
     * @param {String} property Property to set ({@link fabric.StaticCanvas#backgroundColor|backgroundColor}
6028 
     * or {@link fabric.StaticCanvas#overlayColor|overlayColor})
6029 
     * @param {(Object|String|null)} color Object with pattern information, color value or null
6030 
     * @param {Function} [callback] Callback is invoked when color is set
6031 
     */
6032 
    __setBgOverlayColor: function(property, color, callback) {
6033 
      if (color && color.source) {
6034 
        var _this = this;
6035 
        fabric.util.loadImage(color.source, function(img) {
6036 
          _this[property] = new fabric.Pattern({
6037 
            source: img,
6038 
            repeat: color.repeat,
6039 
            offsetX: color.offsetX,
6040 
            offsetY: color.offsetY
6041 
          });
6042 
          callback && callback();
6043 
        });
6044 
      }
6045 
      else {
6046 
        this[property] = color;
6047 
        callback && callback();
6048 
      }
6049 
 
6050 
      return this;
6051 
    },
6052 
 
6053 
    /**
6054 
     * @private
6055 
     */
6056 
    _createCanvasElement: function() {
6057 
      var element = fabric.document.createElement('canvas');
6058 
      if (!element.style) {
6059 
        element.style = { };
6060 
      }
6061 
      if (!element) {
6062 
        throw CANVAS_INIT_ERROR;
6063 
      }
6064 
      this._initCanvasElement(element);
6065 
      return element;
6066 
    },
6067 
 
6068 
    /**
6069 
     * @private
6070 
     * @param {HTMLElement} element
6071 
     */
6072 
    _initCanvasElement: function(element) {
6073 
      fabric.util.createCanvasElement(element);
6074 
 
6075 
      if (typeof element.getContext === 'undefined') {
6076 
        throw CANVAS_INIT_ERROR;
6077 
      }
6078 
    },
6079 
 
6080 
    /**
6081 
     * @private
6082 
     * @param {Object} [options] Options object
6083 
     */
6084 
    _initOptions: function (options) {
6085 
      for (var prop in options) {
6086 
        this[prop] = options[prop];
6087 
      }
6088 
 
6089 
      this.width = this.width || parseInt(this.lowerCanvasEl.width, 10) || 0;
6090 
      this.height = this.height || parseInt(this.lowerCanvasEl.height, 10) || 0;
6091 
 
6092 
      if (!this.lowerCanvasEl.style) {
6093 
        return;
6094 
      }
6095 
 
6096 
      this.lowerCanvasEl.width = this.width;
6097 
      this.lowerCanvasEl.height = this.height;
6098 
 
6099 
      this.lowerCanvasEl.style.width = this.width + 'px';
6100 
      this.lowerCanvasEl.style.height = this.height + 'px';
6101 
 
6102 
      this.viewportTransform = this.viewportTransform.slice();
6103 
    },
6104 
 
6105 
    /**
6106 
     * Creates a bottom canvas
6107 
     * @private
6108 
     * @param {HTMLElement} [canvasEl]
6109 
     */
6110 
    _createLowerCanvas: function (canvasEl) {
6111 
      this.lowerCanvasEl = fabric.util.getById(canvasEl) || this._createCanvasElement();
6112 
      this._initCanvasElement(this.lowerCanvasEl);
6113 
 
6114 
      fabric.util.addClass(this.lowerCanvasEl, 'lower-canvas');
6115 
 
6116 
      if (this.interactive) {
6117 
        this._applyCanvasStyle(this.lowerCanvasEl);
6118 
      }
6119 
 
6120 
      this.contextContainer = this.lowerCanvasEl.getContext('2d');
6121 
    },
6122 
 
6123 
    /**
6124 
     * Returns canvas width (in px)
6125 
     * @return {Number}
6126 
     */
6127 
    getWidth: function () {
6128 
      return this.width;
6129 
    },
6130 
 
6131 
    /**
6132 
     * Returns canvas height (in px)
6133 
     * @return {Number}
6134 
     */
6135 
    getHeight: function () {
6136 
      return this.height;
6137 
    },
6138 
 
6139 
    /**
6140 
     * Sets width of this canvas instance
6141 
     * @param {Number|String} value                         Value to set width to
6142 
     * @param {Object}        [options]                     Options object
6143 
     * @param {Boolean}       [options.backstoreOnly=false] Set the given dimensions only as canvas backstore dimensions
6144 
     * @param {Boolean}       [options.cssOnly=false]       Set the given dimensions only as css dimensions
6145 
     * @return {fabric.Canvas} instance
6146 
     * @chainable true
6147 
     */
6148 
    setWidth: function (value, options) {
6149 
      return this.setDimensions({ width: value }, options);
6150 
    },
6151 
 
6152 
    /**
6153 
     * Sets height of this canvas instance
6154 
     * @param {Number|String} value                         Value to set height to
6155 
     * @param {Object}        [options]                     Options object
6156 
     * @param {Boolean}       [options.backstoreOnly=false] Set the given dimensions only as canvas backstore dimensions
6157 
     * @param {Boolean}       [options.cssOnly=false]       Set the given dimensions only as css dimensions
6158 
     * @return {fabric.Canvas} instance
6159 
     * @chainable true
6160 
     */
6161 
    setHeight: function (value, options) {
6162 
      return this.setDimensions({ height: value }, options);
6163 
    },
6164 
 
6165 
    /**
6166 
     * Sets dimensions (width, height) of this canvas instance. when options.cssOnly flag active you should also supply the unit of measure (px/%/em)
6167 
     * @param {Object}        dimensions                    Object with width/height properties
6168 
     * @param {Number|String} [dimensions.width]            Width of canvas element
6169 
     * @param {Number|String} [dimensions.height]           Height of canvas element
6170 
     * @param {Object}        [options]                     Options object
6171 
     * @param {Boolean}       [options.backstoreOnly=false] Set the given dimensions only as canvas backstore dimensions
6172 
     * @param {Boolean}       [options.cssOnly=false]       Set the given dimensions only as css dimensions
6173 
     * @return {fabric.Canvas} thisArg
6174 
     * @chainable
6175 
     */
6176 
    setDimensions: function (dimensions, options) {
6177 
      var cssValue;
6178 
 
6179 
      options = options || {};
6180 
 
6181 
      for (var prop in dimensions) {
6182 
        cssValue = dimensions[prop];
6183 
 
6184 
        if (!options.cssOnly) {
6185 
          this._setBackstoreDimension(prop, dimensions[prop]);
6186 
          cssValue += 'px';
6187 
        }
6188 
 
6189 
        if (!options.backstoreOnly) {
6190 
          this._setCssDimension(prop, cssValue);
6191 
        }
6192 
      }
6193 
 
6194 
      if (!options.cssOnly) {
6195 
        this.renderAll();
6196 
      }
6197 
 
6198 
      this.calcOffset();
6199 
 
6200 
      return this;
6201 
    },
6202 
 
6203 
    /**
6204 
     * Helper for setting width/height
6205 
     * @private
6206 
     * @param {String} prop property (width|height)
6207 
     * @param {Number} value value to set property to
6208 
     * @return {fabric.Canvas} instance
6209 
     * @chainable true
6210 
     */
6211 
    _setBackstoreDimension: function (prop, value) {
6212 
      this.lowerCanvasEl[prop] = value;
6213 
 
6214 
      if (this.upperCanvasEl) {
6215 
        this.upperCanvasEl[prop] = value;
6216 
      }
6217 
 
6218 
      if (this.cacheCanvasEl) {
6219 
        this.cacheCanvasEl[prop] = value;
6220 
      }
6221 
 
6222 
      this[prop] = value;
6223 
 
6224 
      return this;
6225 
    },
6226 
 
6227 
    /**
6228 
     * Helper for setting css width/height
6229 
     * @private
6230 
     * @param {String} prop property (width|height)
6231 
     * @param {String} value value to set property to
6232 
     * @return {fabric.Canvas} instance
6233 
     * @chainable true
6234 
     */
6235 
    _setCssDimension: function (prop, value) {
6236 
      this.lowerCanvasEl.style[prop] = value;
6237 
 
6238 
      if (this.upperCanvasEl) {
6239 
        this.upperCanvasEl.style[prop] = value;
6240 
      }
6241 
 
6242 
      if (this.wrapperEl) {
6243 
        this.wrapperEl.style[prop] = value;
6244 
      }
6245 
 
6246 
      return this;
6247 
    },
6248 
 
6249 
    /**
6250 
     * Returns canvas zoom level
6251 
     * @return {Number}
6252 
     */
6253 
    getZoom: function () {
6254 
      return Math.sqrt(this.viewportTransform[0] * this.viewportTransform[3]);
6255 
    },
6256 
 
6257 
    /**
6258 
     * Sets viewport transform of this canvas instance
6259 
     * @param {Array} vpt the transform in the form of context.transform
6260 
     * @return {fabric.Canvas} instance
6261 
     * @chainable true
6262 
     */
6263 
    setViewportTransform: function (vpt) {
6264 
      var activeGroup = this.getActiveGroup();
6265 
      this.viewportTransform = vpt;
6266 
      this.renderAll();
6267 
      for (var i = 0, len = this._objects.length; i < len; i++) {
6268 
        this._objects[i].setCoords();
6269 
      }
6270 
      if (activeGroup) {
6271 
        activeGroup.setCoords();
6272 
      }
6273 
      return this;
6274 
    },
6275 
 
6276 
    /**
6277 
     * Sets zoom level of this canvas instance, zoom centered around point
6278 
     * @param {fabric.Point} point to zoom with respect to
6279 
     * @param {Number} value to set zoom to, less than 1 zooms out
6280 
     * @return {fabric.Canvas} instance
6281 
     * @chainable true
6282 
     */
6283 
    zoomToPoint: function (point, value) {
6284 
      // TODO: just change the scale, preserve other transformations
6285 
      var before = point;
6286 
      point = fabric.util.transformPoint(point, fabric.util.invertTransform(this.viewportTransform));
6287 
      this.viewportTransform[0] = value;
6288 
      this.viewportTransform[3] = value;
6289 
      var after = fabric.util.transformPoint(point, this.viewportTransform);
6290 
      this.viewportTransform[4] += before.x - after.x;
6291 
      this.viewportTransform[5] += before.y - after.y;
6292 
      this.renderAll();
6293 
      for (var i = 0, len = this._objects.length; i < len; i++) {
6294 
        this._objects[i].setCoords();
6295 
      }
6296 
      return this;
6297 
    },
6298 
 
6299 
    /**
6300 
     * Sets zoom level of this canvas instance
6301 
     * @param {Number} value to set zoom to, less than 1 zooms out
6302 
     * @return {fabric.Canvas} instance
6303 
     * @chainable true
6304 
     */
6305 
    setZoom: function (value) {
6306 
      this.zoomToPoint(new fabric.Point(0, 0), value);
6307 
      return this;
6308 
    },
6309 
 
6310 
    /**
6311 
     * Pan viewport so as to place point at top left corner of canvas
6312 
     * @param {fabric.Point} point to move to
6313 
     * @return {fabric.Canvas} instance
6314 
     * @chainable true
6315 
     */
6316 
    absolutePan: function (point) {
6317 
      this.viewportTransform[4] = -point.x;
6318 
      this.viewportTransform[5] = -point.y;
6319 
      this.renderAll();
6320 
      for (var i = 0, len = this._objects.length; i < len; i++) {
6321 
        this._objects[i].setCoords();
6322 
      }
6323 
      return this;
6324 
    },
6325 
 
6326 
    /**
6327 
     * Pans viewpoint relatively
6328 
     * @param {fabric.Point} point (position vector) to move by
6329 
     * @return {fabric.Canvas} instance
6330 
     * @chainable true
6331 
     */
6332 
    relativePan: function (point) {
6333 
      return this.absolutePan(new fabric.Point(
6334 
        -point.x - this.viewportTransform[4],
6335 
        -point.y - this.viewportTransform[5]
6336 
      ));
6337 
    },
6338 
 
6339 
    /**
6340 
     * Returns &lt;canvas> element corresponding to this instance
6341 
     * @return {HTMLCanvasElement}
6342 
     */
6343 
    getElement: function () {
6344 
      return this.lowerCanvasEl;
6345 
    },
6346 
 
6347 
    /**
6348 
     * Returns currently selected object, if any
6349 
     * @return {fabric.Object}
6350 
     */
6351 
    getActiveObject: function() {
6352 
      return null;
6353 
    },
6354 
 
6355 
    /**
6356 
     * Returns currently selected group of object, if any
6357 
     * @return {fabric.Group}
6358 
     */
6359 
    getActiveGroup: function() {
6360 
      return null;
6361 
    },
6362 
 
6363 
    /**
6364 
     * Given a context, renders an object on that context
6365 
     * @param {CanvasRenderingContext2D} ctx Context to render object on
6366 
     * @param {fabric.Object} object Object to render
6367 
     * @private
6368 
     */
6369 
    _draw: function (ctx, object) {
6370 
      if (!object) {
6371 
        return;
6372 
      }
6373 
 
6374 
      ctx.save();
6375 
      var v = this.viewportTransform;
6376 
      ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]);
6377 
      if (this._shouldRenderObject(object)) {
6378 
        object.render(ctx);
6379 
      }
6380 
      ctx.restore();
6381 
      if (!this.controlsAboveOverlay) {
6382 
        object._renderControls(ctx);
6383 
      }
6384 
    },
6385 
 
6386 
    _shouldRenderObject: function(object) {
6387 
      if (!object) {
6388 
        return false;
6389 
      }
6390 
      return (object !== this.getActiveGroup() || !this.preserveObjectStacking);
6391 
    },
6392 
 
6393 
    /**
6394 
     * @private
6395 
     * @param {fabric.Object} obj Object that was added
6396 
     */
6397 
    _onObjectAdded: function(obj) {
6398 
      this.stateful && obj.setupState();
6399 
      obj.canvas = this;
6400 
      obj.setCoords();
6401 
      this.fire('object:added', { target: obj });
6402 
      obj.fire('added');
6403 
    },
6404 
 
6405 
    /**
6406 
     * @private
6407 
     * @param {fabric.Object} obj Object that was removed
6408 
     */
6409 
    _onObjectRemoved: function(obj) {
6410 
      // removing active object should fire "selection:cleared" events
6411 
      if (this.getActiveObject() === obj) {
6412 
        this.fire('before:selection:cleared', { target: obj });
6413 
        this._discardActiveObject();
6414 
        this.fire('selection:cleared');
6415 
      }
6416 
 
6417 
      this.fire('object:removed', { target: obj });
6418 
      obj.fire('removed');
6419 
    },
6420 
 
6421 
    /**
6422 
     * Clears specified context of canvas element
6423 
     * @param {CanvasRenderingContext2D} ctx Context to clear
6424 
     * @return {fabric.Canvas} thisArg
6425 
     * @chainable
6426 
     */
6427 
    clearContext: function(ctx) {
6428 
      ctx.clearRect(0, 0, this.width, this.height);
6429 
      return this;
6430 
    },
6431 
 
6432 
    /**
6433 
     * Returns context of canvas where objects are drawn
6434 
     * @return {CanvasRenderingContext2D}
6435 
     */
6436 
    getContext: function () {
6437 
      return this.contextContainer;
6438 
    },
6439 
 
6440 
    /**
6441 
     * Clears all contexts (background, main, top) of an instance
6442 
     * @return {fabric.Canvas} thisArg
6443 
     * @chainable
6444 
     */
6445 
    clear: function () {
6446 
      this._objects.length = 0;
6447 
      if (this.discardActiveGroup) {
6448 
        this.discardActiveGroup();
6449 
      }
6450 
      if (this.discardActiveObject) {
6451 
        this.discardActiveObject();
6452 
      }
6453 
      this.clearContext(this.contextContainer);
6454 
      if (this.contextTop) {
6455 
        this.clearContext(this.contextTop);
6456 
      }
6457 
      this.fire('canvas:cleared');
6458 
      this.renderAll();
6459 
      return this;
6460 
    },
6461 
 
6462 
    /**
6463 
     * Renders both the top canvas and the secondary container canvas.
6464 
     * @param {Boolean} [allOnTop] Whether we want to force all images to be rendered on the top canvas
6465 
     * @return {fabric.Canvas} instance
6466 
     * @chainable
6467 
     */
6468 
    renderAll: function (allOnTop) {
6469 
      var canvasToDrawOn = this[(allOnTop === true && this.interactive) ? 'contextTop' : 'contextContainer'],
6470 
          activeGroup = this.getActiveGroup();
6471 
 
6472 
      if (this.contextTop && this.selection && !this._groupSelector) {
6473 
        this.clearContext(this.contextTop);
6474 
      }
6475 
 
6476 
      if (!allOnTop) {
6477 
        this.clearContext(canvasToDrawOn);
6478 
      }
6479 
 
6480 
      this.fire('before:render');
6481 
 
6482 
      if (this.clipTo) {
6483 
        fabric.util.clipContext(this, canvasToDrawOn);
6484 
      }
6485 
 
6486 
      this._renderBackground(canvasToDrawOn);
6487 
      this._renderObjects(canvasToDrawOn, activeGroup);
6488 
      this._renderActiveGroup(canvasToDrawOn, activeGroup);
6489 
 
6490 
      if (this.clipTo) {
6491 
        canvasToDrawOn.restore();
6492 
      }
6493 
 
6494 
      this._renderOverlay(canvasToDrawOn);
6495 
 
6496 
      if (this.controlsAboveOverlay && this.interactive) {
6497 
        this.drawControls(canvasToDrawOn);
6498 
      }
6499 
 
6500 
      this.fire('after:render');
6501 
 
6502 
      return this;
6503 
    },
6504 
 
6505 
    /**
6506 
     * @private
6507 
     * @param {CanvasRenderingContext2D} ctx Context to render on
6508 
     * @param {fabric.Group} activeGroup
6509 
     */
6510 
    _renderObjects: function(ctx, activeGroup) {
6511 
      var i, length;
6512 
 
6513 
      // fast path
6514 
      if (!activeGroup || this.preserveObjectStacking) {
6515 
        for (i = 0, length = this._objects.length; i < length; ++i) {
6516 
          this._draw(ctx, this._objects[i]);
6517 
        }
6518 
      }
6519 
      else {
6520 
        for (i = 0, length = this._objects.length; i < length; ++i) {
6521 
          if (this._objects[i] && !activeGroup.contains(this._objects[i])) {
6522 
            this._draw(ctx, this._objects[i]);
6523 
          }
6524 
        }
6525 
      }
6526 
    },
6527 
 
6528 
    /**
6529 
     * @private
6530 
     * @param {CanvasRenderingContext2D} ctx Context to render on
6531 
     * @param {fabric.Group} activeGroup
6532 
     */
6533 
    _renderActiveGroup: function(ctx, activeGroup) {
6534 
 
6535 
      // delegate rendering to group selection (if one exists)
6536 
      if (activeGroup) {
6537 
 
6538 
        //Store objects in group preserving order, then replace
6539 
        var sortedObjects = [];
6540 
        this.forEachObject(function (object) {
6541 
          if (activeGroup.contains(object)) {
6542 
            sortedObjects.push(object);
6543 
          }
6544 
        });
6545 
        activeGroup._set('objects', sortedObjects);
6546 
        this._draw(ctx, activeGroup);
6547 
      }
6548 
    },
6549 
 
6550 
    /**
6551 
     * @private
6552 
     * @param {CanvasRenderingContext2D} ctx Context to render on
6553 
     */
6554 
    _renderBackground: function(ctx) {
6555 
      if (this.backgroundColor) {
6556 
        ctx.fillStyle = this.backgroundColor.toLive
6557 
          ? this.backgroundColor.toLive(ctx)
6558 
          : this.backgroundColor;
6559 
 
6560 
        ctx.fillRect(
6561 
          this.backgroundColor.offsetX || 0,
6562 
          this.backgroundColor.offsetY || 0,
6563 
          this.width,
6564 
          this.height);
6565 
      }
6566 
      if (this.backgroundImage) {
6567 
        this._draw(ctx, this.backgroundImage);
6568 
      }
6569 
    },
6570 
 
6571 
    /**
6572 
     * @private
6573 
     * @param {CanvasRenderingContext2D} ctx Context to render on
6574 
     */
6575 
    _renderOverlay: function(ctx) {
6576 
      if (this.overlayColor) {
6577 
        ctx.fillStyle = this.overlayColor.toLive
6578 
          ? this.overlayColor.toLive(ctx)
6579 
          : this.overlayColor;
6580 
 
6581 
        ctx.fillRect(
6582 
          this.overlayColor.offsetX || 0,
6583 
          this.overlayColor.offsetY || 0,
6584 
          this.width,
6585 
          this.height);
6586 
      }
6587 
      if (this.overlayImage) {
6588 
        this._draw(ctx, this.overlayImage);
6589 
      }
6590 
    },
6591 
 
6592 
    /**
6593 
     * Method to render only the top canvas.
6594 
     * Also used to render the group selection box.
6595 
     * @return {fabric.Canvas} thisArg
6596 
     * @chainable
6597 
     */
6598 
    renderTop: function () {
6599 
      var ctx = this.contextTop || this.contextContainer;
6600 
      this.clearContext(ctx);
6601 
 
6602 
      // we render the top context - last object
6603 
      if (this.selection && this._groupSelector) {
6604 
        this._drawSelection();
6605 
      }
6606 
 
6607 
      // delegate rendering to group selection if one exists
6608 
      // used for drawing selection borders/controls
6609 
      var activeGroup = this.getActiveGroup();
6610 
      if (activeGroup) {
6611 
        activeGroup.render(ctx);
6612 
      }
6613 
 
6614 
      this._renderOverlay(ctx);
6615 
 
6616 
      this.fire('after:render');
6617 
 
6618 
      return this;
6619 
    },
6620 
 
6621 
    /**
6622 
     * Returns coordinates of a center of canvas.
6623 
     * Returned value is an object with top and left properties
6624 
     * @return {Object} object with "top" and "left" number values
6625 
     */
6626 
    getCenter: function () {
6627 
      return {
6628 
        top: this.getHeight() / 2,
6629 
        left: this.getWidth() / 2
6630 
      };
6631 
    },
6632 
 
6633 
    /**
6634 
     * Centers object horizontally.
6635 
     * You might need to call `setCoords` on an object after centering, to update controls area.
6636 
     * @param {fabric.Object} object Object to center horizontally
6637 
     * @return {fabric.Canvas} thisArg
6638 
     */
6639 
    centerObjectH: function (object) {
6640 
      this._centerObject(object, new fabric.Point(this.getCenter().left, object.getCenterPoint().y));
6641 
      this.renderAll();
6642 
      return this;
6643 
    },
6644 
 
6645 
    /**
6646 
     * Centers object vertically.
6647 
     * You might need to call `setCoords` on an object after centering, to update controls area.
6648 
     * @param {fabric.Object} object Object to center vertically
6649 
     * @return {fabric.Canvas} thisArg
6650 
     * @chainable
6651 
     */
6652 
    centerObjectV: function (object) {
6653 
      this._centerObject(object, new fabric.Point(object.getCenterPoint().x, this.getCenter().top));
6654 
      this.renderAll();
6655 
      return this;
6656 
    },
6657 
 
6658 
    /**
6659 
     * Centers object vertically and horizontally.
6660 
     * You might need to call `setCoords` on an object after centering, to update controls area.
6661 
     * @param {fabric.Object} object Object to center vertically and horizontally
6662 
     * @return {fabric.Canvas} thisArg
6663 
     * @chainable
6664 
     */
6665 
    centerObject: function(object) {
6666 
      var center = this.getCenter();
6667 
 
6668 
      this._centerObject(object, new fabric.Point(center.left, center.top));
6669 
      this.renderAll();
6670 
      return this;
6671 
    },
6672 
 
6673 
    /**
6674 
     * @private
6675 
     * @param {fabric.Object} object Object to center
6676 
     * @param {fabric.Point} center Center point
6677 
     * @return {fabric.Canvas} thisArg
6678 
     * @chainable
6679 
     */
6680 
    _centerObject: function(object, center) {
6681 
      object.setPositionByOrigin(center, 'center', 'center');
6682 
      return this;
6683 
    },
6684 
 
6685 
    /**
6686 
     * Returs dataless JSON representation of canvas
6687 
     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
6688 
     * @return {String} json string
6689 
     */
6690 
    toDatalessJSON: function (propertiesToInclude) {
6691 
      return this.toDatalessObject(propertiesToInclude);
6692 
    },
6693 
 
6694 
    /**
6695 
     * Returns object representation of canvas
6696 
     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
6697 
     * @return {Object} object representation of an instance
6698 
     */
6699 
    toObject: function (propertiesToInclude) {
6700 
      return this._toObjectMethod('toObject', propertiesToInclude);
6701 
    },
6702 
 
6703 
    /**
6704 
     * Returns dataless object representation of canvas
6705 
     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
6706 
     * @return {Object} object representation of an instance
6707 
     */
6708 
    toDatalessObject: function (propertiesToInclude) {
6709 
      return this._toObjectMethod('toDatalessObject', propertiesToInclude);
6710 
    },
6711 
 
6712 
    /**
6713 
     * @private
6714 
     */
6715 
    _toObjectMethod: function (methodName, propertiesToInclude) {
6716 
 
6717 
      var data = {
6718 
        objects: this._toObjects(methodName, propertiesToInclude)
6719 
      };
6720 
 
6721 
      extend(data, this.__serializeBgOverlay());
6722 
 
6723 
      fabric.util.populateWithProperties(this, data, propertiesToInclude);
6724 
 
6725 
      return data;
6726 
    },
6727 
 
6728 
    /**
6729 
     * @private
6730 
     */
6731 
    _toObjects: function(methodName, propertiesToInclude) {
6732 
      return this.getObjects().map(function(instance) {
6733 
        return this._toObject(instance, methodName, propertiesToInclude);
6734 
      }, this);
6735 
    },
6736 
 
6737 
    /**
6738 
     * @private
6739 
     */
6740 
    _toObject: function(instance, methodName, propertiesToInclude) {
6741 
      var originalValue;
6742 
 
6743 
      if (!this.includeDefaultValues) {
6744 
        originalValue = instance.includeDefaultValues;
6745 
        instance.includeDefaultValues = false;
6746 
      }
6747 
 
6748 
      //If the object is part of the current selection group, it should
6749 
      //be transformed appropriately
6750 
      //i.e. it should be serialised as it would appear if the selection group
6751 
      //were to be destroyed.
6752 
      var originalProperties = this._realizeGroupTransformOnObject(instance),
6753 
          object = instance[methodName](propertiesToInclude);
6754 
      if (!this.includeDefaultValues) {
6755 
        instance.includeDefaultValues = originalValue;
6756 
      }
6757 
 
6758 
      //Undo the damage we did by changing all of its properties
6759 
      this._unwindGroupTransformOnObject(instance, originalProperties);
6760 
 
6761 
      return object;
6762 
    },
6763 
 
6764 
    /**
6765 
     * Realises an object's group transformation on it
6766 
     * @private
6767 
     * @param {fabric.Object} [instance] the object to transform (gets mutated)
6768 
     * @returns the original values of instance which were changed
6769 
     */
6770 
    _realizeGroupTransformOnObject: function(instance) {
6771 
      var layoutProps = ['angle', 'flipX', 'flipY', 'height', 'left', 'scaleX', 'scaleY', 'top', 'width'];
6772 
      if (instance.group && instance.group === this.getActiveGroup()) {
6773 
        //Copy all the positionally relevant properties across now
6774 
        var originalValues = {};
6775 
        layoutProps.forEach(function(prop) {
6776 
          originalValues[prop] = instance[prop];
6777 
        });
6778 
        this.getActiveGroup().realizeTransform(instance);
6779 
        return originalValues;
6780 
      }
6781 
      else {
6782 
        return null;
6783 
      }
6784 
    },
6785 
 
6786 
    /*
6787 
     * Restores the changed properties of instance
6788 
     * @private
6789 
     * @param {fabric.Object} [instance] the object to un-transform (gets mutated)
6790 
     * @param {Object} [originalValues] the original values of instance, as returned by _realizeGroupTransformOnObject
6791 
     */
6792 
    _unwindGroupTransformOnObject: function(instance, originalValues) {
6793 
      if (originalValues) {
6794 
        instance.set(originalValues);
6795 
      }
6796 
    },
6797 
 
6798 
    /**
6799 
     * @private
6800 
     */
6801 
    __serializeBgOverlay: function() {
6802 
      var data = {
6803 
        background: (this.backgroundColor && this.backgroundColor.toObject)
6804 
          ? this.backgroundColor.toObject()
6805 
          : this.backgroundColor
6806 
      };
6807 
 
6808 
      if (this.overlayColor) {
6809 
        data.overlay = this.overlayColor.toObject
6810 
          ? this.overlayColor.toObject()
6811 
          : this.overlayColor;
6812 
      }
6813 
      if (this.backgroundImage) {
6814 
        data.backgroundImage = this.backgroundImage.toObject();
6815 
      }
6816 
      if (this.overlayImage) {
6817 
        data.overlayImage = this.overlayImage.toObject();
6818 
      }
6819 
 
6820 
      return data;
6821 
    },
6822 
 
6823 
    /* _TO_SVG_START_ */
6824 
    /**
6825 
     * When true, getSvgTransform() will apply the StaticCanvas.viewportTransform to the SVG transformation. When true,
6826 
     * a zoomed canvas will then produce zoomed SVG output.
6827 
     * @type Boolean
6828 
     * @default
6829 
     */
6830 
    svgViewportTransformation: true,
6831 
 
6832 
    /**
6833 
     * Returns SVG representation of canvas
6834 
     * @function
6835 
     * @param {Object} [options] Options object for SVG output
6836 
     * @param {Boolean} [options.suppressPreamble=false] If true xml tag is not included
6837 
     * @param {Object} [options.viewBox] SVG viewbox object
6838 
     * @param {Number} [options.viewBox.x] x-cooridnate of viewbox
6839 
     * @param {Number} [options.viewBox.y] y-coordinate of viewbox
6840 
     * @param {Number} [options.viewBox.width] Width of viewbox
6841 
     * @param {Number} [options.viewBox.height] Height of viewbox
6842 
     * @param {String} [options.encoding=UTF-8] Encoding of SVG output
6843 
     * @param {Function} [reviver] Method for further parsing of svg elements, called after each fabric object converted into svg representation.
6844 
     * @return {String} SVG string
6845 
     * @tutorial {@link http://fabricjs.com/fabric-intro-part-3/#serialization}
6846 
     * @see {@link http://jsfiddle.net/fabricjs/jQ3ZZ/|jsFiddle demo}
6847 
     * @example <caption>Normal SVG output</caption>
6848 
     * var svg = canvas.toSVG();
6849 
     * @example <caption>SVG output without preamble (without &lt;?xml ../>)</caption>
6850 
     * var svg = canvas.toSVG({suppressPreamble: true});
6851 
     * @example <caption>SVG output with viewBox attribute</caption>
6852 
     * var svg = canvas.toSVG({
6853 
     *   viewBox: {
6854 
     *     x: 100,
6855 
     *     y: 100,
6856 
     *     width: 200,
6857 
     *     height: 300
6858 
     *   }
6859 
     * });
6860 
     * @example <caption>SVG output with different encoding (default: UTF-8)</caption>
6861 
     * var svg = canvas.toSVG({encoding: 'ISO-8859-1'});
6862 
     * @example <caption>Modify SVG output with reviver function</caption>
6863 
     * var svg = canvas.toSVG(null, function(svg) {
6864 
     *   return svg.replace('stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; ', '');
6865 
     * });
6866 
     */
6867 
    toSVG: function(options, reviver) {
6868 
      options || (options = { });
6869 
 
6870 
      var markup = [];
6871 
 
6872 
      this._setSVGPreamble(markup, options);
6873 
      this._setSVGHeader(markup, options);
6874 
 
6875 
      this._setSVGBgOverlayColor(markup, 'backgroundColor');
6876 
      this._setSVGBgOverlayImage(markup, 'backgroundImage');
6877 
 
6878 
      this._setSVGObjects(markup, reviver);
6879 
 
6880 
      this._setSVGBgOverlayColor(markup, 'overlayColor');
6881 
      this._setSVGBgOverlayImage(markup, 'overlayImage');
6882 
 
6883 
      markup.push('</svg>');
6884 
 
6885 
      return markup.join('');
6886 
    },
6887 
 
6888 
    /**
6889 
     * @private
6890 
     */
6891 
    _setSVGPreamble: function(markup, options) {
6892 
      if (!options.suppressPreamble) {
6893 
        markup.push(
6894 
          '<?xml version="1.0" encoding="', (options.encoding || 'UTF-8'), '" standalone="no" ?>',
6895 
            '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" ',
6896 
              '"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n'
6897 
        );
6898 
      }
6899 
    },
6900 
 
6901 
    /**
6902 
     * @private
6903 
     */
6904 
    _setSVGHeader: function(markup, options) {
6905 
      var width, height, vpt;
6906 
 
6907 
      if (options.viewBox) {
6908 
        width = options.viewBox.width;
6909 
        height = options.viewBox.height;
6910 
      }
6911 
      else {
6912 
        width = this.width;
6913 
        height = this.height;
6914 
        if (!this.svgViewportTransformation) {
6915 
          vpt = this.viewportTransform;
6916 
          width /= vpt[0];
6917 
          height /= vpt[3];
6918 
        }
6919 
      }
6920 
 
6921 
      markup.push(
6922 
        '<svg ',
6923 
          'xmlns="http://www.w3.org/2000/svg" ',
6924 
          'xmlns:xlink="http://www.w3.org/1999/xlink" ',
6925 
          'version="1.1" ',
6926 
          'width="', width, '" ',
6927 
          'height="', height, '" ',
6928 
          (this.backgroundColor && !this.backgroundColor.toLive
6929 
            ? 'style="background-color: ' + this.backgroundColor + '" '
6930 
            : null),
6931 
          (options.viewBox
6932 
              ? 'viewBox="' +
6933 
                options.viewBox.x + ' ' +
6934 
                options.viewBox.y + ' ' +
6935 
                options.viewBox.width + ' ' +
6936 
                options.viewBox.height + '" '
6937 
              : null),
6938 
          'xml:space="preserve">',
6939 
        '<desc>Created with Fabric.js ', fabric.version, '</desc>',
6940 
        '<defs>',
6941 
          fabric.createSVGFontFacesMarkup(this.getObjects()),
6942 
          fabric.createSVGRefElementsMarkup(this),
6943 
        '</defs>'
6944 
      );
6945 
    },
6946 
 
6947 
    /**
6948 
     * @private
6949 
     */
6950 
    _setSVGObjects: function(markup, reviver) {
6951 
      for (var i = 0, objects = this.getObjects(), len = objects.length; i < len; i++) {
6952 
        var instance = objects[i],
6953 
            //If the object is in a selection group, simulate what would happen to that
6954 
            //object when the group is deselected
6955 
            originalProperties = this._realizeGroupTransformOnObject(instance);
6956 
        markup.push(instance.toSVG(reviver));
6957 
        this._unwindGroupTransformOnObject(instance, originalProperties);
6958 
      }
6959 
    },
6960 
 
6961 
    /**
6962 
     * @private
6963 
     */
6964 
    _setSVGBgOverlayImage: function(markup, property) {
6965 
      if (this[property] && this[property].toSVG) {
6966 
        markup.push(this[property].toSVG());
6967 
      }
6968 
    },
6969 
 
6970 
    /**
6971 
     * @private
6972 
     */
6973 
    _setSVGBgOverlayColor: function(markup, property) {
6974 
      if (this[property] && this[property].source) {
6975 
        markup.push(
6976 
          '<rect x="', this[property].offsetX, '" y="', this[property].offsetY, '" ',
6977 
            'width="',
6978 
              (this[property].repeat === 'repeat-y' || this[property].repeat === 'no-repeat'
6979 
                ? this[property].source.width
6980 
                : this.width),
6981 
            '" height="',
6982 
              (this[property].repeat === 'repeat-x' || this[property].repeat === 'no-repeat'
6983 
                ? this[property].source.height
6984 
                : this.height),
6985 
            '" fill="url(#' + property + 'Pattern)"',
6986 
          '></rect>'
6987 
        );
6988 
      }
6989 
      else if (this[property] && property === 'overlayColor') {
6990 
        markup.push(
6991 
          '<rect x="0" y="0" ',
6992 
            'width="', this.width,
6993 
            '" height="', this.height,
6994 
            '" fill="', this[property], '"',
6995 
          '></rect>'
6996 
        );
6997 
      }
6998 
    },
6999 
    /* _TO_SVG_END_ */
7000 
 
7001 
    /**
7002 
     * Moves an object to the bottom of the stack of drawn objects
7003 
     * @param {fabric.Object} object Object to send to back
7004 
     * @return {fabric.Canvas} thisArg
7005 
     * @chainable
7006 
     */
7007 
    sendToBack: function (object) {
7008 
      removeFromArray(this._objects, object);
7009 
      this._objects.unshift(object);
7010 
      return this.renderAll && this.renderAll();
7011 
    },
7012 
 
7013 
    /**
7014 
     * Moves an object to the top of the stack of drawn objects
7015 
     * @param {fabric.Object} object Object to send
7016 
     * @return {fabric.Canvas} thisArg
7017 
     * @chainable
7018 
     */
7019 
    bringToFront: function (object) {
7020 
      removeFromArray(this._objects, object);
7021 
      this._objects.push(object);
7022 
      return this.renderAll && this.renderAll();
7023 
    },
7024 
 
7025 
    /**
7026 
     * Moves an object down in stack of drawn objects
7027 
     * @param {fabric.Object} object Object to send
7028 
     * @param {Boolean} [intersecting] If `true`, send object behind next lower intersecting object
7029 
     * @return {fabric.Canvas} thisArg
7030 
     * @chainable
7031 
     */
7032 
    sendBackwards: function (object, intersecting) {
7033 
      var idx = this._objects.indexOf(object);
7034 
 
7035 
      // if object is not on the bottom of stack
7036 
      if (idx !== 0) {
7037 
        var newIdx = this._findNewLowerIndex(object, idx, intersecting);
7038 
 
7039 
        removeFromArray(this._objects, object);
7040 
        this._objects.splice(newIdx, 0, object);
7041 
        this.renderAll && this.renderAll();
7042 
      }
7043 
      return this;
7044 
    },
7045 
 
7046 
    /**
7047 
     * @private
7048 
     */
7049 
    _findNewLowerIndex: function(object, idx, intersecting) {
7050 
      var newIdx;
7051 
 
7052 
      if (intersecting) {
7053 
        newIdx = idx;
7054 
 
7055 
        // traverse down the stack looking for the nearest intersecting object
7056 
        for (var i = idx - 1; i >= 0; --i) {
7057 
 
7058 
          var isIntersecting = object.intersectsWithObject(this._objects[i]) ||
7059 
                               object.isContainedWithinObject(this._objects[i]) ||
7060 
                               this._objects[i].isContainedWithinObject(object);
7061 
 
7062 
          if (isIntersecting) {
7063 
            newIdx = i;
7064 
            break;
7065 
          }
7066 
        }
7067 
      }
7068 
      else {
7069 
        newIdx = idx - 1;
7070 
      }
7071 
 
7072 
      return newIdx;
7073 
    },
7074 
 
7075 
    /**
7076 
     * Moves an object up in stack of drawn objects
7077 
     * @param {fabric.Object} object Object to send
7078 
     * @param {Boolean} [intersecting] If `true`, send object in front of next upper intersecting object
7079 
     * @return {fabric.Canvas} thisArg
7080 
     * @chainable
7081 
     */
7082 
    bringForward: function (object, intersecting) {
7083 
      var idx = this._objects.indexOf(object);
7084 
 
7085 
      // if object is not on top of stack (last item in an array)
7086 
      if (idx !== this._objects.length - 1) {
7087 
        var newIdx = this._findNewUpperIndex(object, idx, intersecting);
7088 
 
7089 
        removeFromArray(this._objects, object);
7090 
        this._objects.splice(newIdx, 0, object);
7091 
        this.renderAll && this.renderAll();
7092 
      }
7093 
      return this;
7094 
    },
7095 
 
7096 
    /**
7097 
     * @private
7098 
     */
7099 
    _findNewUpperIndex: function(object, idx, intersecting) {
7100 
      var newIdx;
7101 
 
7102 
      if (intersecting) {
7103 
        newIdx = idx;
7104 
 
7105 
        // traverse up the stack looking for the nearest intersecting object
7106 
        for (var i = idx + 1; i < this._objects.length; ++i) {
7107 
 
7108 
          var isIntersecting = object.intersectsWithObject(this._objects[i]) ||
7109 
                               object.isContainedWithinObject(this._objects[i]) ||
7110 
                               this._objects[i].isContainedWithinObject(object);
7111 
 
7112 
          if (isIntersecting) {
7113 
            newIdx = i;
7114 
            break;
7115 
          }
7116 
        }
7117 
      }
7118 
      else {
7119 
        newIdx = idx + 1;
7120 
      }
7121 
 
7122 
      return newIdx;
7123 
    },
7124 
 
7125 
    /**
7126 
     * Moves an object to specified level in stack of drawn objects
7127 
     * @param {fabric.Object} object Object to send
7128 
     * @param {Number} index Position to move to
7129 
     * @return {fabric.Canvas} thisArg
7130 
     * @chainable
7131 
     */
7132 
    moveTo: function (object, index) {
7133 
      removeFromArray(this._objects, object);
7134 
      this._objects.splice(index, 0, object);
7135 
      return this.renderAll && this.renderAll();
7136 
    },
7137 
 
7138 
    /**
7139 
     * Clears a canvas element and removes all event listeners
7140 
     * @return {fabric.Canvas} thisArg
7141 
     * @chainable
7142 
     */
7143 
    dispose: function () {
7144 
      this.clear();
7145 
      this.interactive && this.removeListeners();
7146 
      return this;
7147 
    },
7148 
 
7149 
    /**
7150 
     * Returns a string representation of an instance
7151 
     * @return {String} string representation of an instance
7152 
     */
7153 
    toString: function () {
7154 
      return '#<fabric.Canvas (' + this.complexity() + '): ' +
7155 
               '{ objects: ' + this.getObjects().length + ' }>';
7156 
    }
7157 
  });
7158 
 
7159 
  extend(fabric.StaticCanvas.prototype, fabric.Observable);
7160 
  extend(fabric.StaticCanvas.prototype, fabric.Collection);
7161 
  extend(fabric.StaticCanvas.prototype, fabric.DataURLExporter);
7162 
 
7163 
  extend(fabric.StaticCanvas, /** @lends fabric.StaticCanvas */ {
7164 
 
7165 
    /**
7166 
     * @static
7167 
     * @type String
7168 
     * @default
7169 
     */
7170 
    EMPTY_JSON: '{"objects": [], "background": "white"}',
7171 
 
7172 
    /**
7173 
     * Provides a way to check support of some of the canvas methods
7174 
     * (either those of HTMLCanvasElement itself, or rendering context)
7175 
     *
7176 
     * @param {String} methodName Method to check support for;
7177 
     *                            Could be one of "getImageData", "toDataURL", "toDataURLWithQuality" or "setLineDash"
7178 
     * @return {Boolean | null} `true` if method is supported (or at least exists),
7179 
     *                          `null` if canvas element or context can not be initialized
7180 
     */
7181 
    supports: function (methodName) {
7182 
      var el = fabric.util.createCanvasElement();
7183 
 
7184 
      if (!el || !el.getContext) {
7185 
        return null;
7186 
      }
7187 
 
7188 
      var ctx = el.getContext('2d');
7189 
      if (!ctx) {
7190 
        return null;
7191 
      }
7192 
 
7193 
      switch (methodName) {
7194 
 
7195 
        case 'getImageData':
7196 
          return typeof ctx.getImageData !== 'undefined';
7197 
 
7198 
        case 'setLineDash':
7199 
          return typeof ctx.setLineDash !== 'undefined';
7200 
 
7201 
        case 'toDataURL':
7202 
          return typeof el.toDataURL !== 'undefined';
7203 
 
7204 
        case 'toDataURLWithQuality':
7205 
          try {
7206 
            el.toDataURL('image/jpeg', 0);
7207 
            return true;
7208 
          }
7209 
          catch (e) { }
7210 
          return false;
7211 
 
7212 
        default:
7213 
          return null;
7214 
      }
7215 
    }
7216 
  });
7217 
 
7218 
  /**
7219 
   * Returns JSON representation of canvas
7220 
   * @function
7221 
   * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
7222 
   * @return {String} JSON string
7223 
   * @tutorial {@link http://fabricjs.com/fabric-intro-part-3/#serialization}
7224 
   * @see {@link http://jsfiddle.net/fabricjs/pec86/|jsFiddle demo}
7225 
   * @example <caption>JSON without additional properties</caption>
7226 
   * var json = canvas.toJSON();
7227 
   * @example <caption>JSON with additional properties included</caption>
7228 
   * var json = canvas.toJSON(['lockMovementX', 'lockMovementY', 'lockRotation', 'lockScalingX', 'lockScalingY', 'lockUniScaling']);
7229 
   * @example <caption>JSON without default values</caption>
7230 
   * canvas.includeDefaultValues = false;
7231 
   * var json = canvas.toJSON();
7232 
   */
7233 
  fabric.StaticCanvas.prototype.toJSON = fabric.StaticCanvas.prototype.toObject;
7234 
 
7235 
})();
7236 
 
7237 
 
7238 
/**
7239 
 * BaseBrush class
7240 
 * @class fabric.BaseBrush
7241 
 * @see {@link http://fabricjs.com/freedrawing/|Freedrawing demo}
7242 
 */
7243 
fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype */ {
7244 
 
7245 
  /**
7246 
   * Color of a brush
7247 
   * @type String
7248 
   * @default
7249 
   */
7250 
  color:            'rgb(0, 0, 0)',
7251 
 
7252 
  /**
7253 
   * Width of a brush
7254 
   * @type Number
7255 
   * @default
7256 
   */
7257 
  width:            1,
7258 
 
7259 
  /**
7260 
   * Shadow object representing shadow of this shape.
7261 
   * <b>Backwards incompatibility note:</b> This property replaces "shadowColor" (String), "shadowOffsetX" (Number),
7262 
   * "shadowOffsetY" (Number) and "shadowBlur" (Number) since v1.2.12
7263 
   * @type fabric.Shadow
7264 
   * @default
7265 
   */
7266 
  shadow:          null,
7267 
 
7268 
  /**
7269 
   * Line endings style of a brush (one of "butt", "round", "square")
7270 
   * @type String
7271 
   * @default
7272 
   */
7273 
  strokeLineCap:    'round',
7274 
 
7275 
  /**
7276 
   * Corner style of a brush (one of "bevil", "round", "miter")
7277 
   * @type String
7278 
   * @default
7279 
   */
7280 
  strokeLineJoin:   'round',
7281 
 
7282 
  /**
7283 
   * Stroke Dash Array.
7284 
   * @type Array
7285 
   * @default
7286 
   */
7287 
  strokeDashArray:   null,
7288 
 
7289 
  /**
7290 
   * Sets shadow of an object
7291 
   * @param {Object|String} [options] Options object or string (e.g. "2px 2px 10px rgba(0,0,0,0.2)")
7292 
   * @return {fabric.Object} thisArg
7293 
   * @chainable
7294 
   */
7295 
  setShadow: function(options) {
7296 
    this.shadow = new fabric.Shadow(options);
7297 
    return this;
7298 
  },
7299 
 
7300 
  /**
7301 
   * Sets brush styles
7302 
   * @private
7303 
   */
7304 
  _setBrushStyles: function() {
7305 
    var ctx = this.canvas.contextTop;
7306 
 
7307 
    ctx.strokeStyle = this.color;
7308 
    ctx.lineWidth = this.width;
7309 
    ctx.lineCap = this.strokeLineCap;
7310 
    ctx.lineJoin = this.strokeLineJoin;
7311 
    if (this.strokeDashArray && fabric.StaticCanvas.supports('setLineDash')) {
7312 
      ctx.setLineDash(this.strokeDashArray);
7313 
    }
7314 
  },
7315 
 
7316 
  /**
7317 
   * Sets brush shadow styles
7318 
   * @private
7319 
   */
7320 
  _setShadow: function() {
7321 
    if (!this.shadow) {
7322 
      return;
7323 
    }
7324 
 
7325 
    var ctx = this.canvas.contextTop;
7326 
 
7327 
    ctx.shadowColor = this.shadow.color;
7328 
    ctx.shadowBlur = this.shadow.blur;
7329 
    ctx.shadowOffsetX = this.shadow.offsetX;
7330 
    ctx.shadowOffsetY = this.shadow.offsetY;
7331 
  },
7332 
 
7333 
  /**
7334 
   * Removes brush shadow styles
7335 
   * @private
7336 
   */
7337 
  _resetShadow: function() {
7338 
    var ctx = this.canvas.contextTop;
7339 
 
7340 
    ctx.shadowColor = '';
7341 
    ctx.shadowBlur = ctx.shadowOffsetX = ctx.shadowOffsetY = 0;
7342 
  }
7343 
});
7344 
 
7345 
 
7346 
(function() {
7347 
 
7348 
  /**
7349 
   * PencilBrush class
7350 
   * @class fabric.PencilBrush
7351 
   * @extends fabric.BaseBrush
7352 
   */
7353 
  fabric.PencilBrush = fabric.util.createClass(fabric.BaseBrush, /** @lends fabric.PencilBrush.prototype */ {
7354 
 
7355 
    /**
7356 
     * Constructor
7357 
     * @param {fabric.Canvas} canvas
7358 
     * @return {fabric.PencilBrush} Instance of a pencil brush
7359 
     */
7360 
    initialize: function(canvas) {
7361 
      this.canvas = canvas;
7362 
      this._points = [ ];
7363 
    },
7364 
 
7365 
    /**
7366 
     * Inovoked on mouse down
7367 
     * @param {Object} pointer
7368 
     */
7369 
    onMouseDown: function(pointer) {
7370 
      this._prepareForDrawing(pointer);
7371 
      // capture coordinates immediately
7372 
      // this allows to draw dots (when movement never occurs)
7373 
      this._captureDrawingPath(pointer);
7374 
      this._render();
7375 
    },
7376 
 
7377 
    /**
7378 
     * Inovoked on mouse move
7379 
     * @param {Object} pointer
7380 
     */
7381 
    onMouseMove: function(pointer) {
7382 
      this._captureDrawingPath(pointer);
7383 
      // redraw curve
7384 
      // clear top canvas
7385 
      this.canvas.clearContext(this.canvas.contextTop);
7386 
      this._render();
7387 
    },
7388 
 
7389 
    /**
7390 
     * Invoked on mouse up
7391 
     */
7392 
    onMouseUp: function() {
7393 
      this._finalizeAndAddPath();
7394 
    },
7395 
 
7396 
    /**
7397 
     * @private
7398 
     * @param {Object} pointer Actual mouse position related to the canvas.
7399 
     */
7400 
    _prepareForDrawing: function(pointer) {
7401 
 
7402 
      var p = new fabric.Point(pointer.x, pointer.y);
7403 
 
7404 
      this._reset();
7405 
      this._addPoint(p);
7406 
 
7407 
      this.canvas.contextTop.moveTo(p.x, p.y);
7408 
    },
7409 
 
7410 
    /**
7411 
     * @private
7412 
     * @param {fabric.Point} point Point to be added to points array
7413 
     */
7414 
    _addPoint: function(point) {
7415 
      this._points.push(point);
7416 
    },
7417 
 
7418 
    /**
7419 
     * Clear points array and set contextTop canvas style.
7420 
     * @private
7421 
     */
7422 
    _reset: function() {
7423 
      this._points.length = 0;
7424 
 
7425 
      this._setBrushStyles();
7426 
      this._setShadow();
7427 
    },
7428 
 
7429 
    /**
7430 
     * @private
7431 
     * @param {Object} pointer Actual mouse position related to the canvas.
7432 
     */
7433 
    _captureDrawingPath: function(pointer) {
7434 
      var pointerPoint = new fabric.Point(pointer.x, pointer.y);
7435 
      this._addPoint(pointerPoint);
7436 
    },
7437 
 
7438 
    /**
7439 
     * Draw a smooth path on the topCanvas using quadraticCurveTo
7440 
     * @private
7441 
     */
7442 
    _render: function() {
7443 
      var ctx  = this.canvas.contextTop,
7444 
          v = this.canvas.viewportTransform,
7445 
          p1 = this._points[0],
7446 
          p2 = this._points[1];
7447 
 
7448 
      ctx.save();
7449 
      ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]);
7450 
      ctx.beginPath();
7451 
 
7452 
      //if we only have 2 points in the path and they are the same
7453 
      //it means that the user only clicked the canvas without moving the mouse
7454 
      //then we should be drawing a dot. A path isn't drawn between two identical dots
7455 
      //that's why we set them apart a bit
7456 
      if (this._points.length === 2 && p1.x === p2.x && p1.y === p2.y) {
7457 
        p1.x -= 0.5;
7458 
        p2.x += 0.5;
7459 
      }
7460 
      ctx.moveTo(p1.x, p1.y);
7461 
 
7462 
      for (var i = 1, len = this._points.length; i < len; i++) {
7463 
        // we pick the point between pi + 1 & pi + 2 as the
7464 
        // end point and p1 as our control point.
7465 
        var midPoint = p1.midPointFrom(p2);
7466 
        ctx.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y);
7467 
 
7468 
        p1 = this._points[i];
7469 
        p2 = this._points[i + 1];
7470 
      }
7471 
      // Draw last line as a straight line while
7472 
      // we wait for the next point to be able to calculate
7473 
      // the bezier control point
7474 
      ctx.lineTo(p1.x, p1.y);
7475 
      ctx.stroke();
7476 
      ctx.restore();
7477 
    },
7478 
 
7479 
    /**
7480 
     * Converts points to SVG path
7481 
     * @param {Array} points Array of points
7482 
     * @param {Number} minX
7483 
     * @param {Number} minY
7484 
     * @return {String} SVG path
7485 
     */
7486 
    convertPointsToSVGPath: function(points) {
7487 
      var path = [],
7488 
          p1 = new fabric.Point(points[0].x, points[0].y),
7489 
          p2 = new fabric.Point(points[1].x, points[1].y);
7490 
 
7491 
      path.push('M ', points[0].x, ' ', points[0].y, ' ');
7492 
      for (var i = 1, len = points.length; i < len; i++) {
7493 
        var midPoint = p1.midPointFrom(p2);
7494 
        // p1 is our bezier control point
7495 
        // midpoint is our endpoint
7496 
        // start point is p(i-1) value.
7497 
        path.push('Q ', p1.x, ' ', p1.y, ' ', midPoint.x, ' ', midPoint.y, ' ');
7498 
        p1 = new fabric.Point(points[i].x, points[i].y);
7499 
        if ((i + 1) < points.length) {
7500 
          p2 = new fabric.Point(points[i + 1].x, points[i + 1].y);
7501 
        }
7502 
      }
7503 
      path.push('L ', p1.x, ' ', p1.y, ' ');
7504 
      return path;
7505 
    },
7506 
 
7507 
    /**
7508 
     * Creates fabric.Path object to add on canvas
7509 
     * @param {String} pathData Path data
7510 
     * @return {fabric.Path} Path to add on canvas
7511 
     */
7512 
    createPath: function(pathData) {
7513 
      var path = new fabric.Path(pathData, {
7514 
                   fill: null,
7515 
                   stroke: this.color,
7516 
                   strokeWidth: this.width,
7517 
                   strokeLineCap: this.strokeLineCap,
7518 
                   strokeLineJoin: this.strokeLineJoin,
7519 
                   strokeDashArray: this.strokeDashArray,
7520 
                   originX: 'center',
7521 
                   originY: 'center'
7522 
                 });
7523 
 
7524 
      if (this.shadow) {
7525 
        this.shadow.affectStroke = true;
7526 
        path.setShadow(this.shadow);
7527 
      }
7528 
 
7529 
      return path;
7530 
    },
7531 
 
7532 
    /**
7533 
     * On mouseup after drawing the path on contextTop canvas
7534 
     * we use the points captured to create an new fabric path object
7535 
     * and add it to the fabric canvas.
7536 
     */
7537 
    _finalizeAndAddPath: function() {
7538 
      var ctx = this.canvas.contextTop;
7539 
      ctx.closePath();
7540 
 
7541 
      var pathData = this.convertPointsToSVGPath(this._points).join('');
7542 
      if (pathData === 'M 0 0 Q 0 0 0 0 L 0 0') {
7543 
        // do not create 0 width/height paths, as they are
7544 
        // rendered inconsistently across browsers
7545 
        // Firefox 4, for example, renders a dot,
7546 
        // whereas Chrome 10 renders nothing
7547 
        this.canvas.renderAll();
7548 
        return;
7549 
      }
7550 
 
7551 
      var path = this.createPath(pathData);
7552 
 
7553 
      this.canvas.add(path);
7554 
      path.setCoords();
7555 
 
7556 
      this.canvas.clearContext(this.canvas.contextTop);
7557 
      this._resetShadow();
7558 
      this.canvas.renderAll();
7559 
 
7560 
      // fire event 'path' created
7561 
      this.canvas.fire('path:created', { path: path });
7562 
    }
7563 
  });
7564 
})();
7565 
 
7566 
 
7567 
/**
7568 
 * CircleBrush class
7569 
 * @class fabric.CircleBrush
7570 
 */
7571 
fabric.CircleBrush = fabric.util.createClass(fabric.BaseBrush, /** @lends fabric.CircleBrush.prototype */ {
7572 
 
7573 
  /**
7574 
   * Width of a brush
7575 
   * @type Number
7576 
   * @default
7577 
   */
7578 
  width: 10,
7579 
 
7580 
  /**
7581 
   * Constructor
7582 
   * @param {fabric.Canvas} canvas
7583 
   * @return {fabric.CircleBrush} Instance of a circle brush
7584 
   */
7585 
  initialize: function(canvas) {
7586 
    this.canvas = canvas;
7587 
    this.points = [ ];
7588 
  },
7589 
  /**
7590 
  * Invoked inside on mouse down and mouse move
7591 
  * @param {Object} pointer
7592 
  */
7593 
  drawDot: function(pointer) {
7594 
    var point = this.addPoint(pointer),
7595 
        ctx = this.canvas.contextTop,
7596 
        v = this.canvas.viewportTransform;
7597 
    ctx.save();
7598 
    ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]);
7599 
 
7600 
    ctx.fillStyle = point.fill;
7601 
    ctx.beginPath();
7602 
    ctx.arc(point.x, point.y, point.radius, 0, Math.PI * 2, false);
7603 
    ctx.closePath();
7604 
    ctx.fill();
7605 
 
7606 
    ctx.restore();
7607 
  },
7608 
 
7609 
  /**
7610 
   * Invoked on mouse down
7611 
   */
7612 
  onMouseDown: function(pointer) {
7613 
    this.points.length = 0;
7614 
    this.canvas.clearContext(this.canvas.contextTop);
7615 
    this._setShadow();
7616 
    this.drawDot(pointer);
7617 
  },
7618 
 
7619 
  /**
7620 
   * Invoked on mouse move
7621 
   * @param {Object} pointer
7622 
   */
7623 
  onMouseMove: function(pointer) {
7624 
    this.drawDot(pointer);
7625 
  },
7626 
 
7627 
  /**
7628 
   * Invoked on mouse up
7629 
   */
7630 
  onMouseUp: function() {
7631 
    var originalRenderOnAddRemove = this.canvas.renderOnAddRemove;
7632 
    this.canvas.renderOnAddRemove = false;
7633 
 
7634 
    var circles = [ ];
7635 
 
7636 
    for (var i = 0, len = this.points.length; i < len; i++) {
7637 
      var point = this.points[i],
7638 
          circle = new fabric.Circle({
7639 
            radius: point.radius,
7640 
            left: point.x,
7641 
            top: point.y,
7642 
            originX: 'center',
7643 
            originY: 'center',
7644 
            fill: point.fill
7645 
          });
7646 
 
7647 
      this.shadow && circle.setShadow(this.shadow);
7648 
 
7649 
      circles.push(circle);
7650 
    }
7651 
    var group = new fabric.Group(circles, { originX: 'center', originY: 'center' });
7652 
    group.canvas = this.canvas;
7653 
 
7654 
    this.canvas.add(group);
7655 
    this.canvas.fire('path:created', { path: group });
7656 
 
7657 
    this.canvas.clearContext(this.canvas.contextTop);
7658 
    this._resetShadow();
7659 
    this.canvas.renderOnAddRemove = originalRenderOnAddRemove;
7660 
    this.canvas.renderAll();
7661 
  },
7662 
 
7663 
  /**
7664 
   * @param {Object} pointer
7665 
   * @return {fabric.Point} Just added pointer point
7666 
   */
7667 
  addPoint: function(pointer) {
7668 
    var pointerPoint = new fabric.Point(pointer.x, pointer.y),
7669 
 
7670 
        circleRadius = fabric.util.getRandomInt(
7671 
                        Math.max(0, this.width - 20), this.width + 20) / 2,
7672 
 
7673 
        circleColor = new fabric.Color(this.color)
7674 
                        .setAlpha(fabric.util.getRandomInt(0, 100) / 100)
7675 
                        .toRgba();
7676 
 
7677 
    pointerPoint.radius = circleRadius;
7678 
    pointerPoint.fill = circleColor;
7679 
 
7680 
    this.points.push(pointerPoint);
7681 
 
7682 
    return pointerPoint;
7683 
  }
7684 
});
7685 
 
7686 
 
7687 
/**
7688 
 * SprayBrush class
7689 
 * @class fabric.SprayBrush
7690 
 */
7691 
fabric.SprayBrush = fabric.util.createClass( fabric.BaseBrush, /** @lends fabric.SprayBrush.prototype */ {
7692 
 
7693 
  /**
7694 
   * Width of a spray
7695 
   * @type Number
7696 
   * @default
7697 
   */
7698 
  width:              10,
7699 
 
7700 
  /**
7701 
   * Density of a spray (number of dots per chunk)
7702 
   * @type Number
7703 
   * @default
7704 
   */
7705 
  density:            20,
7706 
 
7707 
  /**
7708 
   * Width of spray dots
7709 
   * @type Number
7710 
   * @default
7711 
   */
7712 
  dotWidth:           1,
7713 
 
7714 
  /**
7715 
   * Width variance of spray dots
7716 
   * @type Number
7717 
   * @default
7718 
   */
7719 
  dotWidthVariance:   1,
7720 
 
7721 
  /**
7722 
   * Whether opacity of a dot should be random
7723 
   * @type Boolean
7724 
   * @default
7725 
   */
7726 
  randomOpacity:        false,
7727 
 
7728 
  /**
7729 
   * Whether overlapping dots (rectangles) should be removed (for performance reasons)
7730 
   * @type Boolean
7731 
   * @default
7732 
   */
7733 
  optimizeOverlapping:  true,
7734 
 
7735 
  /**
7736 
   * Constructor
7737 
   * @param {fabric.Canvas} canvas
7738 
   * @return {fabric.SprayBrush} Instance of a spray brush
7739 
   */
7740 
  initialize: function(canvas) {
7741 
    this.canvas = canvas;
7742 
    this.sprayChunks = [ ];
7743 
  },
7744 
 
7745 
  /**
7746 
   * Invoked on mouse down
7747 
   * @param {Object} pointer
7748 
   */
7749 
  onMouseDown: function(pointer) {
7750 
    this.sprayChunks.length = 0;
7751 
    this.canvas.clearContext(this.canvas.contextTop);
7752 
    this._setShadow();
7753 
 
7754 
    this.addSprayChunk(pointer);
7755 
    this.render();
7756 
  },
7757 
 
7758 
  /**
7759 
   * Invoked on mouse move
7760 
   * @param {Object} pointer
7761 
   */
7762 
  onMouseMove: function(pointer) {
7763 
    this.addSprayChunk(pointer);
7764 
    this.render();
7765 
  },
7766 
 
7767 
  /**
7768 
   * Invoked on mouse up
7769 
   */
7770 
  onMouseUp: function() {
7771 
    var originalRenderOnAddRemove = this.canvas.renderOnAddRemove;
7772 
    this.canvas.renderOnAddRemove = false;
7773 
 
7774 
    var rects = [ ];
7775 
 
7776 
    for (var i = 0, ilen = this.sprayChunks.length; i < ilen; i++) {
7777 
      var sprayChunk = this.sprayChunks[i];
7778 
 
7779 
      for (var j = 0, jlen = sprayChunk.length; j < jlen; j++) {
7780 
 
7781 
        var rect = new fabric.Rect({
7782 
          width: sprayChunk[j].width,
7783 
          height: sprayChunk[j].width,
7784 
          left: sprayChunk[j].x + 1,
7785 
          top: sprayChunk[j].y + 1,
7786 
          originX: 'center',
7787 
          originY: 'center',
7788 
          fill: this.color
7789 
        });
7790 
 
7791 
        this.shadow && rect.setShadow(this.shadow);
7792 
        rects.push(rect);
7793 
      }
7794 
    }
7795 
 
7796 
    if (this.optimizeOverlapping) {
7797 
      rects = this._getOptimizedRects(rects);
7798 
    }
7799 
 
7800 
    var group = new fabric.Group(rects, { originX: 'center', originY: 'center' });
7801 
    group.canvas = this.canvas;
7802 
 
7803 
    this.canvas.add(group);
7804 
    this.canvas.fire('path:created', { path: group });
7805 
 
7806 
    this.canvas.clearContext(this.canvas.contextTop);
7807 
    this._resetShadow();
7808 
    this.canvas.renderOnAddRemove = originalRenderOnAddRemove;
7809 
    this.canvas.renderAll();
7810 
  },
7811 
 
7812 
  /**
7813 
   * @private
7814 
   * @param {Array} rects
7815 
   */
7816 
  _getOptimizedRects: function(rects) {
7817 
 
7818 
    // avoid creating duplicate rects at the same coordinates
7819 
    var uniqueRects = { }, key;
7820 
 
7821 
    for (var i = 0, len = rects.length; i < len; i++) {
7822 
      key = rects[i].left + '' + rects[i].top;
7823 
      if (!uniqueRects[key]) {
7824 
        uniqueRects[key] = rects[i];
7825 
      }
7826 
    }
7827 
    var uniqueRectsArray = [ ];
7828 
    for (key in uniqueRects) {
7829 
      uniqueRectsArray.push(uniqueRects[key]);
7830 
    }
7831 
 
7832 
    return uniqueRectsArray;
7833 
  },
7834 
 
7835 
  /**
7836 
   * Renders brush
7837 
   */
7838 
  render: function() {
7839 
    var ctx = this.canvas.contextTop;
7840 
    ctx.fillStyle = this.color;
7841 
 
7842 
    var v = this.canvas.viewportTransform;
7843 
    ctx.save();
7844 
    ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]);
7845 
 
7846 
    for (var i = 0, len = this.sprayChunkPoints.length; i < len; i++) {
7847 
      var point = this.sprayChunkPoints[i];
7848 
      if (typeof point.opacity !== 'undefined') {
7849 
        ctx.globalAlpha = point.opacity;
7850 
      }
7851 
      ctx.fillRect(point.x, point.y, point.width, point.width);
7852 
    }
7853 
    ctx.restore();
7854 
  },
7855 
 
7856 
  /**
7857 
   * @param {Object} pointer
7858 
   */
7859 
  addSprayChunk: function(pointer) {
7860 
    this.sprayChunkPoints = [ ];
7861 
 
7862 
    var x, y, width, radius = this.width / 2;
7863 
 
7864 
    for (var i = 0; i < this.density; i++) {
7865 
 
7866 
      x = fabric.util.getRandomInt(pointer.x - radius, pointer.x + radius);
7867 
      y = fabric.util.getRandomInt(pointer.y - radius, pointer.y + radius);
7868 
 
7869 
      if (this.dotWidthVariance) {
7870 
        width = fabric.util.getRandomInt(
7871 
          // bottom clamp width to 1
7872 
          Math.max(1, this.dotWidth - this.dotWidthVariance),
7873 
          this.dotWidth + this.dotWidthVariance);
7874 
      }
7875 
      else {
7876 
        width = this.dotWidth;
7877 
      }
7878 
 
7879 
      var point = new fabric.Point(x, y);
7880 
      point.width = width;
7881 
 
7882 
      if (this.randomOpacity) {
7883 
        point.opacity = fabric.util.getRandomInt(0, 100) / 100;
7884 
      }
7885 
 
7886 
      this.sprayChunkPoints.push(point);
7887 
    }
7888 
 
7889 
    this.sprayChunks.push(this.sprayChunkPoints);
7890 
  }
7891 
});
7892 
 
7893 
 
7894 
/**
7895 
 * PatternBrush class
7896 
 * @class fabric.PatternBrush
7897 
 * @extends fabric.BaseBrush
7898 
 */
7899 
fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fabric.PatternBrush.prototype */ {
7900 
 
7901 
  getPatternSrc: function() {
7902 
 
7903 
    var dotWidth = 20,
7904 
        dotDistance = 5,
7905 
        patternCanvas = fabric.document.createElement('canvas'),
7906 
        patternCtx = patternCanvas.getContext('2d');
7907 
 
7908 
    patternCanvas.width = patternCanvas.height = dotWidth + dotDistance;
7909 
 
7910 
    patternCtx.fillStyle = this.color;
7911 
    patternCtx.beginPath();
7912 
    patternCtx.arc(dotWidth / 2, dotWidth / 2, dotWidth / 2, 0, Math.PI * 2, false);
7913 
    patternCtx.closePath();
7914 
    patternCtx.fill();
7915 
 
7916 
    return patternCanvas;
7917 
  },
7918 
 
7919 
  getPatternSrcFunction: function() {
7920 
    return String(this.getPatternSrc).replace('this.color', '"' + this.color + '"');
7921 
  },
7922 
 
7923 
  /**
7924 
   * Creates "pattern" instance property
7925 
   */
7926 
  getPattern: function() {
7927 
    return this.canvas.contextTop.createPattern(this.source || this.getPatternSrc(), 'repeat');
7928 
  },
7929 
 
7930 
  /**
7931 
   * Sets brush styles
7932 
   */
7933 
  _setBrushStyles: function() {
7934 
    this.callSuper('_setBrushStyles');
7935 
    this.canvas.contextTop.strokeStyle = this.getPattern();
7936 
  },
7937 
 
7938 
  /**
7939 
   * Creates path
7940 
   */
7941 
  createPath: function(pathData) {
7942 
    var path = this.callSuper('createPath', pathData);
7943 
    path.stroke = new fabric.Pattern({
7944 
      source: this.source || this.getPatternSrcFunction()
7945 
    });
7946 
    return path;
7947 
  }
7948 
});
7949 
 
7950 
 
7951 
(function() {
7952 
 
7953 
  var getPointer = fabric.util.getPointer,
7954 
      degreesToRadians = fabric.util.degreesToRadians,
7955 
      radiansToDegrees = fabric.util.radiansToDegrees,
7956 
      atan2 = Math.atan2,
7957 
      abs = Math.abs,
7958 
 
7959 
      STROKE_OFFSET = 0.5;
7960 
 
7961 
  /**
7962 
   * Canvas class
7963 
   * @class fabric.Canvas
7964 
   * @extends fabric.StaticCanvas
7965 
   * @tutorial {@link http://fabricjs.com/fabric-intro-part-1/#canvas}
7966 
   * @see {@link fabric.Canvas#initialize} for constructor definition
7967 
   *
7968 
   * @fires object:modified
7969 
   * @fires object:rotating
7970 
   * @fires object:scaling
7971 
   * @fires object:moving
7972 
   * @fires object:selected
7973 
   *
7974 
   * @fires before:selection:cleared
7975 
   * @fires selection:cleared
7976 
   * @fires selection:created
7977 
   *
7978 
   * @fires path:created
7979 
   * @fires mouse:down
7980 
   * @fires mouse:move
7981 
   * @fires mouse:up
7982 
   * @fires mouse:over
7983 
   * @fires mouse:out
7984 
   *
7985 
   */
7986 
  fabric.Canvas = fabric.util.createClass(fabric.StaticCanvas, /** @lends fabric.Canvas.prototype */ {
7987 
 
7988 
    /**
7989 
     * Constructor
7990 
     * @param {HTMLElement | String} el &lt;canvas> element to initialize instance on
7991 
     * @param {Object} [options] Options object
7992 
     * @return {Object} thisArg
7993 
     */
7994 
    initialize: function(el, options) {
7995 
      options || (options = { });
7996 
 
7997 
      this._initStatic(el, options);
7998 
      this._initInteractive();
7999 
      this._createCacheCanvas();
8000 
 
8001 
      fabric.Canvas.activeInstance = this;
8002 
    },
8003 
 
8004 
    /**
8005 
     * When true, objects can be transformed by one side (unproportionally)
8006 
     * @type Boolean
8007 
     * @default
8008 
     */
8009 
    uniScaleTransform:      false,
8010 
 
8011 
    /**
8012 
     * When true, objects use center point as the origin of scale transformation.
8013 
     * <b>Backwards incompatibility note:</b> This property replaces "centerTransform" (Boolean).
8014 
     * @since 1.3.4
8015 
     * @type Boolean
8016 
     * @default
8017 
     */
8018 
    centeredScaling:        false,
8019 
 
8020 
    /**
8021 
     * When true, objects use center point as the origin of rotate transformation.
8022 
     * <b>Backwards incompatibility note:</b> This property replaces "centerTransform" (Boolean).
8023 
     * @since 1.3.4
8024 
     * @type Boolean
8025 
     * @default
8026 
     */
8027 
    centeredRotation:       false,
8028 
 
8029 
    /**
8030 
     * Indicates that canvas is interactive. This property should not be changed.
8031 
     * @type Boolean
8032 
     * @default
8033 
     */
8034 
    interactive:            true,
8035 
 
8036 
    /**
8037 
     * Indicates whether group selection should be enabled
8038 
     * @type Boolean
8039 
     * @default
8040 
     */
8041 
    selection:              true,
8042 
 
8043 
    /**
8044 
     * Color of selection
8045 
     * @type String
8046 
     * @default
8047 
     */
8048 
    selectionColor:         'rgba(100, 100, 255, 0.3)', // blue
8049 
 
8050 
    /**
8051 
     * Default dash array pattern
8052 
     * If not empty the selection border is dashed
8053 
     * @type Array
8054 
     */
8055 
    selectionDashArray:     [ ],
8056 
 
8057 
    /**
8058 
     * Color of the border of selection (usually slightly darker than color of selection itself)
8059 
     * @type String
8060 
     * @default
8061 
     */
8062 
    selectionBorderColor:   'rgba(255, 255, 255, 0.3)',
8063 
 
8064 
    /**
8065 
     * Width of a line used in object/group selection
8066 
     * @type Number
8067 
     * @default
8068 
     */
8069 
    selectionLineWidth:     1,
8070 
 
8071 
    /**
8072 
     * Default cursor value used when hovering over an object on canvas
8073 
     * @type String
8074 
     * @default
8075 
     */
8076 
    hoverCursor:            'move',
8077 
 
8078 
    /**
8079 
     * Default cursor value used when moving an object on canvas
8080 
     * @type String
8081 
     * @default
8082 
     */
8083 
    moveCursor:             'move',
8084 
 
8085 
    /**
8086 
     * Default cursor value used for the entire canvas
8087 
     * @type String
8088 
     * @default
8089 
     */
8090 
    defaultCursor:          'default',
8091 
 
8092 
    /**
8093 
     * Cursor value used during free drawing
8094 
     * @type String
8095 
     * @default
8096 
     */
8097 
    freeDrawingCursor:      'crosshair',
8098 
 
8099 
    /**
8100 
     * Cursor value used for rotation point
8101 
     * @type String
8102 
     * @default
8103 
     */
8104 
    rotationCursor:         'crosshair',
8105 
 
8106 
    /**
8107 
     * Default element class that's given to wrapper (div) element of canvas
8108 
     * @type String
8109 
     * @default
8110 
     */
8111 
    containerClass:         'canvas-container',
8112 
 
8113 
    /**
8114 
     * When true, object detection happens on per-pixel basis rather than on per-bounding-box
8115 
     * @type Boolean
8116 
     * @default
8117 
     */
8118 
    perPixelTargetFind:     false,
8119 
 
8120 
    /**
8121 
     * Number of pixels around target pixel to tolerate (consider active) during object detection
8122 
     * @type Number
8123 
     * @default
8124 
     */
8125 
    targetFindTolerance:    0,
8126 
 
8127 
    /**
8128 
     * When true, target detection is skipped when hovering over canvas. This can be used to improve performance.
8129 
     * @type Boolean
8130 
     * @default
8131 
     */
8132 
    skipTargetFind:         false,
8133 
 
8134 
    /**
8135 
     * @private
8136 
     */
8137 
    _initInteractive: function() {
8138 
      this._currentTransform = null;
8139 
      this._groupSelector = null;
8140 
      this._initWrapperElement();
8141 
      this._createUpperCanvas();
8142 
      this._initEventListeners();
8143 
 
8144 
      this.freeDrawingBrush = fabric.PencilBrush && new fabric.PencilBrush(this);
8145 
 
8146 
      this.calcOffset();
8147 
    },
8148 
 
8149 
    /**
8150 
     * Resets the current transform to its original values and chooses the type of resizing based on the event
8151 
     * @private
8152 
     * @param {Event} e Event object fired on mousemove
8153 
     */
8154 
    _resetCurrentTransform: function(e) {
8155 
      var t = this._currentTransform;
8156 
 
8157 
      t.target.set({
8158 
        scaleX: t.original.scaleX,
8159 
        scaleY: t.original.scaleY,
8160 
        left: t.original.left,
8161 
        top: t.original.top
8162 
      });
8163 
 
8164 
      if (this._shouldCenterTransform(e, t.target)) {
8165 
        if (t.action === 'rotate') {
8166 
          this._setOriginToCenter(t.target);
8167 
        }
8168 
        else {
8169 
          if (t.originX !== 'center') {
8170 
            if (t.originX === 'right') {
8171 
              t.mouseXSign = -1;
8172 
            }
8173 
            else {
8174 
              t.mouseXSign = 1;
8175 
            }
8176 
          }
8177 
          if (t.originY !== 'center') {
8178 
            if (t.originY === 'bottom') {
8179 
              t.mouseYSign = -1;
8180 
            }
8181 
            else {
8182 
              t.mouseYSign = 1;
8183 
            }
8184 
          }
8185 
 
8186 
          t.originX = 'center';
8187 
          t.originY = 'center';
8188 
        }
8189 
      }
8190 
      else {
8191 
        t.originX = t.original.originX;
8192 
        t.originY = t.original.originY;
8193 
      }
8194 
    },
8195 
 
8196 
    /**
8197 
     * Checks if point is contained within an area of given object
8198 
     * @param {Event} e Event object
8199 
     * @param {fabric.Object} target Object to test against
8200 
     * @return {Boolean} true if point is contained within an area of given object
8201 
     */
8202 
    containsPoint: function (e, target) {
8203 
      var pointer = this.getPointer(e, true),
8204 
          xy = this._normalizePointer(target, pointer);
8205 
 
8206 
      // http://www.geog.ubc.ca/courses/klink/gis.notes/ncgia/u32.html
8207 
      // http://idav.ucdavis.edu/~okreylos/TAship/Spring2000/PointInPolygon.html
8208 
      return (target.containsPoint(xy) || target._findTargetCorner(pointer));
8209 
    },
8210 
 
8211 
    /**
8212 
     * @private
8213 
     */
8214 
    _normalizePointer: function (object, pointer) {
8215 
      var activeGroup = this.getActiveGroup(),
8216 
          x = pointer.x,
8217 
          y = pointer.y,
8218 
          isObjectInGroup = (
8219 
            activeGroup &&
8220 
            object.type !== 'group' &&
8221 
            activeGroup.contains(object)),
8222 
          lt;
8223 
 
8224 
      if (isObjectInGroup) {
8225 
        lt = new fabric.Point(activeGroup.left, activeGroup.top);
8226 
        lt = fabric.util.transformPoint(lt, this.viewportTransform, true);
8227 
        x -= lt.x;
8228 
        y -= lt.y;
8229 
      }
8230 
      return { x: x, y: y };
8231 
    },
8232 
 
8233 
    /**
8234 
     * Returns true if object is transparent at a certain location
8235 
     * @param {fabric.Object} target Object to check
8236 
     * @param {Number} x Left coordinate
8237 
     * @param {Number} y Top coordinate
8238 
     * @return {Boolean}
8239 
     */
8240 
    isTargetTransparent: function (target, x, y) {
8241 
      var hasBorders = target.hasBorders,
8242 
          transparentCorners = target.transparentCorners;
8243 
 
8244 
      target.hasBorders = target.transparentCorners = false;
8245 
 
8246 
      this._draw(this.contextCache, target);
8247 
 
8248 
      target.hasBorders = hasBorders;
8249 
      target.transparentCorners = transparentCorners;
8250 
 
8251 
      var isTransparent = fabric.util.isTransparent(
8252 
        this.contextCache, x, y, this.targetFindTolerance);
8253 
 
8254 
      this.clearContext(this.contextCache);
8255 
 
8256 
      return isTransparent;
8257 
    },
8258 
 
8259 
    /**
8260 
     * @private
8261 
     * @param {Event} e Event object
8262 
     * @param {fabric.Object} target
8263 
     */
8264 
    _shouldClearSelection: function (e, target) {
8265 
      var activeGroup = this.getActiveGroup(),
8266 
          activeObject = this.getActiveObject();
8267 
 
8268 
      return (
8269 
        !target
8270 
        ||
8271 
        (target &&
8272 
          activeGroup &&
8273 
          !activeGroup.contains(target) &&
8274 
          activeGroup !== target &&
8275 
          !e.shiftKey)
8276 
        ||
8277 
        (target && !target.evented)
8278 
        ||
8279 
        (target &&
8280 
          !target.selectable &&
8281 
          activeObject &&
8282 
          activeObject !== target)
8283 
      );
8284 
    },
8285 
 
8286 
    /**
8287 
     * @private
8288 
     * @param {Event} e Event object
8289 
     * @param {fabric.Object} target
8290 
     */
8291 
    _shouldCenterTransform: function (e, target) {
8292 
      if (!target) {
8293 
        return;
8294 
      }
8295 
 
8296 
      var t = this._currentTransform,
8297 
          centerTransform;
8298 
 
8299 
      if (t.action === 'scale' || t.action === 'scaleX' || t.action === 'scaleY') {
8300 
        centerTransform = this.centeredScaling || target.centeredScaling;
8301 
      }
8302 
      else if (t.action === 'rotate') {
8303 
        centerTransform = this.centeredRotation || target.centeredRotation;
8304 
      }
8305 
 
8306 
      return centerTransform ? !e.altKey : e.altKey;
8307 
    },
8308 
 
8309 
    /**
8310 
     * @private
8311 
     */
8312 
    _getOriginFromCorner: function(target, corner) {
8313 
      var origin = {
8314 
        x: target.originX,
8315 
        y: target.originY
8316 
      };
8317 
 
8318 
      if (corner === 'ml' || corner === 'tl' || corner === 'bl') {
8319 
        origin.x = 'right';
8320 
      }
8321 
      else if (corner === 'mr' || corner === 'tr' || corner === 'br') {
8322 
        origin.x = 'left';
8323 
      }
8324 
 
8325 
      if (corner === 'tl' || corner === 'mt' || corner === 'tr') {
8326 
        origin.y = 'bottom';
8327 
      }
8328 
      else if (corner === 'bl' || corner === 'mb' || corner === 'br') {
8329 
        origin.y = 'top';
8330 
      }
8331 
 
8332 
      return origin;
8333 
    },
8334 
 
8335 
    /**
8336 
     * @private
8337 
     */
8338 
    _getActionFromCorner: function(target, corner) {
8339 
      var action = 'drag';
8340 
      if (corner) {
8341 
        action = (corner === 'ml' || corner === 'mr')
8342 
          ? 'scaleX'
8343 
          : (corner === 'mt' || corner === 'mb')
8344 
            ? 'scaleY'
8345 
            : corner === 'mtr'
8346 
              ? 'rotate'
8347 
              : 'scale';
8348 
      }
8349 
      return action;
8350 
    },
8351 
 
8352 
    /**
8353 
     * @private
8354 
     * @param {Event} e Event object
8355 
     * @param {fabric.Object} target
8356 
     */
8357 
    _setupCurrentTransform: function (e, target) {
8358 
      if (!target) {
8359 
        return;
8360 
      }
8361 
 
8362 
      var pointer = this.getPointer(e),
8363 
          corner = target._findTargetCorner(this.getPointer(e, true)),
8364 
          action = this._getActionFromCorner(target, corner),
8365 
          origin = this._getOriginFromCorner(target, corner);
8366 
 
8367 
      this._currentTransform = {
8368 
        target: target,
8369 
        action: action,
8370 
        scaleX: target.scaleX,
8371 
        scaleY: target.scaleY,
8372 
        offsetX: pointer.x - target.left,
8373 
        offsetY: pointer.y - target.top,
8374 
        originX: origin.x,
8375 
        originY: origin.y,
8376 
        ex: pointer.x,
8377 
        ey: pointer.y,
8378 
        left: target.left,
8379 
        top: target.top,
8380 
        theta: degreesToRadians(target.angle),
8381 
        width: target.width * target.scaleX,
8382 
        mouseXSign: 1,
8383 
        mouseYSign: 1
8384 
      };
8385 
 
8386 
      this._currentTransform.original = {
8387 
        left: target.left,
8388 
        top: target.top,
8389 
        scaleX: target.scaleX,
8390 
        scaleY: target.scaleY,
8391 
        originX: origin.x,
8392 
        originY: origin.y
8393 
      };
8394 
 
8395 
      this._resetCurrentTransform(e);
8396 
    },
8397 
 
8398 
    /**
8399 
     * Translates object by "setting" its left/top
8400 
     * @private
8401 
     * @param {Number} x pointer's x coordinate
8402 
     * @param {Number} y pointer's y coordinate
8403 
     */
8404 
    _translateObject: function (x, y) {
8405 
      var target = this._currentTransform.target;
8406 
 
8407 
      if (!target.get('lockMovementX')) {
8408 
        target.set('left', x - this._currentTransform.offsetX);
8409 
      }
8410 
      if (!target.get('lockMovementY')) {
8411 
        target.set('top', y - this._currentTransform.offsetY);
8412 
      }
8413 
    },
8414 
 
8415 
    /**
8416 
     * Scales object by invoking its scaleX/scaleY methods
8417 
     * @private
8418 
     * @param {Number} x pointer's x coordinate
8419 
     * @param {Number} y pointer's y coordinate
8420 
     * @param {String} by Either 'x' or 'y' - specifies dimension constraint by which to scale an object.
8421 
     *                    When not provided, an object is scaled by both dimensions equally
8422 
     */
8423 
    _scaleObject: function (x, y, by) {
8424 
      var t = this._currentTransform,
8425 
          target = t.target,
8426 
          lockScalingX = target.get('lockScalingX'),
8427 
          lockScalingY = target.get('lockScalingY'),
8428 
          lockScalingFlip = target.get('lockScalingFlip');
8429 
 
8430 
      if (lockScalingX && lockScalingY) {
8431 
        return;
8432 
      }
8433 
 
8434 
      // Get the constraint point
8435 
      var constraintPosition = target.translateToOriginPoint(target.getCenterPoint(), t.originX, t.originY),
8436 
          localMouse = target.toLocalPoint(new fabric.Point(x, y), t.originX, t.originY);
8437 
 
8438 
      this._setLocalMouse(localMouse, t);
8439 
 
8440 
      // Actually scale the object
8441 
      this._setObjectScale(localMouse, t, lockScalingX, lockScalingY, by, lockScalingFlip);
8442 
 
8443 
      // Make sure the constraints apply
8444 
      target.setPositionByOrigin(constraintPosition, t.originX, t.originY);
8445 
    },
8446 
 
8447 
    /**
8448 
     * @private
8449 
     */
8450 
    _setObjectScale: function(localMouse, transform, lockScalingX, lockScalingY, by, lockScalingFlip) {
8451 
      var target = transform.target, forbidScalingX = false, forbidScalingY = false,
8452 
          strokeWidth = target.stroke ? target.strokeWidth : 0;
8453 
 
8454 
      transform.newScaleX = localMouse.x / (target.width + strokeWidth / 2);
8455 
      transform.newScaleY = localMouse.y / (target.height + strokeWidth / 2);
8456 
 
8457 
      if (lockScalingFlip && transform.newScaleX <= 0 && transform.newScaleX < target.scaleX) {
8458 
        forbidScalingX = true;
8459 
      }
8460 
 
8461 
      if (lockScalingFlip && transform.newScaleY <= 0 && transform.newScaleY < target.scaleY) {
8462 
        forbidScalingY = true;
8463 
      }
8464 
 
8465 
      if (by === 'equally' && !lockScalingX && !lockScalingY) {
8466 
        forbidScalingX || forbidScalingY || this._scaleObjectEqually(localMouse, target, transform);
8467 
      }
8468 
      else if (!by) {
8469 
        forbidScalingX || lockScalingX || target.set('scaleX', transform.newScaleX);
8470 
        forbidScalingY || lockScalingY || target.set('scaleY', transform.newScaleY);
8471 
      }
8472 
      else if (by === 'x' && !target.get('lockUniScaling')) {
8473 
        forbidScalingX || lockScalingX || target.set('scaleX', transform.newScaleX);
8474 
      }
8475 
      else if (by === 'y' && !target.get('lockUniScaling')) {
8476 
        forbidScalingY || lockScalingY || target.set('scaleY', transform.newScaleY);
8477 
      }
8478 
 
8479 
      forbidScalingX || forbidScalingY || this._flipObject(transform, by);
8480 
 
8481 
    },
8482 
 
8483 
    /**
8484 
     * @private
8485 
     */
8486 
    _scaleObjectEqually: function(localMouse, target, transform) {
8487 
 
8488 
      var dist = localMouse.y + localMouse.x,
8489 
          strokeWidth = target.stroke ? target.strokeWidth : 0,
8490 
          lastDist = (target.height + (strokeWidth / 2)) * transform.original.scaleY +
8491 
                     (target.width + (strokeWidth / 2)) * transform.original.scaleX;
8492 
 
8493 
      // We use transform.scaleX/Y instead of target.scaleX/Y
8494 
      // because the object may have a min scale and we'll loose the proportions
8495 
      transform.newScaleX = transform.original.scaleX * dist / lastDist;
8496 
      transform.newScaleY = transform.original.scaleY * dist / lastDist;
8497 
 
8498 
      target.set('scaleX', transform.newScaleX);
8499 
      target.set('scaleY', transform.newScaleY);
8500 
    },
8501 
 
8502 
    /**
8503 
     * @private
8504 
     */
8505 
    _flipObject: function(transform, by) {
8506 
      if (transform.newScaleX < 0 && by !== 'y') {
8507 
        if (transform.originX === 'left') {
8508 
          transform.originX = 'right';
8509 
        }
8510 
        else if (transform.originX === 'right') {
8511 
          transform.originX = 'left';
8512 
        }
8513 
      }
8514 
 
8515 
      if (transform.newScaleY < 0 && by !== 'x') {
8516 
        if (transform.originY === 'top') {
8517 
          transform.originY = 'bottom';
8518 
        }
8519 
        else if (transform.originY === 'bottom') {
8520 
          transform.originY = 'top';
8521 
        }
8522 
      }
8523 
    },
8524 
 
8525 
    /**
8526 
     * @private
8527 
     */
8528 
    _setLocalMouse: function(localMouse, t) {
8529 
      var target = t.target;
8530 
 
8531 
      if (t.originX === 'right') {
8532 
        localMouse.x *= -1;
8533 
      }
8534 
      else if (t.originX === 'center') {
8535 
        localMouse.x *= t.mouseXSign * 2;
8536 
 
8537 
        if (localMouse.x < 0) {
8538 
          t.mouseXSign = -t.mouseXSign;
8539 
        }
8540 
      }
8541 
 
8542 
      if (t.originY === 'bottom') {
8543 
        localMouse.y *= -1;
8544 
      }
8545 
      else if (t.originY === 'center') {
8546 
        localMouse.y *= t.mouseYSign * 2;
8547 
 
8548 
        if (localMouse.y < 0) {
8549 
          t.mouseYSign = -t.mouseYSign;
8550 
        }
8551 
      }
8552 
 
8553 
      // adjust the mouse coordinates when dealing with padding
8554 
      if (abs(localMouse.x) > target.padding) {
8555 
        if (localMouse.x < 0) {
8556 
          localMouse.x += target.padding;
8557 
        }
8558 
        else {
8559 
          localMouse.x -= target.padding;
8560 
        }
8561 
      }
8562 
      else { // mouse is within the padding, set to 0
8563 
        localMouse.x = 0;
8564 
      }
8565 
 
8566 
      if (abs(localMouse.y) > target.padding) {
8567 
        if (localMouse.y < 0) {
8568 
          localMouse.y += target.padding;
8569 
        }
8570 
        else {
8571 
          localMouse.y -= target.padding;
8572 
        }
8573 
      }
8574 
      else {
8575 
        localMouse.y = 0;
8576 
      }
8577 
    },
8578 
 
8579 
    /**
8580 
     * Rotates object by invoking its rotate method
8581 
     * @private
8582 
     * @param {Number} x pointer's x coordinate
8583 
     * @param {Number} y pointer's y coordinate
8584 
     */
8585 
    _rotateObject: function (x, y) {
8586 
 
8587 
      var t = this._currentTransform;
8588 
 
8589 
      if (t.target.get('lockRotation')) {
8590 
        return;
8591 
      }
8592 
 
8593 
      var lastAngle = atan2(t.ey - t.top, t.ex - t.left),
8594 
          curAngle = atan2(y - t.top, x - t.left),
8595 
          angle = radiansToDegrees(curAngle - lastAngle + t.theta);
8596 
 
8597 
      // normalize angle to positive value
8598 
      if (angle < 0) {
8599 
        angle = 360 + angle;
8600 
      }
8601 
 
8602 
      t.target.angle = angle % 360;
8603 
    },
8604 
 
8605 
    /**
8606 
     * Set the cursor type of the canvas element
8607 
     * @param {String} value Cursor type of the canvas element.
8608 
     * @see http://www.w3.org/TR/css3-ui/#cursor
8609 
     */
8610 
    setCursor: function (value) {
8611 
      this.upperCanvasEl.style.cursor = value;
8612 
    },
8613 
 
8614 
    /**
8615 
     * @private
8616 
     */
8617 
    _resetObjectTransform: function (target) {
8618 
      target.scaleX = 1;
8619 
      target.scaleY = 1;
8620 
      target.setAngle(0);
8621 
    },
8622 
 
8623 
    /**
8624 
     * @private
8625 
     */
8626 
    _drawSelection: function () {
8627 
      var ctx = this.contextTop,
8628 
          groupSelector = this._groupSelector,
8629 
          left = groupSelector.left,
8630 
          top = groupSelector.top,
8631 
          aleft = abs(left),
8632 
          atop = abs(top);
8633 
 
8634 
      ctx.fillStyle = this.selectionColor;
8635 
 
8636 
      ctx.fillRect(
8637 
        groupSelector.ex - ((left > 0) ? 0 : -left),
8638 
        groupSelector.ey - ((top > 0) ? 0 : -top),
8639 
        aleft,
8640 
        atop
8641 
      );
8642 
 
8643 
      ctx.lineWidth = this.selectionLineWidth;
8644 
      ctx.strokeStyle = this.selectionBorderColor;
8645 
 
8646 
      // selection border
8647 
      if (this.selectionDashArray.length > 1) {
8648 
 
8649 
        var px = groupSelector.ex + STROKE_OFFSET - ((left > 0) ? 0: aleft),
8650 
            py = groupSelector.ey + STROKE_OFFSET - ((top > 0) ? 0: atop);
8651 
 
8652 
        ctx.beginPath();
8653 
 
8654 
        fabric.util.drawDashedLine(ctx, px, py, px + aleft, py, this.selectionDashArray);
8655 
        fabric.util.drawDashedLine(ctx, px, py + atop - 1, px + aleft, py + atop - 1, this.selectionDashArray);
8656 
        fabric.util.drawDashedLine(ctx, px, py, px, py + atop, this.selectionDashArray);
8657 
        fabric.util.drawDashedLine(ctx, px + aleft - 1, py, px + aleft - 1, py + atop, this.selectionDashArray);
8658 
 
8659 
        ctx.closePath();
8660 
        ctx.stroke();
8661 
      }
8662 
      else {
8663 
        ctx.strokeRect(
8664 
          groupSelector.ex + STROKE_OFFSET - ((left > 0) ? 0 : aleft),
8665 
          groupSelector.ey + STROKE_OFFSET - ((top > 0) ? 0 : atop),
8666 
          aleft,
8667 
          atop
8668 
        );
8669 
      }
8670 
    },
8671 
 
8672 
    /**
8673 
     * @private
8674 
     */
8675 
    _isLastRenderedObject: function(e) {
8676 
      return (
8677 
        this.controlsAboveOverlay &&
8678 
        this.lastRenderedObjectWithControlsAboveOverlay &&
8679 
        this.lastRenderedObjectWithControlsAboveOverlay.visible &&
8680 
        this.containsPoint(e, this.lastRenderedObjectWithControlsAboveOverlay) &&
8681 
        this.lastRenderedObjectWithControlsAboveOverlay._findTargetCorner(this.getPointer(e, true)));
8682 
    },
8683 
 
8684 
    /**
8685 
     * Method that determines what object we are clicking on
8686 
     * @param {Event} e mouse event
8687 
     * @param {Boolean} skipGroup when true, group is skipped and only objects are traversed through
8688 
     */
8689 
    findTarget: function (e, skipGroup) {
8690 
      if (this.skipTargetFind) {
8691 
        return;
8692 
      }
8693 
 
8694 
      if (this._isLastRenderedObject(e)) {
8695 
        return this.lastRenderedObjectWithControlsAboveOverlay;
8696 
      }
8697 
 
8698 
      // first check current group (if one exists)
8699 
      var activeGroup = this.getActiveGroup();
8700 
      if (activeGroup && !skipGroup && this.containsPoint(e, activeGroup)) {
8701 
        return activeGroup;
8702 
      }
8703 
 
8704 
      var target = this._searchPossibleTargets(e);
8705 
      this._fireOverOutEvents(target);
8706 
 
8707 
      return target;
8708 
    },
8709 
 
8710 
    /**
8711 
     * @private
8712 
     */
8713 
    _fireOverOutEvents: function(target) {
8714 
      if (target) {
8715 
        if (this._hoveredTarget !== target) {
8716 
          this.fire('mouse:over', { target: target });
8717 
          target.fire('mouseover');
8718 
          if (this._hoveredTarget) {
8719 
            this.fire('mouse:out', { target: this._hoveredTarget });
8720 
            this._hoveredTarget.fire('mouseout');
8721 
          }
8722 
          this._hoveredTarget = target;
8723 
        }
8724 
      }
8725 
      else if (this._hoveredTarget) {
8726 
        this.fire('mouse:out', { target: this._hoveredTarget });
8727 
        this._hoveredTarget.fire('mouseout');
8728 
        this._hoveredTarget = null;
8729 
      }
8730 
    },
8731 
 
8732 
    /**
8733 
    * @private
8734 
    */
8735 
    _checkTarget: function(e, obj, pointer) {
8736 
      if (obj &&
8737 
          obj.visible &&
8738 
          obj.evented &&
8739 
          this.containsPoint(e, obj)){
8740 
        if ((this.perPixelTargetFind || obj.perPixelTargetFind) && !obj.isEditing) {
8741 
          var isTransparent = this.isTargetTransparent(obj, pointer.x, pointer.y);
8742 
          if (!isTransparent) {
8743 
            return true;
8744 
          }
8745 
        }
8746 
        else {
8747 
          return true;
8748 
        }
8749 
      }
8750 
    },
8751 
 
8752 
    /**
8753 
     * @private
8754 
     */
8755 
    _searchPossibleTargets: function(e) {
8756 
 
8757 
      // Cache all targets where their bounding box contains point.
8758 
      var target,
8759 
          pointer = this.getPointer(e, true),
8760 
          i = this._objects.length;
8761 
      // Do not check for currently grouped objects, since we check the parent group itself.
8762 
      while (i--) {
8763 
        if (!this._objects[i].group && this._checkTarget(e, this._objects[i], pointer)){
8764 
          this.relatedTarget = this._objects[i];
8765 
          target = this._objects[i];
8766 
          break;
8767 
        }
8768 
      }
8769 
 
8770 
      return target;
8771 
    },
8772 
 
8773 
    /**
8774 
     * Returns pointer coordinates relative to canvas.
8775 
     * @param {Event} e
8776 
     * @return {Object} object with "x" and "y" number values
8777 
     */
8778 
    getPointer: function (e, ignoreZoom, upperCanvasEl) {
8779 
      if (!upperCanvasEl) {
8780 
        upperCanvasEl = this.upperCanvasEl;
8781 
      }
8782 
      var pointer = getPointer(e, upperCanvasEl),
8783 
          bounds = upperCanvasEl.getBoundingClientRect(),
8784 
          boundsWidth = bounds.width || 0,
8785 
          boundsHeight = bounds.height || 0,
8786 
          cssScale;
8787 
 
8788 
      if (!boundsWidth || !boundsHeight ) {
8789 
        if ('top' in bounds && 'bottom' in bounds) {
8790 
          boundsHeight = Math.abs( bounds.top - bounds.bottom );
8791 
        }
8792 
        if ('right' in bounds && 'left' in bounds) {
8793 
          boundsWidth = Math.abs( bounds.right - bounds.left );
8794 
        }
8795 
      }
8796 
 
8797 
      this.calcOffset();
8798 
 
8799 
      pointer.x = pointer.x - this._offset.left;
8800 
      pointer.y = pointer.y - this._offset.top;
8801 
      if (!ignoreZoom) {
8802 
        pointer = fabric.util.transformPoint(
8803 
          pointer,
8804 
          fabric.util.invertTransform(this.viewportTransform)
8805 
        );
8806 
      }
8807 
 
8808 
      if (boundsWidth === 0 || boundsHeight === 0) {
8809 
        // If bounds are not available (i.e. not visible), do not apply scale.
8810 
        cssScale = { width: 1, height: 1 };
8811 
      }
8812 
      else {
8813 
        cssScale = {
8814 
          width: upperCanvasEl.width / boundsWidth,
8815 
          height: upperCanvasEl.height / boundsHeight
8816 
        };
8817 
      }
8818 
 
8819 
      return {
8820 
        x: pointer.x * cssScale.width,
8821 
        y: pointer.y * cssScale.height
8822 
      };
8823 
    },
8824 
 
8825 
    /**
8826 
     * @private
8827 
     * @throws {CANVAS_INIT_ERROR} If canvas can not be initialized
8828 
     */
8829 
    _createUpperCanvas: function () {
8830 
      var lowerCanvasClass = this.lowerCanvasEl.className.replace(/\s*lower-canvas\s*/, '');
8831 
 
8832 
      this.upperCanvasEl = this._createCanvasElement();
8833 
      fabric.util.addClass(this.upperCanvasEl, 'upper-canvas ' + lowerCanvasClass);
8834 
 
8835 
      this.wrapperEl.appendChild(this.upperCanvasEl);
8836 
 
8837 
      this._copyCanvasStyle(this.lowerCanvasEl, this.upperCanvasEl);
8838 
      this._applyCanvasStyle(this.upperCanvasEl);
8839 
      this.contextTop = this.upperCanvasEl.getContext('2d');
8840 
    },
8841 
 
8842 
    /**
8843 
     * @private
8844 
     */
8845 
    _createCacheCanvas: function () {
8846 
      this.cacheCanvasEl = this._createCanvasElement();
8847 
      this.cacheCanvasEl.setAttribute('width', this.width);
8848 
      this.cacheCanvasEl.setAttribute('height', this.height);
8849 
      this.contextCache = this.cacheCanvasEl.getContext('2d');
8850 
    },
8851 
 
8852 
    /**
8853 
     * @private
8854 
     */
8855 
    _initWrapperElement: function () {
8856 
      this.wrapperEl = fabric.util.wrapElement(this.lowerCanvasEl, 'div', {
8857 
        'class': this.containerClass
8858 
      });
8859 
      fabric.util.setStyle(this.wrapperEl, {
8860 
        width: this.getWidth() + 'px',
8861 
        height: this.getHeight() + 'px',
8862 
        position: 'relative'
8863 
      });
8864 
      fabric.util.makeElementUnselectable(this.wrapperEl);
8865 
    },
8866 
 
8867 
    /**
8868 
     * @private
8869 
     * @param {HTMLElement} element canvas element to apply styles on
8870 
     */
8871 
    _applyCanvasStyle: function (element) {
8872 
      var width = this.getWidth() || element.width,
8873 
          height = this.getHeight() || element.height;
8874 
 
8875 
      fabric.util.setStyle(element, {
8876 
        position: 'absolute',
8877 
        width: width + 'px',
8878 
        height: height + 'px',
8879 
        left: 0,
8880 
        top: 0
8881 
      });
8882 
      element.width = width;
8883 
      element.height = height;
8884 
      fabric.util.makeElementUnselectable(element);
8885 
    },
8886 
 
8887 
    /**
8888 
     * Copys the the entire inline style from one element (fromEl) to another (toEl)
8889 
     * @private
8890 
     * @param {Element} fromEl Element style is copied from
8891 
     * @param {Element} toEl Element copied style is applied to
8892 
     */
8893 
    _copyCanvasStyle: function (fromEl, toEl) {
8894 
      toEl.style.cssText = fromEl.style.cssText;
8895 
    },
8896 
 
8897 
    /**
8898 
     * Returns context of canvas where object selection is drawn
8899 
     * @return {CanvasRenderingContext2D}
8900 
     */
8901 
    getSelectionContext: function() {
8902 
      return this.contextTop;
8903 
    },
8904 
 
8905 
    /**
8906 
     * Returns &lt;canvas> element on which object selection is drawn
8907 
     * @return {HTMLCanvasElement}
8908 
     */
8909 
    getSelectionElement: function () {
8910 
      return this.upperCanvasEl;
8911 
    },
8912 
 
8913 
    /**
8914 
     * @private
8915 
     * @param {Object} object
8916 
     */
8917 
    _setActiveObject: function(object) {
8918 
      if (this._activeObject) {
8919 
        this._activeObject.set('active', false);
8920 
      }
8921 
      this._activeObject = object;
8922 
      object.set('active', true);
8923 
    },
8924 
 
8925 
    /**
8926 
     * Sets given object as the only active object on canvas
8927 
     * @param {fabric.Object} object Object to set as an active one
8928 
     * @param {Event} [e] Event (passed along when firing "object:selected")
8929 
     * @return {fabric.Canvas} thisArg
8930 
     * @chainable
8931 
     */
8932 
    setActiveObject: function (object, e) {
8933 
      this._setActiveObject(object);
8934 
      this.renderAll();
8935 
      this.fire('object:selected', { target: object, e: e });
8936 
      object.fire('selected', { e: e });
8937 
      return this;
8938 
    },
8939 
 
8940 
    /**
8941 
     * Returns currently active object
8942 
     * @return {fabric.Object} active object
8943 
     */
8944 
    getActiveObject: function () {
8945 
      return this._activeObject;
8946 
    },
8947 
 
8948 
    /**
8949 
     * @private
8950 
     */
8951 
    _discardActiveObject: function() {
8952 
      if (this._activeObject) {
8953 
        this._activeObject.set('active', false);
8954 
      }
8955 
      this._activeObject = null;
8956 
    },
8957 
 
8958 
    /**
8959 
     * Discards currently active object
8960 
     * @return {fabric.Canvas} thisArg
8961 
     * @chainable
8962 
     */
8963 
    discardActiveObject: function (e) {
8964 
      this._discardActiveObject();
8965 
      this.renderAll();
8966 
      this.fire('selection:cleared', { e: e });
8967 
      return this;
8968 
    },
8969 
 
8970 
    /**
8971 
     * @private
8972 
     * @param {fabric.Group} group
8973 
     */
8974 
    _setActiveGroup: function(group) {
8975 
      this._activeGroup = group;
8976 
      if (group) {
8977 
        group.set('active', true);
8978 
      }
8979 
    },
8980 
 
8981 
    /**
8982 
     * Sets active group to a speicified one
8983 
     * @param {fabric.Group} group Group to set as a current one
8984 
     * @return {fabric.Canvas} thisArg
8985 
     * @chainable
8986 
     */
8987 
    setActiveGroup: function (group, e) {
8988 
      this._setActiveGroup(group);
8989 
      if (group) {
8990 
        this.fire('object:selected', { target: group, e: e });
8991 
        group.fire('selected', { e: e });
8992 
      }
8993 
      return this;
8994 
    },
8995 
 
8996 
    /**
8997 
     * Returns currently active group
8998 
     * @return {fabric.Group} Current group
8999 
     */
9000 
    getActiveGroup: function () {
9001 
      return this._activeGroup;
9002 
    },
9003 
 
9004 
    /**
9005 
     * @private
9006 
     */
9007 
    _discardActiveGroup: function() {
9008 
      var g = this.getActiveGroup();
9009 
      if (g) {
9010 
        g.destroy();
9011 
      }
9012 
      this.setActiveGroup(null);
9013 
    },
9014 
 
9015 
    /**
9016 
     * Discards currently active group
9017 
     * @return {fabric.Canvas} thisArg
9018 
     */
9019 
    discardActiveGroup: function (e) {
9020 
      this._discardActiveGroup();
9021 
      this.fire('selection:cleared', { e: e });
9022 
      return this;
9023 
    },
9024 
 
9025 
    /**
9026 
     * Deactivates all objects on canvas, removing any active group or object
9027 
     * @return {fabric.Canvas} thisArg
9028 
     */
9029 
    deactivateAll: function () {
9030 
      var allObjects = this.getObjects(),
9031 
          i = 0,
9032 
          len = allObjects.length;
9033 
      for ( ; i < len; i++) {
9034 
        allObjects[i].set('active', false);
9035 
      }
9036 
      this._discardActiveGroup();
9037 
      this._discardActiveObject();
9038 
      return this;
9039 
    },
9040 
 
9041 
    /**
9042 
     * Deactivates all objects and dispatches appropriate events
9043 
     * @return {fabric.Canvas} thisArg
9044 
     */
9045 
    deactivateAllWithDispatch: function (e) {
9046 
      var activeObject = this.getActiveGroup() || this.getActiveObject();
9047 
      if (activeObject) {
9048 
        this.fire('before:selection:cleared', { target: activeObject, e: e });
9049 
      }
9050 
      this.deactivateAll();
9051 
      if (activeObject) {
9052 
        this.fire('selection:cleared', { e: e });
9053 
      }
9054 
      return this;
9055 
    },
9056 
 
9057 
    /**
9058 
     * Draws objects' controls (borders/controls)
9059 
     * @param {CanvasRenderingContext2D} ctx Context to render controls on
9060 
     */
9061 
    drawControls: function(ctx) {
9062 
      var activeGroup = this.getActiveGroup();
9063 
      if (activeGroup) {
9064 
        this._drawGroupControls(ctx, activeGroup);
9065 
      }
9066 
      else {
9067 
        this._drawObjectsControls(ctx);
9068 
      }
9069 
    },
9070 
 
9071 
    /**
9072 
     * @private
9073 
     */
9074 
    _drawGroupControls: function(ctx, activeGroup) {
9075 
      activeGroup._renderControls(ctx);
9076 
    },
9077 
 
9078 
    /**
9079 
     * @private
9080 
     */
9081 
    _drawObjectsControls: function(ctx) {
9082 
      for (var i = 0, len = this._objects.length; i < len; ++i) {
9083 
        if (!this._objects[i] || !this._objects[i].active) {
9084 
          continue;
9085 
        }
9086 
        this._objects[i]._renderControls(ctx);
9087 
        this.lastRenderedObjectWithControlsAboveOverlay = this._objects[i];
9088 
      }
9089 
    }
9090 
  });
9091 
 
9092 
  // copying static properties manually to work around Opera's bug,
9093 
  // where "prototype" property is enumerable and overrides existing prototype
9094 
  for (var prop in fabric.StaticCanvas) {
9095 
    if (prop !== 'prototype') {
9096 
      fabric.Canvas[prop] = fabric.StaticCanvas[prop];
9097 
    }
9098 
  }
9099 
 
9100 
  if (fabric.isTouchSupported) {
9101 
    /** @ignore */
9102 
    fabric.Canvas.prototype._setCursorFromEvent = function() { };
9103 
  }
9104 
 
9105 
  /**
9106 
   * @class fabric.Element
9107 
   * @alias fabric.Canvas
9108 
   * @deprecated Use {@link fabric.Canvas} instead.
9109 
   * @constructor
9110 
   */
9111 
  fabric.Element = fabric.Canvas;
9112 
})();
9113 
 
9114 
 
9115 
(function() {
9116 
 
9117 
  var cursorOffset = {
9118 
    mt: 0, // n
9119 
    tr: 1, // ne
9120 
    mr: 2, // e
9121 
    br: 3, // se
9122 
    mb: 4, // s
9123 
    bl: 5, // sw
9124 
    ml: 6, // w
9125 
    tl: 7 // nw
9126 
  },
9127 
  addListener = fabric.util.addListener,
9128 
  removeListener = fabric.util.removeListener;
9129 
 
9130 
  fabric.util.object.extend(fabric.Canvas.prototype, /** @lends fabric.Canvas.prototype */ {
9131 
 
9132 
    /**
9133 
     * Map of cursor style values for each of the object controls
9134 
     * @private
9135 
     */
9136 
    cursorMap: [
9137 
      'n-resize',
9138 
      'ne-resize',
9139 
      'e-resize',
9140 
      'se-resize',
9141 
      's-resize',
9142 
      'sw-resize',
9143 
      'w-resize',
9144 
      'nw-resize'
9145 
    ],
9146 
 
9147 
    /**
9148 
     * Adds mouse listeners to canvas
9149 
     * @private
9150 
     */
9151 
    _initEventListeners: function () {
9152 
 
9153 
      this._bindEvents();
9154 
 
9155 
      addListener(fabric.window, 'resize', this._onResize);
9156 
 
9157 
      // mouse events
9158 
      addListener(this.upperCanvasEl, 'mousedown', this._onMouseDown);
9159 
      addListener(this.upperCanvasEl, 'mousemove', this._onMouseMove);
9160 
      addListener(this.upperCanvasEl, 'mousewheel', this._onMouseWheel);
9161 
 
9162 
      // touch events
9163 
      addListener(this.upperCanvasEl, 'touchstart', this._onMouseDown);
9164 
      addListener(this.upperCanvasEl, 'touchmove', this._onMouseMove);
9165 
 
9166 
      if (typeof eventjs !== 'undefined' && 'add' in eventjs) {
9167 
        eventjs.add(this.upperCanvasEl, 'gesture', this._onGesture);
9168 
        eventjs.add(this.upperCanvasEl, 'drag', this._onDrag);
9169 
        eventjs.add(this.upperCanvasEl, 'orientation', this._onOrientationChange);
9170 
        eventjs.add(this.upperCanvasEl, 'shake', this._onShake);
9171 
        eventjs.add(this.upperCanvasEl, 'longpress', this._onLongPress);
9172 
      }
9173 
    },
9174 
 
9175 
    /**
9176 
     * @private
9177 
     */
9178 
    _bindEvents: function() {
9179 
      this._onMouseDown = this._onMouseDown.bind(this);
9180 
      this._onMouseMove = this._onMouseMove.bind(this);
9181 
      this._onMouseUp = this._onMouseUp.bind(this);
9182 
      this._onResize = this._onResize.bind(this);
9183 
      this._onGesture = this._onGesture.bind(this);
9184 
      this._onDrag = this._onDrag.bind(this);
9185 
      this._onShake = this._onShake.bind(this);
9186 
      this._onLongPress = this._onLongPress.bind(this);
9187 
      this._onOrientationChange = this._onOrientationChange.bind(this);
9188 
      this._onMouseWheel = this._onMouseWheel.bind(this);
9189 
    },
9190 
 
9191 
    /**
9192 
     * Removes all event listeners
9193 
     */
9194 
    removeListeners: function() {
9195 
      removeListener(fabric.window, 'resize', this._onResize);
9196 
 
9197 
      removeListener(this.upperCanvasEl, 'mousedown', this._onMouseDown);
9198 
      removeListener(this.upperCanvasEl, 'mousemove', this._onMouseMove);
9199 
      removeListener(this.upperCanvasEl, 'mousewheel', this._onMouseWheel);
9200 
 
9201 
      removeListener(this.upperCanvasEl, 'touchstart', this._onMouseDown);
9202 
      removeListener(this.upperCanvasEl, 'touchmove', this._onMouseMove);
9203 
 
9204 
      if (typeof eventjs !== 'undefined' && 'remove' in eventjs) {
9205 
        eventjs.remove(this.upperCanvasEl, 'gesture', this._onGesture);
9206 
        eventjs.remove(this.upperCanvasEl, 'drag', this._onDrag);
9207 
        eventjs.remove(this.upperCanvasEl, 'orientation', this._onOrientationChange);
9208 
        eventjs.remove(this.upperCanvasEl, 'shake', this._onShake);
9209 
        eventjs.remove(this.upperCanvasEl, 'longpress', this._onLongPress);
9210 
      }
9211 
    },
9212 
 
9213 
    /**
9214 
     * @private
9215 
     * @param {Event} [e] Event object fired on Event.js gesture
9216 
     * @param {Event} [self] Inner Event object
9217 
     */
9218 
    _onGesture: function(e, self) {
9219 
      this.__onTransformGesture && this.__onTransformGesture(e, self);
9220 
    },
9221 
 
9222 
    /**
9223 
     * @private
9224 
     * @param {Event} [e] Event object fired on Event.js drag
9225 
     * @param {Event} [self] Inner Event object
9226 
     */
9227 
    _onDrag: function(e, self) {
9228 
      this.__onDrag && this.__onDrag(e, self);
9229 
    },
9230 
 
9231 
    /**
9232 
     * @private
9233 
     * @param {Event} [e] Event object fired on Event.js wheel event
9234 
     * @param {Event} [self] Inner Event object
9235 
     */
9236 
    _onMouseWheel: function(e, self) {
9237 
      this.__onMouseWheel && this.__onMouseWheel(e, self);
9238 
    },
9239 
 
9240 
    /**
9241 
     * @private
9242 
     * @param {Event} [e] Event object fired on Event.js orientation change
9243 
     * @param {Event} [self] Inner Event object
9244 
     */
9245 
    _onOrientationChange: function(e, self) {
9246 
      this.__onOrientationChange && this.__onOrientationChange(e, self);
9247 
    },
9248 
 
9249 
    /**
9250 
     * @private
9251 
     * @param {Event} [e] Event object fired on Event.js shake
9252 
     * @param {Event} [self] Inner Event object
9253 
     */
9254 
    _onShake: function(e, self) {
9255 
      this.__onShake && this.__onShake(e, self);
9256 
    },
9257 
    /**
9258 
     * @private
9259 
     * @param {Event} [e] Event object fired on Event.js shake
9260 
     * @param {Event} [self] Inner Event object
9261 
     */
9262 
    _onLongPress: function(e, self) {
9263 
      this.__onLongPress && this.__onLongPress(e, self);
9264 
    },
9265 
 
9266 
    /**
9267 
     * @private
9268 
     * @param {Event} e Event object fired on mousedown
9269 
     */
9270 
    _onMouseDown: function (e) {
9271 
      this.__onMouseDown(e);
9272 
 
9273 
      addListener(fabric.document, 'touchend', this._onMouseUp);
9274 
      addListener(fabric.document, 'touchmove', this._onMouseMove);
9275 
 
9276 
      removeListener(this.upperCanvasEl, 'mousemove', this._onMouseMove);
9277 
      removeListener(this.upperCanvasEl, 'touchmove', this._onMouseMove);
9278 
 
9279 
      if (e.type === 'touchstart') {
9280 
        // Unbind mousedown to prevent double triggers from touch devices
9281 
        removeListener(this.upperCanvasEl, 'mousedown', this._onMouseDown);
9282 
      }
9283 
      else {
9284 
        addListener(fabric.document, 'mouseup', this._onMouseUp);
9285 
        addListener(fabric.document, 'mousemove', this._onMouseMove);
9286 
      }
9287 
    },
9288 
 
9289 
    /**
9290 
     * @private
9291 
     * @param {Event} e Event object fired on mouseup
9292 
     */
9293 
    _onMouseUp: function (e) {
9294 
      this.__onMouseUp(e);
9295 
 
9296 
      removeListener(fabric.document, 'mouseup', this._onMouseUp);
9297 
      removeListener(fabric.document, 'touchend', this._onMouseUp);
9298 
 
9299 
      removeListener(fabric.document, 'mousemove', this._onMouseMove);
9300 
      removeListener(fabric.document, 'touchmove', this._onMouseMove);
9301 
 
9302 
      addListener(this.upperCanvasEl, 'mousemove', this._onMouseMove);
9303 
      addListener(this.upperCanvasEl, 'touchmove', this._onMouseMove);
9304 
 
9305 
      if (e.type === 'touchend') {
9306 
        // Wait 400ms before rebinding mousedown to prevent double triggers
9307 
        // from touch devices
9308 
        var _this = this;
9309 
        setTimeout(function() {
9310 
          addListener(_this.upperCanvasEl, 'mousedown', _this._onMouseDown);
9311 
        }, 400);
9312 
      }
9313 
    },
9314 
 
9315 
    /**
9316 
     * @private
9317 
     * @param {Event} e Event object fired on mousemove
9318 
     */
9319 
    _onMouseMove: function (e) {
9320 
      !this.allowTouchScrolling && e.preventDefault && e.preventDefault();
9321 
      this.__onMouseMove(e);
9322 
    },
9323 
 
9324 
    /**
9325 
     * @private
9326 
     */
9327 
    _onResize: function () {
9328 
      this.calcOffset();
9329 
    },
9330 
 
9331 
    /**
9332 
     * Decides whether the canvas should be redrawn in mouseup and mousedown events.
9333 
     * @private
9334 
     * @param {Object} target
9335 
     * @param {Object} pointer
9336 
     */
9337 
    _shouldRender: function(target, pointer) {
9338 
      var activeObject = this.getActiveGroup() || this.getActiveObject();
9339 
 
9340 
      return !!(
9341 
        (target && (
9342 
          target.isMoving ||
9343 
          target !== activeObject))
9344 
        ||
9345 
        (!target && !!activeObject)
9346 
        ||
9347 
        (!target && !activeObject && !this._groupSelector)
9348 
        ||
9349 
        (pointer &&
9350 
          this._previousPointer &&
9351 
          this.selection && (
9352 
          pointer.x !== this._previousPointer.x ||
9353 
          pointer.y !== this._previousPointer.y))
9354 
      );
9355 
    },
9356 
 
9357 
    /**
9358 
     * Method that defines the actions when mouse is released on canvas.
9359 
     * The method resets the currentTransform parameters, store the image corner
9360 
     * position in the image object and render the canvas on top.
9361 
     * @private
9362 
     * @param {Event} e Event object fired on mouseup
9363 
     */
9364 
    __onMouseUp: function (e) {
9365 
      var target;
9366 
 
9367 
      if (this.isDrawingMode && this._isCurrentlyDrawing) {
9368 
        this._onMouseUpInDrawingMode(e);
9369 
        return;
9370 
      }
9371 
 
9372 
      if (this._currentTransform) {
9373 
        this._finalizeCurrentTransform();
9374 
        target = this._currentTransform.target;
9375 
      }
9376 
      else {
9377 
        target = this.findTarget(e, true);
9378 
      }
9379 
 
9380 
      var shouldRender = this._shouldRender(target, this.getPointer(e));
9381 
 
9382 
      this._maybeGroupObjects(e);
9383 
 
9384 
      if (target) {
9385 
        target.isMoving = false;
9386 
      }
9387 
 
9388 
      shouldRender && this.renderAll();
9389 
 
9390 
      this._handleCursorAndEvent(e, target);
9391 
    },
9392 
 
9393 
    _handleCursorAndEvent: function(e, target) {
9394 
      this._setCursorFromEvent(e, target);
9395 
 
9396 
      // TODO: why are we doing this?
9397 
      var _this = this;
9398 
      setTimeout(function () {
9399 
        _this._setCursorFromEvent(e, target);
9400 
      }, 50);
9401 
 
9402 
      this.fire('mouse:up', { target: target, e: e });
9403 
      target && target.fire('mouseup', { e: e });
9404 
    },
9405 
 
9406 
    /**
9407 
     * @private
9408 
     */
9409 
    _finalizeCurrentTransform: function() {
9410 
 
9411 
      var transform = this._currentTransform,
9412 
          target = transform.target;
9413 
 
9414 
      if (target._scaling) {
9415 
        target._scaling = false;
9416 
      }
9417 
 
9418 
      target.setCoords();
9419 
 
9420 
      // only fire :modified event if target coordinates were changed during mousedown-mouseup
9421 
      if (this.stateful && target.hasStateChanged()) {
9422 
        this.fire('object:modified', { target: target });
9423 
        target.fire('modified');
9424 
      }
9425 
 
9426 
      this._restoreOriginXY(target);
9427 
    },
9428 
 
9429 
    /**
9430 
     * @private
9431 
     * @param {Object} target Object to restore
9432 
     */
9433 
    _restoreOriginXY: function(target) {
9434 
      if (this._previousOriginX && this._previousOriginY) {
9435 
 
9436 
        var originPoint = target.translateToOriginPoint(
9437 
          target.getCenterPoint(),
9438 
          this._previousOriginX,
9439 
          this._previousOriginY);
9440 
 
9441 
        target.originX = this._previousOriginX;
9442 
        target.originY = this._previousOriginY;
9443 
 
9444 
        target.left = originPoint.x;
9445 
        target.top = originPoint.y;
9446 
 
9447 
        this._previousOriginX = null;
9448 
        this._previousOriginY = null;
9449 
      }
9450 
    },
9451 
 
9452 
    /**
9453 
     * @private
9454 
     * @param {Event} e Event object fired on mousedown
9455 
     */
9456 
    _onMouseDownInDrawingMode: function(e) {
9457 
      this._isCurrentlyDrawing = true;
9458 
      this.discardActiveObject(e).renderAll();
9459 
      if (this.clipTo) {
9460 
        fabric.util.clipContext(this, this.contextTop);
9461 
      }
9462 
      var ivt = fabric.util.invertTransform(this.viewportTransform),
9463 
          pointer = fabric.util.transformPoint(this.getPointer(e, true), ivt);
9464 
      this.freeDrawingBrush.onMouseDown(pointer);
9465 
      this.fire('mouse:down', { e: e });
9466 
 
9467 
      var target = this.findTarget(e);
9468 
      if (typeof target !== 'undefined') {
9469 
        target.fire('mousedown', { e: e, target: target });
9470 
      }
9471 
    },
9472 
 
9473 
    /**
9474 
     * @private
9475 
     * @param {Event} e Event object fired on mousemove
9476 
     */
9477 
    _onMouseMoveInDrawingMode: function(e) {
9478 
      if (this._isCurrentlyDrawing) {
9479 
        var ivt = fabric.util.invertTransform(this.viewportTransform),
9480 
            pointer = fabric.util.transformPoint(this.getPointer(e, true), ivt);
9481 
        this.freeDrawingBrush.onMouseMove(pointer);
9482 
      }
9483 
      this.setCursor(this.freeDrawingCursor);
9484 
      this.fire('mouse:move', { e: e });
9485 
 
9486 
      var target = this.findTarget(e);
9487 
      if (typeof target !== 'undefined') {
9488 
        target.fire('mousemove', { e: e, target: target });
9489 
      }
9490 
    },
9491 
 
9492 
    /**
9493 
     * @private
9494 
     * @param {Event} e Event object fired on mouseup
9495 
     */
9496 
    _onMouseUpInDrawingMode: function(e) {
9497 
      this._isCurrentlyDrawing = false;
9498 
      if (this.clipTo) {
9499 
        this.contextTop.restore();
9500 
      }
9501 
      this.freeDrawingBrush.onMouseUp();
9502 
      this.fire('mouse:up', { e: e });
9503 
 
9504 
      var target = this.findTarget(e);
9505 
      if (typeof target !== 'undefined') {
9506 
        target.fire('mouseup', { e: e, target: target });
9507 
      }
9508 
    },
9509 
 
9510 
    /**
9511 
     * Method that defines the actions when mouse is clic ked on canvas.
9512 
     * The method inits the currentTransform parameters and renders all the
9513 
     * canvas so the current image can be placed on the top canvas and the rest
9514 
     * in on the container one.
9515 
     * @private
9516 
     * @param {Event} e Event object fired on mousedown
9517 
     */
9518 
    __onMouseDown: function (e) {
9519 
 
9520 
      // accept only left clicks
9521 
      var isLeftClick  = 'which' in e ? e.which === 1 : e.button === 1;
9522 
      if (!isLeftClick && !fabric.isTouchSupported) {
9523 
        return;
9524 
      }
9525 
 
9526 
      if (this.isDrawingMode) {
9527 
        this._onMouseDownInDrawingMode(e);
9528 
        return;
9529 
      }
9530 
 
9531 
      // ignore if some object is being transformed at this moment
9532 
      if (this._currentTransform) {
9533 
        return;
9534 
      }
9535 
 
9536 
      var target = this.findTarget(e),
9537 
          pointer = this.getPointer(e, true);
9538 
 
9539 
      // save pointer for check in __onMouseUp event
9540 
      this._previousPointer = pointer;
9541 
 
9542 
      var shouldRender = this._shouldRender(target, pointer),
9543 
          shouldGroup = this._shouldGroup(e, target);
9544 
 
9545 
      if (this._shouldClearSelection(e, target)) {
9546 
        this._clearSelection(e, target, pointer);
9547 
      }
9548 
      else if (shouldGroup) {
9549 
        this._handleGrouping(e, target);
9550 
        target = this.getActiveGroup();
9551 
      }
9552 
 
9553 
      if (target && target.selectable && !shouldGroup) {
9554 
        this._beforeTransform(e, target);
9555 
        this._setupCurrentTransform(e, target);
9556 
      }
9557 
      // we must renderAll so that active image is placed on the top canvas
9558 
      shouldRender && this.renderAll();
9559 
 
9560 
      this.fire('mouse:down', { target: target, e: e });
9561 
      target && target.fire('mousedown', { e: e });
9562 
    },
9563 
 
9564 
    /**
9565 
     * @private
9566 
     */
9567 
    _beforeTransform: function(e, target) {
9568 
      this.stateful && target.saveState();
9569 
 
9570 
      // determine if it's a drag or rotate case
9571 
      if (target._findTargetCorner(this.getPointer(e))) {
9572 
        this.onBeforeScaleRotate(target);
9573 
      }
9574 
 
9575 
      if (target !== this.getActiveGroup() && target !== this.getActiveObject()) {
9576 
        this.deactivateAll();
9577 
        this.setActiveObject(target, e);
9578 
      }
9579 
    },
9580 
 
9581 
    /**
9582 
     * @private
9583 
     */
9584 
    _clearSelection: function(e, target, pointer) {
9585 
      this.deactivateAllWithDispatch(e);
9586 
 
9587 
      if (target && target.selectable) {
9588 
        this.setActiveObject(target, e);
9589 
      }
9590 
      else if (this.selection) {
9591 
        this._groupSelector = {
9592 
          ex: pointer.x,
9593 
          ey: pointer.y,
9594 
          top: 0,
9595 
          left: 0
9596 
        };
9597 
      }
9598 
    },
9599 
 
9600 
    /**
9601 
     * @private
9602 
     * @param {Object} target Object for that origin is set to center
9603 
     */
9604 
    _setOriginToCenter: function(target) {
9605 
      this._previousOriginX = this._currentTransform.target.originX;
9606 
      this._previousOriginY = this._currentTransform.target.originY;
9607 
 
9608 
      var center = target.getCenterPoint();
9609 
 
9610 
      target.originX = 'center';
9611 
      target.originY = 'center';
9612 
 
9613 
      target.left = center.x;
9614 
      target.top = center.y;
9615 
 
9616 
      this._currentTransform.left = target.left;
9617 
      this._currentTransform.top = target.top;
9618 
    },
9619 
 
9620 
    /**
9621 
     * @private
9622 
     * @param {Object} target Object for that center is set to origin
9623 
     */
9624 
    _setCenterToOrigin: function(target) {
9625 
      var originPoint = target.translateToOriginPoint(
9626 
        target.getCenterPoint(),
9627 
        this._previousOriginX,
9628 
        this._previousOriginY);
9629 
 
9630 
      target.originX = this._previousOriginX;
9631 
      target.originY = this._previousOriginY;
9632 
 
9633 
      target.left = originPoint.x;
9634 
      target.top = originPoint.y;
9635 
 
9636 
      this._previousOriginX = null;
9637 
      this._previousOriginY = null;
9638 
    },
9639 
 
9640 
    /**
9641 
      * Method that defines the actions when mouse is hovering the canvas.
9642 
      * The currentTransform parameter will definde whether the user is rotating/scaling/translating
9643 
      * an image or neither of them (only hovering). A group selection is also possible and would cancel
9644 
      * all any other type of action.
9645 
      * In case of an image transformation only the top canvas will be rendered.
9646 
      * @private
9647 
      * @param {Event} e Event object fired on mousemove
9648 
      */
9649 
    __onMouseMove: function (e) {
9650 
 
9651 
      var target, pointer;
9652 
 
9653 
      if (this.isDrawingMode) {
9654 
        this._onMouseMoveInDrawingMode(e);
9655 
        return;
9656 
      }
9657 
      if (typeof e.touches !== 'undefined' && e.touches.length > 1) {
9658 
        return;
9659 
      }
9660 
 
9661 
      var groupSelector = this._groupSelector;
9662 
 
9663 
      // We initially clicked in an empty area, so we draw a box for multiple selection
9664 
      if (groupSelector) {
9665 
        pointer = this.getPointer(e, true);
9666 
 
9667 
        groupSelector.left = pointer.x - groupSelector.ex;
9668 
        groupSelector.top = pointer.y - groupSelector.ey;
9669 
 
9670 
        this.renderTop();
9671 
      }
9672 
      else if (!this._currentTransform) {
9673 
 
9674 
        target = this.findTarget(e);
9675 
 
9676 
        if (!target || target && !target.selectable) {
9677 
          this.setCursor(this.defaultCursor);
9678 
        }
9679 
        else {
9680 
          this._setCursorFromEvent(e, target);
9681 
        }
9682 
      }
9683 
      else {
9684 
        this._transformObject(e);
9685 
      }
9686 
 
9687 
      this.fire('mouse:move', { target: target, e: e });
9688 
      target && target.fire('mousemove', { e: e });
9689 
    },
9690 
 
9691 
    /**
9692 
     * @private
9693 
     * @param {Event} e Event fired on mousemove
9694 
     */
9695 
    _transformObject: function(e) {
9696 
      var pointer = this.getPointer(e),
9697 
          transform = this._currentTransform;
9698 
 
9699 
      transform.reset = false,
9700 
      transform.target.isMoving = true;
9701 
 
9702 
      this._beforeScaleTransform(e, transform);
9703 
      this._performTransformAction(e, transform, pointer);
9704 
 
9705 
      this.renderAll();
9706 
    },
9707 
 
9708 
    /**
9709 
     * @private
9710 
     */
9711 
    _performTransformAction: function(e, transform, pointer) {
9712 
      var x = pointer.x,
9713 
          y = pointer.y,
9714 
          target = transform.target,
9715 
          action = transform.action;
9716 
 
9717 
      if (action === 'rotate') {
9718 
        this._rotateObject(x, y);
9719 
        this._fire('rotating', target, e);
9720 
      }
9721 
      else if (action === 'scale') {
9722 
        this._onScale(e, transform, x, y);
9723 
        this._fire('scaling', target, e);
9724 
      }
9725 
      else if (action === 'scaleX') {
9726 
        this._scaleObject(x, y, 'x');
9727 
        this._fire('scaling', target, e);
9728 
      }
9729 
      else if (action === 'scaleY') {
9730 
        this._scaleObject(x, y, 'y');
9731 
        this._fire('scaling', target, e);
9732 
      }
9733 
      else {
9734 
        this._translateObject(x, y);
9735 
        this._fire('moving', target, e);
9736 
        this.setCursor(this.moveCursor);
9737 
      }
9738 
    },
9739 
 
9740 
    /**
9741 
     * @private
9742 
     */
9743 
    _fire: function(eventName, target, e) {
9744 
      this.fire('object:' + eventName, { target: target, e: e });
9745 
      target.fire(eventName, { e: e });
9746 
    },
9747 
 
9748 
    /**
9749 
     * @private
9750 
     */
9751 
    _beforeScaleTransform: function(e, transform) {
9752 
      if (transform.action === 'scale' || transform.action === 'scaleX' || transform.action === 'scaleY') {
9753 
        var centerTransform = this._shouldCenterTransform(e, transform.target);
9754 
 
9755 
        // Switch from a normal resize to center-based
9756 
        if ((centerTransform && (transform.originX !== 'center' || transform.originY !== 'center')) ||
9757 
           // Switch from center-based resize to normal one
9758 
           (!centerTransform && transform.originX === 'center' && transform.originY === 'center')
9759 
        ) {
9760 
          this._resetCurrentTransform(e);
9761 
          transform.reset = true;
9762 
        }
9763 
      }
9764 
    },
9765 
 
9766 
    /**
9767 
     * @private
9768 
     */
9769 
    _onScale: function(e, transform, x, y) {
9770 
      // rotate object only if shift key is not pressed
9771 
      // and if it is not a group we are transforming
9772 
      if ((e.shiftKey || this.uniScaleTransform) && !transform.target.get('lockUniScaling')) {
9773 
        transform.currentAction = 'scale';
9774 
        this._scaleObject(x, y);
9775 
      }
9776 
      else {
9777 
        // Switch from a normal resize to proportional
9778 
        if (!transform.reset && transform.currentAction === 'scale') {
9779 
          this._resetCurrentTransform(e, transform.target);
9780 
        }
9781 
 
9782 
        transform.currentAction = 'scaleEqually';
9783 
        this._scaleObject(x, y, 'equally');
9784 
      }
9785 
    },
9786 
 
9787 
    /**
9788 
     * Sets the cursor depending on where the canvas is being hovered.
9789 
     * Note: very buggy in Opera
9790 
     * @param {Event} e Event object
9791 
     * @param {Object} target Object that the mouse is hovering, if so.
9792 
     */
9793 
    _setCursorFromEvent: function (e, target) {
9794 
      if (!target || !target.selectable) {
9795 
        this.setCursor(this.defaultCursor);
9796 
        return false;
9797 
      }
9798 
      else {
9799 
        var activeGroup = this.getActiveGroup(),
9800 
            // only show proper corner when group selection is not active
9801 
            corner = target._findTargetCorner
9802 
                      && (!activeGroup || !activeGroup.contains(target))
9803 
                      && target._findTargetCorner(this.getPointer(e, true));
9804 
 
9805 
        if (!corner) {
9806 
          this.setCursor(target.hoverCursor || this.hoverCursor);
9807 
        }
9808 
        else {
9809 
          this._setCornerCursor(corner, target);
9810 
        }
9811 
      }
9812 
      return true;
9813 
    },
9814 
 
9815 
    /**
9816 
     * @private
9817 
     */
9818 
    _setCornerCursor: function(corner, target) {
9819 
      if (corner in cursorOffset) {
9820 
        this.setCursor(this._getRotatedCornerCursor(corner, target));
9821 
      }
9822 
      else if (corner === 'mtr' && target.hasRotatingPoint) {
9823 
        this.setCursor(this.rotationCursor);
9824 
      }
9825 
      else {
9826 
        this.setCursor(this.defaultCursor);
9827 
        return false;
9828 
      }
9829 
    },
9830 
 
9831 
    /**
9832 
     * @private
9833 
     */
9834 
    _getRotatedCornerCursor: function(corner, target) {
9835 
      var n = Math.round((target.getAngle() % 360) / 45);
9836 
 
9837 
      if (n < 0) {
9838 
        n += 8; // full circle ahead
9839 
      }
9840 
      n += cursorOffset[corner];
9841 
      // normalize n to be from 0 to 7
9842 
      n %= 8;
9843 
 
9844 
      return this.cursorMap[n];
9845 
    }
9846 
  });
9847 
})();
9848 
 
9849 
 
9850 
(function() {
9851 
 
9852 
  var min = Math.min,
9853 
      max = Math.max;
9854 
 
9855 
  fabric.util.object.extend(fabric.Canvas.prototype, /** @lends fabric.Canvas.prototype */ {
9856 
 
9857 
    /**
9858 
     * @private
9859 
     * @param {Event} e Event object
9860 
     * @param {fabric.Object} target
9861 
     * @return {Boolean}
9862 
     */
9863 
    _shouldGroup: function(e, target) {
9864 
      var activeObject = this.getActiveObject();
9865 
      return e.shiftKey &&
9866 
            (this.getActiveGroup() || (activeObject && activeObject !== target))
9867 
            && this.selection;
9868 
    },
9869 
 
9870 
    /**
9871 
     * @private
9872 
     * @param {Event} e Event object
9873 
     * @param {fabric.Object} target
9874 
     */
9875 
    _handleGrouping: function (e, target) {
9876 
 
9877 
      if (target === this.getActiveGroup()) {
9878 
 
9879 
        // if it's a group, find target again, this time skipping group
9880 
        target = this.findTarget(e, true);
9881 
 
9882 
        // if even object is not found, bail out
9883 
        if (!target || target.isType('group')) {
9884 
          return;
9885 
        }
9886 
      }
9887 
      if (this.getActiveGroup()) {
9888 
        this._updateActiveGroup(target, e);
9889 
      }
9890 
      else {
9891 
        this._createActiveGroup(target, e);
9892 
      }
9893 
 
9894 
      if (this._activeGroup) {
9895 
        this._activeGroup.saveCoords();
9896 
      }
9897 
    },
9898 
 
9899 
    /**
9900 
     * @private
9901 
     */
9902 
    _updateActiveGroup: function(target, e) {
9903 
      var activeGroup = this.getActiveGroup();
9904 
 
9905 
      if (activeGroup.contains(target)) {
9906 
 
9907 
        activeGroup.removeWithUpdate(target);
9908 
        this._resetObjectTransform(activeGroup);
9909 
        target.set('active', false);
9910 
 
9911 
        if (activeGroup.size() === 1) {
9912 
          // remove group alltogether if after removal it only contains 1 object
9913 
          this.discardActiveGroup(e);
9914 
          // activate last remaining object
9915 
          this.setActiveObject(activeGroup.item(0));
9916 
          return;
9917 
        }
9918 
      }
9919 
      else {
9920 
        activeGroup.addWithUpdate(target);
9921 
        this._resetObjectTransform(activeGroup);
9922 
      }
9923 
      this.fire('selection:created', { target: activeGroup, e: e });
9924 
      activeGroup.set('active', true);
9925 
    },
9926 
 
9927 
    /**
9928 
     * @private
9929 
     */
9930 
    _createActiveGroup: function(target, e) {
9931 
 
9932 
      if (this._activeObject && target !== this._activeObject) {
9933 
 
9934 
        var group = this._createGroup(target);
9935 
        group.addWithUpdate();
9936 
 
9937 
        this.setActiveGroup(group);
9938 
        this._activeObject = null;
9939 
 
9940 
        this.fire('selection:created', { target: group, e: e });
9941 
      }
9942 
 
9943 
      target.set('active', true);
9944 
    },
9945 
 
9946 
    /**
9947 
     * @private
9948 
     * @param {Object} target
9949 
     */
9950 
    _createGroup: function(target) {
9951 
 
9952 
      var objects = this.getObjects(),
9953 
          isActiveLower = objects.indexOf(this._activeObject) < objects.indexOf(target),
9954 
          groupObjects = isActiveLower
9955 
            ? [ this._activeObject, target ]
9956 
            : [ target, this._activeObject ];
9957 
 
9958 
      return new fabric.Group(groupObjects, {
9959 
        canvas: this
9960 
      });
9961 
    },
9962 
 
9963 
    /**
9964 
     * @private
9965 
     * @param {Event} e mouse event
9966 
     */
9967 
    _groupSelectedObjects: function (e) {
9968 
 
9969 
      var group = this._collectObjects();
9970 
 
9971 
      // do not create group for 1 element only
9972 
      if (group.length === 1) {
9973 
        this.setActiveObject(group[0], e);
9974 
      }
9975 
      else if (group.length > 1) {
9976 
        group = new fabric.Group(group.reverse(), {
9977 
          canvas: this
9978 
        });
9979 
        group.addWithUpdate();
9980 
        this.setActiveGroup(group, e);
9981 
        group.saveCoords();
9982 
        this.fire('selection:created', { target: group });
9983 
        this.renderAll();
9984 
      }
9985 
    },
9986 
 
9987 
    /**
9988 
     * @private
9989 
     */
9990 
    _collectObjects: function() {
9991 
      var group = [ ],
9992 
          currentObject,
9993 
          x1 = this._groupSelector.ex,
9994 
          y1 = this._groupSelector.ey,
9995 
          x2 = x1 + this._groupSelector.left,
9996 
          y2 = y1 + this._groupSelector.top,
9997 
          selectionX1Y1 = new fabric.Point(min(x1, x2), min(y1, y2)),
9998 
          selectionX2Y2 = new fabric.Point(max(x1, x2), max(y1, y2)),
9999 
          isClick = x1 === x2 && y1 === y2;
10000 
 
10001 
      for (var i = this._objects.length; i--; ) {
10002 
        currentObject = this._objects[i];
10003 
 
10004 
        if (!currentObject || !currentObject.selectable || !currentObject.visible) {
10005 
          continue;
10006 
        }
10007 
 
10008 
        if (currentObject.intersectsWithRect(selectionX1Y1, selectionX2Y2) ||
10009 
            currentObject.isContainedWithinRect(selectionX1Y1, selectionX2Y2) ||
10010 
            currentObject.containsPoint(selectionX1Y1) ||
10011 
            currentObject.containsPoint(selectionX2Y2)
10012 
        ) {
10013 
          currentObject.set('active', true);
10014 
          group.push(currentObject);
10015 
 
10016 
          // only add one object if it's a click
10017 
          if (isClick) {
10018 
            break;
10019 
          }
10020 
        }
10021 
      }
10022 
 
10023 
      return group;
10024 
    },
10025 
 
10026 
    /**
10027 
     * @private
10028 
     */
10029 
    _maybeGroupObjects: function(e) {
10030 
      if (this.selection && this._groupSelector) {
10031 
        this._groupSelectedObjects(e);
10032 
      }
10033 
 
10034 
      var activeGroup = this.getActiveGroup();
10035 
      if (activeGroup) {
10036 
        activeGroup.setObjectsCoords().setCoords();
10037 
        activeGroup.isMoving = false;
10038 
        this.setCursor(this.defaultCursor);
10039 
      }
10040 
 
10041 
      // clear selection and current transformation
10042 
      this._groupSelector = null;
10043 
      this._currentTransform = null;
10044 
    }
10045 
  });
10046 
 
10047 
})();
10048 
 
10049 
 
10050 
fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ {
10051 
 
10052 
  /**
10053 
   * Exports canvas element to a dataurl image. Note that when multiplier is used, cropping is scaled appropriately
10054 
   * @param {Object} [options] Options object
10055 
   * @param {String} [options.format=png] The format of the output image. Either "jpeg" or "png"
10056 
   * @param {Number} [options.quality=1] Quality level (0..1). Only used for jpeg.
10057 
   * @param {Number} [options.multiplier=1] Multiplier to scale by
10058 
   * @param {Number} [options.left] Cropping left offset. Introduced in v1.2.14
10059 
   * @param {Number} [options.top] Cropping top offset. Introduced in v1.2.14
10060 
   * @param {Number} [options.width] Cropping width. Introduced in v1.2.14
10061 
   * @param {Number} [options.height] Cropping height. Introduced in v1.2.14
10062 
   * @return {String} Returns a data: URL containing a representation of the object in the format specified by options.format
10063 
   * @see {@link http://jsfiddle.net/fabricjs/NfZVb/|jsFiddle demo}
10064 
   * @example <caption>Generate jpeg dataURL with lower quality</caption>
10065 
   * var dataURL = canvas.toDataURL({
10066 
   *   format: 'jpeg',
10067 
   *   quality: 0.8
10068 
   * });
10069 
   * @example <caption>Generate cropped png dataURL (clipping of canvas)</caption>
10070 
   * var dataURL = canvas.toDataURL({
10071 
   *   format: 'png',
10072 
   *   left: 100,
10073 
   *   top: 100,
10074 
   *   width: 200,
10075 
   *   height: 200
10076 
   * });
10077 
   * @example <caption>Generate double scaled png dataURL</caption>
10078 
   * var dataURL = canvas.toDataURL({
10079 
   *   format: 'png',
10080 
   *   multiplier: 2
10081 
   * });
10082 
   */
10083 
  toDataURL: function (options) {
10084 
    options || (options = { });
10085 
 
10086 
    var format = options.format || 'png',
10087 
        quality = options.quality || 1,
10088 
        multiplier = options.multiplier || 1,
10089 
        cropping = {
10090 
          left: options.left,
10091 
          top: options.top,
10092 
          width: options.width,
10093 
          height: options.height
10094 
        };
10095 
 
10096 
    if (multiplier !== 1) {
10097 
      return this.__toDataURLWithMultiplier(format, quality, cropping, multiplier);
10098 
    }
10099 
    else {
10100 
      return this.__toDataURL(format, quality, cropping);
10101 
    }
10102 
  },
10103 
 
10104 
  /**
10105 
   * @private
10106 
   */
10107 
  __toDataURL: function(format, quality, cropping) {
10108 
 
10109 
    this.renderAll(true);
10110 
 
10111 
    var canvasEl = this.upperCanvasEl || this.lowerCanvasEl,
10112 
        croppedCanvasEl = this.__getCroppedCanvas(canvasEl, cropping);
10113 
 
10114 
    // to avoid common confusion https://github.com/kangax/fabric.js/issues/806
10115 
    if (format === 'jpg') {
10116 
      format = 'jpeg';
10117 
    }
10118 
 
10119 
    var data = (fabric.StaticCanvas.supports('toDataURLWithQuality'))
10120 
              ? (croppedCanvasEl || canvasEl).toDataURL('image/' + format, quality)
10121 
              : (croppedCanvasEl || canvasEl).toDataURL('image/' + format);
10122 
 
10123 
    this.contextTop && this.clearContext(this.contextTop);
10124 
    this.renderAll();
10125 
 
10126 
    if (croppedCanvasEl) {
10127 
      croppedCanvasEl = null;
10128 
    }
10129 
 
10130 
    return data;
10131 
  },
10132 
 
10133 
  /**
10134 
   * @private
10135 
   */
10136 
  __getCroppedCanvas: function(canvasEl, cropping) {
10137 
 
10138 
    var croppedCanvasEl,
10139 
        croppedCtx,
10140 
        shouldCrop = 'left' in cropping ||
10141 
                     'top' in cropping ||
10142 
                     'width' in cropping ||
10143 
                     'height' in cropping;
10144 
 
10145 
    if (shouldCrop) {
10146 
 
10147 
      croppedCanvasEl = fabric.util.createCanvasElement();
10148 
      croppedCtx = croppedCanvasEl.getContext('2d');
10149 
 
10150 
      croppedCanvasEl.width = cropping.width || this.width;
10151 
      croppedCanvasEl.height = cropping.height || this.height;
10152 
 
10153 
      croppedCtx.drawImage(canvasEl, -cropping.left || 0, -cropping.top || 0);
10154 
    }
10155 
 
10156 
    return croppedCanvasEl;
10157 
  },
10158 
 
10159 
  /**
10160 
   * @private
10161 
   */
10162 
  __toDataURLWithMultiplier: function(format, quality, cropping, multiplier) {
10163 
 
10164 
    var origWidth = this.getWidth(),
10165 
        origHeight = this.getHeight(),
10166 
        scaledWidth = origWidth * multiplier,
10167 
        scaledHeight = origHeight * multiplier,
10168 
        activeObject = this.getActiveObject(),
10169 
        activeGroup = this.getActiveGroup(),
10170 
 
10171 
        ctx = this.contextTop || this.contextContainer;
10172 
 
10173 
    if (multiplier > 1) {
10174 
      this.setWidth(scaledWidth).setHeight(scaledHeight);
10175 
    }
10176 
    ctx.scale(multiplier, multiplier);
10177 
 
10178 
    if (cropping.left) {
10179 
      cropping.left *= multiplier;
10180 
    }
10181 
    if (cropping.top) {
10182 
      cropping.top *= multiplier;
10183 
    }
10184 
    if (cropping.width) {
10185 
      cropping.width *= multiplier;
10186 
    }
10187 
    else if (multiplier < 1) {
10188 
      cropping.width = scaledWidth;
10189 
    }
10190 
    if (cropping.height) {
10191 
      cropping.height *= multiplier;
10192 
    }
10193 
    else if (multiplier < 1) {
10194 
      cropping.height = scaledHeight;
10195 
    }
10196 
 
10197 
    if (activeGroup) {
10198 
      // not removing group due to complications with restoring it with correct state afterwords
10199 
      this._tempRemoveBordersControlsFromGroup(activeGroup);
10200 
    }
10201 
    else if (activeObject && this.deactivateAll) {
10202 
      this.deactivateAll();
10203 
    }
10204 
 
10205 
    this.renderAll(true);
10206 
 
10207 
    var data = this.__toDataURL(format, quality, cropping);
10208 
 
10209 
    // restoring width, height for `renderAll` to draw
10210 
    // background properly (while context is scaled)
10211 
    this.width = origWidth;
10212 
    this.height = origHeight;
10213 
 
10214 
    ctx.scale(1 / multiplier,  1 / multiplier);
10215 
    this.setWidth(origWidth).setHeight(origHeight);
10216 
 
10217 
    if (activeGroup) {
10218 
      this._restoreBordersControlsOnGroup(activeGroup);
10219 
    }
10220 
    else if (activeObject && this.setActiveObject) {
10221 
      this.setActiveObject(activeObject);
10222 
    }
10223 
 
10224 
    this.contextTop && this.clearContext(this.contextTop);
10225 
    this.renderAll();
10226 
 
10227 
    return data;
10228 
  },
10229 
 
10230 
  /**
10231 
   * Exports canvas element to a dataurl image (allowing to change image size via multiplier).
10232 
   * @deprecated since 1.0.13
10233 
   * @param {String} format (png|jpeg)
10234 
   * @param {Number} multiplier
10235 
   * @param {Number} quality (0..1)
10236 
   * @return {String}
10237 
   */
10238 
  toDataURLWithMultiplier: function (format, multiplier, quality) {
10239 
    return this.toDataURL({
10240 
      format: format,
10241 
      multiplier: multiplier,
10242 
      quality: quality
10243 
    });
10244 
  },
10245 
 
10246 
  /**
10247 
   * @private
10248 
   */
10249 
  _tempRemoveBordersControlsFromGroup: function(group) {
10250 
    group.origHasControls = group.hasControls;
10251 
    group.origBorderColor = group.borderColor;
10252 
 
10253 
    group.hasControls = true;
10254 
    group.borderColor = 'rgba(0,0,0,0)';
10255 
 
10256 
    group.forEachObject(function(o) {
10257 
      o.origBorderColor = o.borderColor;
10258 
      o.borderColor = 'rgba(0,0,0,0)';
10259 
    });
10260 
  },
10261 
 
10262 
  /**
10263 
   * @private
10264 
   */
10265 
  _restoreBordersControlsOnGroup: function(group) {
10266 
    group.hideControls = group.origHideControls;
10267 
    group.borderColor = group.origBorderColor;
10268 
 
10269 
    group.forEachObject(function(o) {
10270 
      o.borderColor = o.origBorderColor;
10271 
      delete o.origBorderColor;
10272 
    });
10273 
  }
10274 
});
10275 
 
10276 
 
10277 
fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ {
10278 
 
10279 
  /**
10280 
   * Populates canvas with data from the specified dataless JSON.
10281 
   * JSON format must conform to the one of {@link fabric.Canvas#toDatalessJSON}
10282 
   * @deprecated since 1.2.2
10283 
   * @param {String|Object} json JSON string or object
10284 
   * @param {Function} callback Callback, invoked when json is parsed
10285 
   *                            and corresponding objects (e.g: {@link fabric.Image})
10286 
   *                            are initialized
10287 
   * @param {Function} [reviver] Method for further parsing of JSON elements, called after each fabric object created.
10288 
   * @return {fabric.Canvas} instance
10289 
   * @chainable
10290 
   * @tutorial {@link http://fabricjs.com/fabric-intro-part-3/#deserialization}
10291 
   */
10292 
  loadFromDatalessJSON: function (json, callback, reviver) {
10293 
    return this.loadFromJSON(json, callback, reviver);
10294 
  },
10295 
 
10296 
  /**
10297 
   * Populates canvas with data from the specified JSON.
10298 
   * JSON format must conform to the one of {@link fabric.Canvas#toJSON}
10299 
   * @param {String|Object} json JSON string or object
10300 
   * @param {Function} callback Callback, invoked when json is parsed
10301 
   *                            and corresponding objects (e.g: {@link fabric.Image})
10302 
   *                            are initialized
10303 
   * @param {Function} [reviver] Method for further parsing of JSON elements, called after each fabric object created.
10304 
   * @return {fabric.Canvas} instance
10305 
   * @chainable
10306 
   * @tutorial {@link http://fabricjs.com/fabric-intro-part-3/#deserialization}
10307 
   * @see {@link http://jsfiddle.net/fabricjs/fmgXt/|jsFiddle demo}
10308 
   * @example <caption>loadFromJSON</caption>
10309 
   * canvas.loadFromJSON(json, canvas.renderAll.bind(canvas));
10310 
   * @example <caption>loadFromJSON with reviver</caption>
10311 
   * canvas.loadFromJSON(json, canvas.renderAll.bind(canvas), function(o, object) {
10312 
   *   // `o` = json object
10313 
   *   // `object` = fabric.Object instance
10314 
   *   // ... do some stuff ...
10315 
   * });
10316 
   */
10317 
  loadFromJSON: function (json, callback, reviver) {
10318 
    if (!json) {
10319 
      return;
10320 
    }
10321 
 
10322 
    // serialize if it wasn't already
10323 
    var serialized = (typeof json === 'string')
10324 
      ? JSON.parse(json)
10325 
      : json;
10326 
 
10327 
    this.clear();
10328 
 
10329 
    var _this = this;
10330 
    this._enlivenObjects(serialized.objects, function () {
10331 
      _this._setBgOverlay(serialized, callback);
10332 
    }, reviver);
10333 
 
10334 
    return this;
10335 
  },
10336 
 
10337 
  /**
10338 
   * @private
10339 
   * @param {Object} serialized Object with background and overlay information
10340 
   * @param {Function} callback Invoked after all background and overlay images/patterns loaded
10341 
   */
10342 
  _setBgOverlay: function(serialized, callback) {
10343 
    var _this = this,
10344 
        loaded = {
10345 
          backgroundColor: false,
10346 
          overlayColor: false,
10347 
          backgroundImage: false,
10348 
          overlayImage: false
10349 
        };
10350 
 
10351 
    if (!serialized.backgroundImage && !serialized.overlayImage && !serialized.background && !serialized.overlay) {
10352 
      callback && callback();
10353 
      return;
10354 
    }
10355 
 
10356 
    var cbIfLoaded = function () {
10357 
      if (loaded.backgroundImage && loaded.overlayImage && loaded.backgroundColor && loaded.overlayColor) {
10358 
        _this.renderAll();
10359 
        callback && callback();
10360 
      }
10361 
    };
10362 
 
10363 
    this.__setBgOverlay('backgroundImage', serialized.backgroundImage, loaded, cbIfLoaded);
10364 
    this.__setBgOverlay('overlayImage', serialized.overlayImage, loaded, cbIfLoaded);
10365 
    this.__setBgOverlay('backgroundColor', serialized.background, loaded, cbIfLoaded);
10366 
    this.__setBgOverlay('overlayColor', serialized.overlay, loaded, cbIfLoaded);
10367 
 
10368 
    cbIfLoaded();
10369 
  },
10370 
 
10371 
  /**
10372 
   * @private
10373 
   * @param {String} property Property to set (backgroundImage, overlayImage, backgroundColor, overlayColor)
10374 
   * @param {(Object|String)} value Value to set
10375 
   * @param {Object} loaded Set loaded property to true if property is set
10376 
   * @param {Object} callback Callback function to invoke after property is set
10377 
   */
10378 
  __setBgOverlay: function(property, value, loaded, callback) {
10379 
    var _this = this;
10380 
 
10381 
    if (!value) {
10382 
      loaded[property] = true;
10383 
      return;
10384 
    }
10385 
 
10386 
    if (property === 'backgroundImage' || property === 'overlayImage') {
10387 
      fabric.Image.fromObject(value, function(img) {
10388 
        _this[property] = img;
10389 
        loaded[property] = true;
10390 
        callback && callback();
10391 
      });
10392 
    }
10393 
    else {
10394 
      this['set' + fabric.util.string.capitalize(property, true)](value, function() {
10395 
        loaded[property] = true;
10396 
        callback && callback();
10397 
      });
10398 
    }
10399 
  },
10400 
 
10401 
  /**
10402 
   * @private
10403 
   * @param {Array} objects
10404 
   * @param {Function} callback
10405 
   * @param {Function} [reviver]
10406 
   */
10407 
  _enlivenObjects: function (objects, callback, reviver) {
10408 
    var _this = this;
10409 
 
10410 
    if (!objects || objects.length === 0) {
10411 
      callback && callback();
10412 
      return;
10413 
    }
10414 
 
10415 
    var renderOnAddRemove = this.renderOnAddRemove;
10416 
    this.renderOnAddRemove = false;
10417 
 
10418 
    fabric.util.enlivenObjects(objects, function(enlivenedObjects) {
10419 
      enlivenedObjects.forEach(function(obj, index) {
10420 
        _this.insertAt(obj, index, true);
10421 
      });
10422 
 
10423 
      _this.renderOnAddRemove = renderOnAddRemove;
10424 
      callback && callback();
10425 
    }, null, reviver);
10426 
  },
10427 
 
10428 
  /**
10429 
   * @private
10430 
   * @param {String} format
10431 
   * @param {Function} callback
10432 
   */
10433 
  _toDataURL: function (format, callback) {
10434 
    this.clone(function (clone) {
10435 
      callback(clone.toDataURL(format));
10436 
    });
10437 
  },
10438 
 
10439 
  /**
10440 
   * @private
10441 
   * @param {String} format
10442 
   * @param {Number} multiplier
10443 
   * @param {Function} callback
10444 
   */
10445 
  _toDataURLWithMultiplier: function (format, multiplier, callback) {
10446 
    this.clone(function (clone) {
10447 
      callback(clone.toDataURLWithMultiplier(format, multiplier));
10448 
    });
10449 
  },
10450 
 
10451 
  /**
10452 
   * Clones canvas instance
10453 
   * @param {Object} [callback] Receives cloned instance as a first argument
10454 
   * @param {Array} [properties] Array of properties to include in the cloned canvas and children
10455 
   */
10456 
  clone: function (callback, properties) {
10457 
    var data = JSON.stringify(this.toJSON(properties));
10458 
    this.cloneWithoutData(function(clone) {
10459 
      clone.loadFromJSON(data, function() {
10460 
        callback && callback(clone);
10461 
      });
10462 
    });
10463 
  },
10464 
 
10465 
  /**
10466 
   * Clones canvas instance without cloning existing data.
10467 
   * This essentially copies canvas dimensions, clipping properties, etc.
10468 
   * but leaves data empty (so that you can populate it with your own)
10469 
   * @param {Object} [callback] Receives cloned instance as a first argument
10470 
   */
10471 
  cloneWithoutData: function(callback) {
10472 
    var el = fabric.document.createElement('canvas');
10473 
 
10474 
    el.width = this.getWidth();
10475 
    el.height = this.getHeight();
10476 
 
10477 
    var clone = new fabric.Canvas(el);
10478 
    clone.clipTo = this.clipTo;
10479 
    if (this.backgroundImage) {
10480 
      clone.setBackgroundImage(this.backgroundImage.src, function() {
10481 
        clone.renderAll();
10482 
        callback && callback(clone);
10483 
      });
10484 
      clone.backgroundImageOpacity = this.backgroundImageOpacity;
10485 
      clone.backgroundImageStretch = this.backgroundImageStretch;
10486 
    }
10487 
    else {
10488 
      callback && callback(clone);
10489 
    }
10490 
  }
10491 
});
10492 
 
10493 
 
10494 
(function(global) {
10495 
 
10496 
  'use strict';
10497 
 
10498 
  var fabric = global.fabric || (global.fabric = { }),
10499 
      extend = fabric.util.object.extend,
10500 
      toFixed = fabric.util.toFixed,
10501 
      capitalize = fabric.util.string.capitalize,
10502 
      degreesToRadians = fabric.util.degreesToRadians,
10503 
      supportsLineDash = fabric.StaticCanvas.supports('setLineDash');
10504 
 
10505 
  if (fabric.Object) {
10506 
    return;
10507 
  }
10508 
 
10509 
  /**
10510 
   * Root object class from which all 2d shape classes inherit from
10511 
   * @class fabric.Object
10512 
   * @tutorial {@link http://fabricjs.com/fabric-intro-part-1/#objects}
10513 
   * @see {@link fabric.Object#initialize} for constructor definition
10514 
   *
10515 
   * @fires added
10516 
   * @fires removed
10517 
   *
10518 
   * @fires selected
10519 
   * @fires modified
10520 
   * @fires rotating
10521 
   * @fires scaling
10522 
   * @fires moving
10523 
   *
10524 
   * @fires mousedown
10525 
   * @fires mouseup
10526 
   */
10527 
  fabric.Object = fabric.util.createClass(/** @lends fabric.Object.prototype */ {
10528 
 
10529 
    /**
10530 
     * Retrieves object's {@link fabric.Object#clipTo|clipping function}
10531 
     * @method getClipTo
10532 
     * @memberOf fabric.Object.prototype
10533 
     * @return {Function}
10534 
     */
10535 
 
10536 
    /**
10537 
     * Sets object's {@link fabric.Object#clipTo|clipping function}
10538 
     * @method setClipTo
10539 
     * @memberOf fabric.Object.prototype
10540 
     * @param {Function} clipTo Clipping function
10541 
     * @return {fabric.Object} thisArg
10542 
     * @chainable
10543 
     */
10544 
 
10545 
    /**
10546 
     * Retrieves object's {@link fabric.Object#transformMatrix|transformMatrix}
10547 
     * @method getTransformMatrix
10548 
     * @memberOf fabric.Object.prototype
10549 
     * @return {Array} transformMatrix
10550 
     */
10551 
 
10552 
    /**
10553 
     * Sets object's {@link fabric.Object#transformMatrix|transformMatrix}
10554 
     * @method setTransformMatrix
10555 
     * @memberOf fabric.Object.prototype
10556 
     * @param {Array} transformMatrix
10557 
     * @return {fabric.Object} thisArg
10558 
     * @chainable
10559 
     */
10560 
 
10561 
    /**
10562 
     * Retrieves object's {@link fabric.Object#visible|visible} state
10563 
     * @method getVisible
10564 
     * @memberOf fabric.Object.prototype
10565 
     * @return {Boolean} True if visible
10566 
     */
10567 
 
10568 
    /**
10569 
     * Sets object's {@link fabric.Object#visible|visible} state
10570 
     * @method setVisible
10571 
     * @memberOf fabric.Object.prototype
10572 
     * @param {Boolean} value visible value
10573 
     * @return {fabric.Object} thisArg
10574 
     * @chainable
10575 
     */
10576 
 
10577 
    /**
10578 
     * Retrieves object's {@link fabric.Object#shadow|shadow}
10579 
     * @method getShadow
10580 
     * @memberOf fabric.Object.prototype
10581 
     * @return {Object} Shadow instance
10582 
     */
10583 
 
10584 
    /**
10585 
     * Retrieves object's {@link fabric.Object#stroke|stroke}
10586 
     * @method getStroke
10587 
     * @memberOf fabric.Object.prototype
10588 
     * @return {String} stroke value
10589 
     */
10590 
 
10591 
    /**
10592 
     * Sets object's {@link fabric.Object#stroke|stroke}
10593 
     * @method setStroke
10594 
     * @memberOf fabric.Object.prototype
10595 
     * @param {String} value stroke value
10596 
     * @return {fabric.Object} thisArg
10597 
     * @chainable
10598 
     */
10599 
 
10600 
    /**
10601 
     * Retrieves object's {@link fabric.Object#strokeWidth|strokeWidth}
10602 
     * @method getStrokeWidth
10603 
     * @memberOf fabric.Object.prototype
10604 
     * @return {Number} strokeWidth value
10605 
     */
10606 
 
10607 
    /**
10608 
     * Sets object's {@link fabric.Object#strokeWidth|strokeWidth}
10609 
     * @method setStrokeWidth
10610 
     * @memberOf fabric.Object.prototype
10611 
     * @param {Number} value strokeWidth value
10612 
     * @return {fabric.Object} thisArg
10613 
     * @chainable
10614 
     */
10615 
 
10616 
    /**
10617 
     * Retrieves object's {@link fabric.Object#originX|originX}
10618 
     * @method getOriginX
10619 
     * @memberOf fabric.Object.prototype
10620 
     * @return {String} originX value
10621 
     */
10622 
 
10623 
    /**
10624 
     * Sets object's {@link fabric.Object#originX|originX}
10625 
     * @method setOriginX
10626 
     * @memberOf fabric.Object.prototype
10627 
     * @param {String} value originX value
10628 
     * @return {fabric.Object} thisArg
10629 
     * @chainable
10630 
     */
10631 
 
10632 
    /**
10633 
     * Retrieves object's {@link fabric.Object#originY|originY}
10634 
     * @method getOriginY
10635 
     * @memberOf fabric.Object.prototype
10636 
     * @return {String} originY value
10637 
     */
10638 
 
10639 
    /**
10640 
     * Sets object's {@link fabric.Object#originY|originY}
10641 
     * @method setOriginY
10642 
     * @memberOf fabric.Object.prototype
10643 
     * @param {String} value originY value
10644 
     * @return {fabric.Object} thisArg
10645 
     * @chainable
10646 
     */
10647 
 
10648 
    /**
10649 
     * Retrieves object's {@link fabric.Object#fill|fill}
10650 
     * @method getFill
10651 
     * @memberOf fabric.Object.prototype
10652 
     * @return {String} Fill value
10653 
     */
10654 
 
10655 
    /**
10656 
     * Sets object's {@link fabric.Object#fill|fill}
10657 
     * @method setFill
10658 
     * @memberOf fabric.Object.prototype
10659 
     * @param {String} value Fill value
10660 
     * @return {fabric.Object} thisArg
10661 
     * @chainable
10662 
     */
10663 
 
10664 
    /**
10665 
     * Retrieves object's {@link fabric.Object#opacity|opacity}
10666 
     * @method getOpacity
10667 
     * @memberOf fabric.Object.prototype
10668 
     * @return {Number} Opacity value (0-1)
10669 
     */
10670 
 
10671 
    /**
10672 
     * Sets object's {@link fabric.Object#opacity|opacity}
10673 
     * @method setOpacity
10674 
     * @memberOf fabric.Object.prototype
10675 
     * @param {Number} value Opacity value (0-1)
10676 
     * @return {fabric.Object} thisArg
10677 
     * @chainable
10678 
     */
10679 
 
10680 
    /**
10681 
     * Retrieves object's {@link fabric.Object#angle|angle} (in degrees)
10682 
     * @method getAngle
10683 
     * @memberOf fabric.Object.prototype
10684 
     * @return {Number}
10685 
     */
10686 
 
10687 
    /**
10688 
     * Retrieves object's {@link fabric.Object#top|top position}
10689 
     * @method getTop
10690 
     * @memberOf fabric.Object.prototype
10691 
     * @return {Number} Top value (in pixels)
10692 
     */
10693 
 
10694 
    /**
10695 
     * Sets object's {@link fabric.Object#top|top position}
10696 
     * @method setTop
10697 
     * @memberOf fabric.Object.prototype
10698 
     * @param {Number} value Top value (in pixels)
10699 
     * @return {fabric.Object} thisArg
10700 
     * @chainable
10701 
     */
10702 
 
10703 
    /**
10704 
     * Retrieves object's {@link fabric.Object#left|left position}
10705 
     * @method getLeft
10706 
     * @memberOf fabric.Object.prototype
10707 
     * @return {Number} Left value (in pixels)
10708 
     */
10709 
 
10710 
    /**
10711 
     * Sets object's {@link fabric.Object#left|left position}
10712 
     * @method setLeft
10713 
     * @memberOf fabric.Object.prototype
10714 
     * @param {Number} value Left value (in pixels)
10715 
     * @return {fabric.Object} thisArg
10716 
     * @chainable
10717 
     */
10718 
 
10719 
    /**
10720 
     * Retrieves object's {@link fabric.Object#scaleX|scaleX} value
10721 
     * @method getScaleX
10722 
     * @memberOf fabric.Object.prototype
10723 
     * @return {Number} scaleX value
10724 
     */
10725 
 
10726 
    /**
10727 
     * Sets object's {@link fabric.Object#scaleX|scaleX} value
10728 
     * @method setScaleX
10729 
     * @memberOf fabric.Object.prototype
10730 
     * @param {Number} value scaleX value
10731 
     * @return {fabric.Object} thisArg
10732 
     * @chainable
10733 
     */
10734 
 
10735 
    /**
10736 
     * Retrieves object's {@link fabric.Object#scaleY|scaleY} value
10737 
     * @method getScaleY
10738 
     * @memberOf fabric.Object.prototype
10739 
     * @return {Number} scaleY value
10740 
     */
10741 
 
10742 
    /**
10743 
     * Sets object's {@link fabric.Object#scaleY|scaleY} value
10744 
     * @method setScaleY
10745 
     * @memberOf fabric.Object.prototype
10746 
     * @param {Number} value scaleY value
10747 
     * @return {fabric.Object} thisArg
10748 
     * @chainable
10749 
     */
10750 
 
10751 
    /**
10752 
     * Retrieves object's {@link fabric.Object#flipX|flipX} value
10753 
     * @method getFlipX
10754 
     * @memberOf fabric.Object.prototype
10755 
     * @return {Boolean} flipX value
10756 
     */
10757 
 
10758 
    /**
10759 
     * Sets object's {@link fabric.Object#flipX|flipX} value
10760 
     * @method setFlipX
10761 
     * @memberOf fabric.Object.prototype
10762 
     * @param {Boolean} value flipX value
10763 
     * @return {fabric.Object} thisArg
10764 
     * @chainable
10765 
     */
10766 
 
10767 
    /**
10768 
     * Retrieves object's {@link fabric.Object#flipY|flipY} value
10769 
     * @method getFlipY
10770 
     * @memberOf fabric.Object.prototype
10771 
     * @return {Boolean} flipY value
10772 
     */
10773 
 
10774 
    /**
10775 
     * Sets object's {@link fabric.Object#flipY|flipY} value
10776 
     * @method setFlipY
10777 
     * @memberOf fabric.Object.prototype
10778 
     * @param {Boolean} value flipY value
10779 
     * @return {fabric.Object} thisArg
10780 
     * @chainable
10781 
     */
10782 
 
10783 
    /**
10784 
     * Type of an object (rect, circle, path, etc.).
10785 
     * Note that this property is meant to be read-only and not meant to be modified.
10786 
     * If you modify, certain parts of Fabric (such as JSON loading) won't work correctly.
10787 
     * @type String
10788 
     * @default
10789 
     */
10790 
    type:                     'object',
10791 
 
10792 
    /**
10793 
     * Horizontal origin of transformation of an object (one of "left", "right", "center")
10794 
     * See http://jsfiddle.net/1ow02gea/40/ on how originX/originY affect objects in groups
10795 
     * @type String
10796 
     * @default
10797 
     */
10798 
    originX:                  'left',
10799 
 
10800 
    /**
10801 
     * Vertical origin of transformation of an object (one of "top", "bottom", "center")
10802 
     * See http://jsfiddle.net/1ow02gea/40/ on how originX/originY affect objects in groups
10803 
     * @type String
10804 
     * @default
10805 
     */
10806 
    originY:                  'top',
10807 
 
10808 
    /**
10809 
     * 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}
10810 
     * @type Number
10811 
     * @default
10812 
     */
10813 
    top:                      0,
10814 
 
10815 
    /**
10816 
     * 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}
10817 
     * @type Number
10818 
     * @default
10819 
     */
10820 
    left:                     0,
10821 
 
10822 
    /**
10823 
     * Object width
10824 
     * @type Number
10825 
     * @default
10826 
     */
10827 
    width:                    0,
10828 
 
10829 
    /**
10830 
     * Object height
10831 
     * @type Number
10832 
     * @default
10833 
     */
10834 
    height:                   0,
10835 
 
10836 
    /**
10837 
     * Object scale factor (horizontal)
10838 
     * @type Number
10839 
     * @default
10840 
     */
10841 
    scaleX:                   1,
10842 
 
10843 
    /**
10844 
     * Object scale factor (vertical)
10845 
     * @type Number
10846 
     * @default
10847 
     */
10848 
    scaleY:                   1,
10849 
 
10850 
    /**
10851 
     * When true, an object is rendered as flipped horizontally
10852 
     * @type Boolean
10853 
     * @default
10854 
     */
10855 
    flipX:                    false,
10856 
 
10857 
    /**
10858 
     * When true, an object is rendered as flipped vertically
10859 
     * @type Boolean
10860 
     * @default
10861 
     */
10862 
    flipY:                    false,
10863 
 
10864 
    /**
10865 
     * Opacity of an object
10866 
     * @type Number
10867 
     * @default
10868 
     */
10869 
    opacity:                  1,
10870 
 
10871 
    /**
10872 
     * Angle of rotation of an object (in degrees)
10873 
     * @type Number
10874 
     * @default
10875 
     */
10876 
    angle:                    0,
10877 
 
10878 
    /**
10879 
     * Size of object's controlling corners (in pixels)
10880 
     * @type Number
10881 
     * @default
10882 
     */
10883 
    cornerSize:               12,
10884 
 
10885 
    /**
10886 
     * When true, object's controlling corners are rendered as transparent inside (i.e. stroke instead of fill)
10887 
     * @type Boolean
10888 
     * @default
10889 
     */
10890 
    transparentCorners:       true,
10891 
 
10892 
    /**
10893 
     * Default cursor value used when hovering over this object on canvas
10894 
     * @type String
10895 
     * @default
10896 
     */
10897 
    hoverCursor:              null,
10898 
 
10899 
    /**
10900 
     * Padding between object and its controlling borders (in pixels)
10901 
     * @type Number
10902 
     * @default
10903 
     */
10904 
    padding:                  0,
10905 
 
10906 
    /**
10907 
     * Color of controlling borders of an object (when it's active)
10908 
     * @type String
10909 
     * @default
10910 
     */
10911 
    borderColor:              'rgba(102,153,255,0.75)',
10912 
 
10913 
    /**
10914 
     * Color of controlling corners of an object (when it's active)
10915 
     * @type String
10916 
     * @default
10917 
     */
10918 
    cornerColor:              'rgba(102,153,255,0.5)',
10919 
 
10920 
    /**
10921 
     * When true, this object will use center point as the origin of transformation
10922 
     * when being scaled via the controls.
10923 
     * <b>Backwards incompatibility note:</b> This property replaces "centerTransform" (Boolean).
10924 
     * @since 1.3.4
10925 
     * @type Boolean
10926 
     * @default
10927 
     */
10928 
    centeredScaling:          false,
10929 
 
10930 
    /**
10931 
     * When true, this object will use center point as the origin of transformation
10932 
     * when being rotated via the controls.
10933 
     * <b>Backwards incompatibility note:</b> This property replaces "centerTransform" (Boolean).
10934 
     * @since 1.3.4
10935 
     * @type Boolean
10936 
     * @default
10937 
     */
10938 
    centeredRotation:         true,
10939 
 
10940 
    /**
10941 
     * Color of object's fill
10942 
     * @type String
10943 
     * @default
10944 
     */
10945 
    fill:                     'rgb(0,0,0)',
10946 
 
10947 
    /**
10948 
     * Fill rule used to fill an object
10949 
     * accepted values are nonzero, evenodd
10950 
     * <b>Backwards incompatibility note:</b> This property was used for setting globalCompositeOperation until v1.4.12 (use `fabric.Object#globalCompositeOperation` instead)
10951 
     * @type String
10952 
     * @default
10953 
     */
10954 
    fillRule:                 'nonzero',
10955 
 
10956 
    /**
10957 
     * Composite rule used for canvas globalCompositeOperation
10958 
     * @type String
10959 
     * @default
10960 
     */
10961 
    globalCompositeOperation: 'source-over',
10962 
 
10963 
    /**
10964 
     * Background color of an object. Only works with text objects at the moment.
10965 
     * @type String
10966 
     * @default
10967 
     */
10968 
    backgroundColor:          '',
10969 
 
10970 
    /**
10971 
     * When defined, an object is rendered via stroke and this property specifies its color
10972 
     * @type String
10973 
     * @default
10974 
     */
10975 
    stroke:                   null,
10976 
 
10977 
    /**
10978 
     * Width of a stroke used to render this object
10979 
     * @type Number
10980 
     * @default
10981 
     */
10982 
    strokeWidth:              1,
10983 
 
10984 
    /**
10985 
     * Array specifying dash pattern of an object's stroke (stroke must be defined)
10986 
     * @type Array
10987 
     */
10988 
    strokeDashArray:          null,
10989 
 
10990 
    /**
10991 
     * Line endings style of an object's stroke (one of "butt", "round", "square")
10992 
     * @type String
10993 
     * @default
10994 
     */
10995 
    strokeLineCap:            'butt',
10996 
 
10997 
    /**
10998 
     * Corner style of an object's stroke (one of "bevil", "round", "miter")
10999 
     * @type String
11000 
     * @default
11001 
     */
11002 
    strokeLineJoin:           'miter',
11003 
 
11004 
    /**
11005 
     * Maximum miter length (used for strokeLineJoin = "miter") of an object's stroke
11006 
     * @type Number
11007 
     * @default
11008 
     */
11009 
    strokeMiterLimit:         10,
11010 
 
11011 
    /**
11012 
     * Shadow object representing shadow of this shape
11013 
     * @type fabric.Shadow
11014 
     * @default
11015 
     */
11016 
    shadow:                   null,
11017 
 
11018 
    /**
11019 
     * Opacity of object's controlling borders when object is active and moving
11020 
     * @type Number
11021 
     * @default
11022 
     */
11023 
    borderOpacityWhenMoving:  0.4,
11024 
 
11025 
    /**
11026 
     * Scale factor of object's controlling borders
11027 
     * @type Number
11028 
     * @default
11029 
     */
11030 
    borderScaleFactor:        1,
11031 
 
11032 
    /**
11033 
     * Transform matrix (similar to SVG's transform matrix)
11034 
     * @type Array
11035 
     */
11036 
    transformMatrix:          null,
11037 
 
11038 
    /**
11039 
     * Minimum allowed scale value of an object
11040 
     * @type Number
11041 
     * @default
11042 
     */
11043 
    minScaleLimit:            0.01,
11044 
 
11045 
    /**
11046 
     * When set to `false`, an object can not be selected for modification (using either point-click-based or group-based selection).
11047 
     * But events still fire on it.
11048 
     * @type Boolean
11049 
     * @default
11050 
     */
11051 
    selectable:               true,
11052 
 
11053 
    /**
11054 
     * When set to `false`, an object can not be a target of events. All events propagate through it. Introduced in v1.3.4
11055 
     * @type Boolean
11056 
     * @default
11057 
     */
11058 
    evented:                  true,
11059 
 
11060 
    /**
11061 
     * When set to `false`, an object is not rendered on canvas
11062 
     * @type Boolean
11063 
     * @default
11064 
     */
11065 
    visible:                  true,
11066 
 
11067 
    /**
11068 
     * When set to `false`, object's controls are not displayed and can not be used to manipulate object
11069 
     * @type Boolean
11070 
     * @default
11071 
     */
11072 
    hasControls:              true,
11073 
 
11074 
    /**
11075 
     * When set to `false`, object's controlling borders are not rendered
11076 
     * @type Boolean
11077 
     * @default
11078 
     */
11079 
    hasBorders:               true,
11080 
 
11081 
    /**
11082 
     * When set to `false`, object's controlling rotating point will not be visible or selectable
11083 
     * @type Boolean
11084 
     * @default
11085 
     */
11086 
    hasRotatingPoint:         true,
11087 
 
11088 
    /**
11089 
     * Offset for object's controlling rotating point (when enabled via `hasRotatingPoint`)
11090 
     * @type Number
11091 
     * @default
11092 
     */
11093 
    rotatingPointOffset:      40,
11094 
 
11095 
    /**
11096 
     * When set to `true`, objects are "found" on canvas on per-pixel basis rather than according to bounding box
11097 
     * @type Boolean
11098 
     * @default
11099 
     */
11100 
    perPixelTargetFind:       false,
11101 
 
11102 
    /**
11103 
     * When `false`, default object's values are not included in its serialization
11104 
     * @type Boolean
11105 
     * @default
11106 
     */
11107 
    includeDefaultValues:     true,
11108 
 
11109 
    /**
11110 
     * Function that determines clipping of an object (context is passed as a first argument)
11111 
     * Note that context origin is at the object's center point (not left/top corner)
11112 
     * @type Function
11113 
     */
11114 
    clipTo:                   null,
11115 
 
11116 
    /**
11117 
     * When `true`, object horizontal movement is locked
11118 
     * @type Boolean
11119 
     * @default
11120 
     */
11121 
    lockMovementX:            false,
11122 
 
11123 
    /**
11124 
     * When `true`, object vertical movement is locked
11125 
     * @type Boolean
11126 
     * @default
11127 
     */
11128 
    lockMovementY:            false,
11129 
 
11130 
    /**
11131 
     * When `true`, object rotation is locked
11132 
     * @type Boolean
11133 
     * @default
11134 
     */
11135 
    lockRotation:             false,
11136 
 
11137 
    /**
11138 
     * When `true`, object horizontal scaling is locked
11139 
     * @type Boolean
11140 
     * @default
11141 
     */
11142 
    lockScalingX:             false,
11143 
 
11144 
    /**
11145 
     * When `true`, object vertical scaling is locked
11146 
     * @type Boolean
11147 
     * @default
11148 
     */
11149 
    lockScalingY:             false,
11150 
 
11151 
    /**
11152 
     * When `true`, object non-uniform scaling is locked
11153 
     * @type Boolean
11154 
     * @default
11155 
     */
11156 
    lockUniScaling:           false,
11157 
 
11158 
    /**
11159 
     * When `true`, object cannot be flipped by scaling into negative values
11160 
     * @type Boolean
11161 
     * @default
11162 
     */
11163 
 
11164 
    lockScalingFlip:          false,
11165 
    /**
11166 
     * List of properties to consider when checking if state
11167 
     * of an object is changed (fabric.Object#hasStateChanged)
11168 
     * as well as for history (undo/redo) purposes
11169 
     * @type Array
11170 
     */
11171 
    stateProperties:  (
11172 
      'top left width height scaleX scaleY flipX flipY originX originY transformMatrix ' +
11173 
      'stroke strokeWidth strokeDashArray strokeLineCap strokeLineJoin strokeMiterLimit ' +
11174 
      'angle opacity fill fillRule globalCompositeOperation shadow clipTo visible backgroundColor'
11175 
    ).split(' '),
11176 
 
11177 
    /**
11178 
     * Constructor
11179 
     * @param {Object} [options] Options object
11180 
     */
11181 
    initialize: function(options) {
11182 
      if (options) {
11183 
        this.setOptions(options);
11184 
      }
11185 
    },
11186 
 
11187 
    /**
11188 
     * @private
11189 
     * @param {Object} [options] Options object
11190 
     */
11191 
    _initGradient: function(options) {
11192 
      if (options.fill && options.fill.colorStops && !(options.fill instanceof fabric.Gradient)) {
11193 
        this.set('fill', new fabric.Gradient(options.fill));
11194 
      }
11195 
    },
11196 
 
11197 
    /**
11198 
     * @private
11199 
     * @param {Object} [options] Options object
11200 
     */
11201 
    _initPattern: function(options) {
11202 
      if (options.fill && options.fill.source && !(options.fill instanceof fabric.Pattern)) {
11203 
        this.set('fill', new fabric.Pattern(options.fill));
11204 
      }
11205 
      if (options.stroke && options.stroke.source && !(options.stroke instanceof fabric.Pattern)) {
11206 
        this.set('stroke', new fabric.Pattern(options.stroke));
11207 
      }
11208 
    },
11209 
 
11210 
    /**
11211 
     * @private
11212 
     * @param {Object} [options] Options object
11213 
     */
11214 
    _initClipping: function(options) {
11215 
      if (!options.clipTo || typeof options.clipTo !== 'string') {
11216 
        return;
11217 
      }
11218 
 
11219 
      var functionBody = fabric.util.getFunctionBody(options.clipTo);
11220 
      if (typeof functionBody !== 'undefined') {
11221 
        this.clipTo = new Function('ctx', functionBody);
11222 
      }
11223 
    },
11224 
 
11225 
    /**
11226 
     * Sets object's properties from options
11227 
     * @param {Object} [options] Options object
11228 
     */
11229 
    setOptions: function(options) {
11230 
      for (var prop in options) {
11231 
        this.set(prop, options[prop]);
11232 
      }
11233 
      this._initGradient(options);
11234 
      this._initPattern(options);
11235 
      this._initClipping(options);
11236 
    },
11237 
 
11238 
    /**
11239 
     * Transforms context when rendering an object
11240 
     * @param {CanvasRenderingContext2D} ctx Context
11241 
     * @param {Boolean} fromLeft When true, context is transformed to object's top/left corner. This is used when rendering text on Node
11242 
     */
11243 
    transform: function(ctx, fromLeft) {
11244 
      var center = fromLeft ? this._getLeftTopCoords() : this.getCenterPoint();
11245 
      ctx.translate(center.x, center.y);
11246 
      ctx.rotate(degreesToRadians(this.angle));
11247 
      ctx.scale(
11248 
        this.scaleX * (this.flipX ? -1 : 1),
11249 
        this.scaleY * (this.flipY ? -1 : 1)
11250 
      );
11251 
    },
11252 
 
11253 
    /**
11254 
     * Returns an object representation of an instance
11255 
     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
11256 
     * @return {Object} Object representation of an instance
11257 
     */
11258 
    toObject: function(propertiesToInclude) {
11259 
      var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS,
11260 
 
11261 
          object = {
11262 
            type:                     this.type,
11263 
            originX:                  this.originX,
11264 
            originY:                  this.originY,
11265 
            left:                     toFixed(this.left, NUM_FRACTION_DIGITS),
11266 
            top:                      toFixed(this.top, NUM_FRACTION_DIGITS),
11267 
            width:                    toFixed(this.width, NUM_FRACTION_DIGITS),
11268 
            height:                   toFixed(this.height, NUM_FRACTION_DIGITS),
11269 
            fill:                     (this.fill && this.fill.toObject) ? this.fill.toObject() : this.fill,
11270 
            stroke:                   (this.stroke && this.stroke.toObject) ? this.stroke.toObject() : this.stroke,
11271 
            strokeWidth:              toFixed(this.strokeWidth, NUM_FRACTION_DIGITS),
11272 
            strokeDashArray:          this.strokeDashArray,
11273 
            strokeLineCap:            this.strokeLineCap,
11274 
            strokeLineJoin:           this.strokeLineJoin,
11275 
            strokeMiterLimit:         toFixed(this.strokeMiterLimit, NUM_FRACTION_DIGITS),
11276 
            scaleX:                   toFixed(this.scaleX, NUM_FRACTION_DIGITS),
11277 
            scaleY:                   toFixed(this.scaleY, NUM_FRACTION_DIGITS),
11278 
            angle:                    toFixed(this.getAngle(), NUM_FRACTION_DIGITS),
11279 
            flipX:                    this.flipX,
11280 
            flipY:                    this.flipY,
11281 
            opacity:                  toFixed(this.opacity, NUM_FRACTION_DIGITS),
11282 
            shadow:                   (this.shadow && this.shadow.toObject) ? this.shadow.toObject() : this.shadow,
11283 
            visible:                  this.visible,
11284 
            clipTo:                   this.clipTo && String(this.clipTo),
11285 
            backgroundColor:          this.backgroundColor,
11286 
            fillRule:                 this.fillRule,
11287 
            globalCompositeOperation: this.globalCompositeOperation
11288 
          };
11289 
 
11290 
      if (!this.includeDefaultValues) {
11291 
        object = this._removeDefaultValues(object);
11292 
      }
11293 
 
11294 
      fabric.util.populateWithProperties(this, object, propertiesToInclude);
11295 
 
11296 
      return object;
11297 
    },
11298 
 
11299 
    /**
11300 
     * Returns (dataless) object representation of an instance
11301 
     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
11302 
     * @return {Object} Object representation of an instance
11303 
     */
11304 
    toDatalessObject: function(propertiesToInclude) {
11305 
      // will be overwritten by subclasses
11306 
      return this.toObject(propertiesToInclude);
11307 
    },
11308 
 
11309 
    /**
11310 
     * @private
11311 
     * @param {Object} object
11312 
     */
11313 
    _removeDefaultValues: function(object) {
11314 
      var prototype = fabric.util.getKlass(object.type).prototype,
11315 
          stateProperties = prototype.stateProperties;
11316 
 
11317 
      stateProperties.forEach(function(prop) {
11318 
        if (object[prop] === prototype[prop]) {
11319 
          delete object[prop];
11320 
        }
11321 
      });
11322 
 
11323 
      return object;
11324 
    },
11325 
 
11326 
    /**
11327 
     * Returns a string representation of an instance
11328 
     * @return {String}
11329 
     */
11330 
    toString: function() {
11331 
      return '#<fabric.' + capitalize(this.type) + '>';
11332 
    },
11333 
 
11334 
    /**
11335 
     * Basic getter
11336 
     * @param {String} property Property name
11337 
     * @return {Any} value of a property
11338 
     */
11339 
    get: function(property) {
11340 
      return this[property];
11341 
    },
11342 
 
11343 
    /**
11344 
     * @private
11345 
     */
11346 
    _setObject: function(obj) {
11347 
      for (var prop in obj) {
11348 
        this._set(prop, obj[prop]);
11349 
      }
11350 
    },
11351 
 
11352 
    /**
11353 
     * 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()`.
11354 
     * @param {String|Object} key Property name or object (if object, iterate over the object properties)
11355 
     * @param {Object|Function} value Property value (if function, the value is passed into it and its return value is used as a new one)
11356 
     * @return {fabric.Object} thisArg
11357 
     * @chainable
11358 
     */
11359 
    set: function(key, value) {
11360 
      if (typeof key === 'object') {
11361 
        this._setObject(key);
11362 
      }
11363 
      else {
11364 
        if (typeof value === 'function' && key !== 'clipTo') {
11365 
          this._set(key, value(this.get(key)));
11366 
        }
11367 
        else {
11368 
          this._set(key, value);
11369 
        }
11370 
      }
11371 
      return this;
11372 
    },
11373 
 
11374 
    /**
11375 
     * @private
11376 
     * @param {String} key
11377 
     * @param {Any} value
11378 
     * @return {fabric.Object} thisArg
11379 
     */
11380 
    _set: function(key, value) {
11381 
      var shouldConstrainValue = (key === 'scaleX' || key === 'scaleY');
11382 
 
11383 
      if (shouldConstrainValue) {
11384 
        value = this._constrainScale(value);
11385 
      }
11386 
      if (key === 'scaleX' && value < 0) {
11387 
        this.flipX = !this.flipX;
11388 
        value *= -1;
11389 
      }
11390 
      else if (key === 'scaleY' && value < 0) {
11391 
        this.flipY = !this.flipY;
11392 
        value *= -1;
11393 
      }
11394 
      else if (key === 'width' || key === 'height') {
11395 
        this.minScaleLimit = toFixed(Math.min(0.1, 1/Math.max(this.width, this.height)), 2);
11396 
      }
11397 
      else if (key === 'shadow' && value && !(value instanceof fabric.Shadow)) {
11398 
        value = new fabric.Shadow(value);
11399 
      }
11400 
 
11401 
      this[key] = value;
11402 
 
11403 
      return this;
11404 
    },
11405 
 
11406 
    /**
11407 
     * Toggles specified property from `true` to `false` or from `false` to `true`
11408 
     * @param {String} property Property to toggle
11409 
     * @return {fabric.Object} thisArg
11410 
     * @chainable
11411 
     */
11412 
    toggle: function(property) {
11413 
      var value = this.get(property);
11414 
      if (typeof value === 'boolean') {
11415 
        this.set(property, !value);
11416 
      }
11417 
      return this;
11418 
    },
11419 
 
11420 
    /**
11421 
     * Sets sourcePath of an object
11422 
     * @param {String} value Value to set sourcePath to
11423 
     * @return {fabric.Object} thisArg
11424 
     * @chainable
11425 
     */
11426 
    setSourcePath: function(value) {
11427 
      this.sourcePath = value;
11428 
      return this;
11429 
    },
11430 
 
11431 
    /**
11432 
     * Retrieves viewportTransform from Object's canvas if possible
11433 
     * @method getViewportTransform
11434 
     * @memberOf fabric.Object.prototype
11435 
     * @return {Boolean} flipY value // TODO
11436 
     */
11437 
    getViewportTransform: function() {
11438 
      if (this.canvas && this.canvas.viewportTransform) {
11439 
        return this.canvas.viewportTransform;
11440 
      }
11441 
      return [1, 0, 0, 1, 0, 0];
11442 
    },
11443 
 
11444 
    /**
11445 
     * Renders an object on a specified context
11446 
     * @param {CanvasRenderingContext2D} ctx Context to render on
11447 
     * @param {Boolean} [noTransform] When true, context is not transformed
11448 
     */
11449 
    render: function(ctx, noTransform) {
11450 
      // do not render if width/height are zeros or object is not visible
11451 
      if ((this.width === 0 && this.height === 0) || !this.visible) {
11452 
        return;
11453 
      }
11454 
 
11455 
      ctx.save();
11456 
 
11457 
      //setup fill rule for current object
11458 
      this._setupCompositeOperation(ctx);
11459 
      if (!noTransform) {
11460 
        this.transform(ctx);
11461 
      }
11462 
      this._setStrokeStyles(ctx);
11463 
      this._setFillStyles(ctx);
11464 
      if (this.transformMatrix) {
11465 
        ctx.transform.apply(ctx, this.transformMatrix);
11466 
      }
11467 
      this._setOpacity(ctx);
11468 
      this._setShadow(ctx);
11469 
      this.clipTo && fabric.util.clipContext(this, ctx);
11470 
      this._render(ctx, noTransform);
11471 
      this.clipTo && ctx.restore();
11472 
      this._removeShadow(ctx);
11473 
      this._restoreCompositeOperation(ctx);
11474 
 
11475 
      ctx.restore();
11476 
    },
11477 
 
11478 
    /* @private
11479 
     * @param {CanvasRenderingContext2D} ctx Context to render on
11480 
     */
11481 
    _setOpacity: function(ctx) {
11482 
      if (this.group) {
11483 
        this.group._setOpacity(ctx);
11484 
      }
11485 
      ctx.globalAlpha *= this.opacity;
11486 
    },
11487 
 
11488 
    _setStrokeStyles: function(ctx) {
11489 
      if (this.stroke) {
11490 
        ctx.lineWidth = this.strokeWidth;
11491 
        ctx.lineCap = this.strokeLineCap;
11492 
        ctx.lineJoin = this.strokeLineJoin;
11493 
        ctx.miterLimit = this.strokeMiterLimit;
11494 
        ctx.strokeStyle = this.stroke.toLive
11495 
          ? this.stroke.toLive(ctx, this)
11496 
          : this.stroke;
11497 
      }
11498 
    },
11499 
 
11500 
    _setFillStyles: function(ctx) {
11501 
      if (this.fill) {
11502 
        ctx.fillStyle = this.fill.toLive
11503 
          ? this.fill.toLive(ctx, this)
11504 
          : this.fill;
11505 
      }
11506 
    },
11507 
 
11508 
    /**
11509 
     * Renders controls and borders for the object
11510 
     * @param {CanvasRenderingContext2D} ctx Context to render on
11511 
     * @param {Boolean} [noTransform] When true, context is not transformed
11512 
     */
11513 
    _renderControls: function(ctx, noTransform) {
11514 
      if (!this.active || noTransform) {
11515 
        return;
11516 
      }
11517 
      var vpt = this.getViewportTransform();
11518 
      ctx.save();
11519 
      var center;
11520 
      if (this.group) {
11521 
        center = fabric.util.transformPoint(this.group.getCenterPoint(), vpt);
11522 
        ctx.translate(center.x, center.y);
11523 
        ctx.rotate(degreesToRadians(this.group.angle));
11524 
      }
11525 
      center = fabric.util.transformPoint(this.getCenterPoint(), vpt, null != this.group);
11526 
      if (this.group) {
11527 
        center.x *= this.group.scaleX;
11528 
        center.y *= this.group.scaleY;
11529 
      }
11530 
      ctx.translate(center.x, center.y);
11531 
      ctx.rotate(degreesToRadians(this.angle));
11532 
      this.drawBorders(ctx);
11533 
      this.drawControls(ctx);
11534 
      ctx.restore();
11535 
    },
11536 
 
11537 
    /**
11538 
     * @private
11539 
     * @param {CanvasRenderingContext2D} ctx Context to render on
11540 
     */
11541 
    _setShadow: function(ctx) {
11542 
      if (!this.shadow) {
11543 
        return;
11544 
      }
11545 
 
11546 
      var multX = (this.canvas && this.canvas.viewportTransform[0]) || 1,
11547 
          multY = (this.canvas && this.canvas.viewportTransform[3]) || 1;
11548 
 
11549 
      ctx.shadowColor = this.shadow.color;
11550 
      ctx.shadowBlur = this.shadow.blur * (multX + multY) * (this.scaleX + this.scaleY) / 4;
11551 
      ctx.shadowOffsetX = this.shadow.offsetX * multX * this.scaleX;
11552 
      ctx.shadowOffsetY = this.shadow.offsetY * multY * this.scaleY;
11553 
    },
11554 
 
11555 
    /**
11556 
     * @private
11557 
     * @param {CanvasRenderingContext2D} ctx Context to render on
11558 
     */
11559 
    _removeShadow: function(ctx) {
11560 
      if (!this.shadow) {
11561 
        return;
11562 
      }
11563 
 
11564 
      ctx.shadowColor = '';
11565 
      ctx.shadowBlur = ctx.shadowOffsetX = ctx.shadowOffsetY = 0;
11566 
    },
11567 
 
11568 
    /**
11569 
     * @private
11570 
     * @param {CanvasRenderingContext2D} ctx Context to render on
11571 
     */
11572 
    _renderFill: function(ctx) {
11573 
      if (!this.fill) {
11574 
        return;
11575 
      }
11576 
 
11577 
      ctx.save();
11578 
      if (this.fill.gradientTransform) {
11579 
        var g = this.fill.gradientTransform;
11580 
        ctx.transform.apply(ctx, g);
11581 
      }
11582 
      if (this.fill.toLive) {
11583 
        ctx.translate(
11584 
          -this.width / 2 + this.fill.offsetX || 0,
11585 
          -this.height / 2 + this.fill.offsetY || 0);
11586 
      }
11587 
      if (this.fillRule === 'evenodd') {
11588 
        ctx.fill('evenodd');
11589 
      }
11590 
      else {
11591 
        ctx.fill();
11592 
      }
11593 
      ctx.restore();
11594 
      if (this.shadow && !this.shadow.affectStroke) {
11595 
        this._removeShadow(ctx);
11596 
      }
11597 
    },
11598 
 
11599 
    /**
11600 
     * @private
11601 
     * @param {CanvasRenderingContext2D} ctx Context to render on
11602 
     */
11603 
    _renderStroke: function(ctx) {
11604 
      if (!this.stroke || this.strokeWidth === 0) {
11605 
        return;
11606 
      }
11607 
 
11608 
      ctx.save();
11609 
      if (this.strokeDashArray) {
11610 
        // Spec requires the concatenation of two copies the dash list when the number of elements is odd
11611 
        if (1 & this.strokeDashArray.length) {
11612 
          this.strokeDashArray.push.apply(this.strokeDashArray, this.strokeDashArray);
11613 
        }
11614 
        if (supportsLineDash) {
11615 
          ctx.setLineDash(this.strokeDashArray);
11616 
          this._stroke && this._stroke(ctx);
11617 
        }
11618 
        else {
11619 
          this._renderDashedStroke && this._renderDashedStroke(ctx);
11620 
        }
11621 
        ctx.stroke();
11622 
      }
11623 
      else {
11624 
        if (this.stroke.gradientTransform) {
11625 
          var g = this.stroke.gradientTransform;
11626 
          ctx.transform.apply(ctx, g);
11627 
        }
11628 
        this._stroke ? this._stroke(ctx) : ctx.stroke();
11629 
      }
11630 
      this._removeShadow(ctx);
11631 
      ctx.restore();
11632 
    },
11633 
 
11634 
    /**
11635 
     * Clones an instance
11636 
     * @param {Function} callback Callback is invoked with a clone as a first argument
11637 
     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
11638 
     * @return {fabric.Object} clone of an instance
11639 
     */
11640 
    clone: function(callback, propertiesToInclude) {
11641 
      if (this.constructor.fromObject) {
11642 
        return this.constructor.fromObject(this.toObject(propertiesToInclude), callback);
11643 
      }
11644 
      return new fabric.Object(this.toObject(propertiesToInclude));
11645 
    },
11646 
 
11647 
    /**
11648 
     * Creates an instance of fabric.Image out of an object
11649 
     * @param {Function} callback callback, invoked with an instance as a first argument
11650 
     * @return {fabric.Object} thisArg
11651 
     */
11652 
    cloneAsImage: function(callback) {
11653 
      var dataUrl = this.toDataURL();
11654 
      fabric.util.loadImage(dataUrl, function(img) {
11655 
        if (callback) {
11656 
          callback(new fabric.Image(img));
11657 
        }
11658 
      });
11659 
      return this;
11660 
    },
11661 
 
11662 
    /**
11663 
     * Converts an object into a data-url-like string
11664 
     * @param {Object} options Options object
11665 
     * @param {String} [options.format=png] The format of the output image. Either "jpeg" or "png"
11666 
     * @param {Number} [options.quality=1] Quality level (0..1). Only used for jpeg.
11667 
     * @param {Number} [options.multiplier=1] Multiplier to scale by
11668 
     * @param {Number} [options.left] Cropping left offset. Introduced in v1.2.14
11669 
     * @param {Number} [options.top] Cropping top offset. Introduced in v1.2.14
11670 
     * @param {Number} [options.width] Cropping width. Introduced in v1.2.14
11671 
     * @param {Number} [options.height] Cropping height. Introduced in v1.2.14
11672 
     * @return {String} Returns a data: URL containing a representation of the object in the format specified by options.format
11673 
     */
11674 
    toDataURL: function(options) {
11675 
      options || (options = { });
11676 
 
11677 
      var el = fabric.util.createCanvasElement(),
11678 
          boundingRect = this.getBoundingRect();
11679 
 
11680 
      el.width = boundingRect.width;
11681 
      el.height = boundingRect.height;
11682 
 
11683 
      fabric.util.wrapElement(el, 'div');
11684 
      var canvas = new fabric.StaticCanvas(el);
11685 
 
11686 
      // to avoid common confusion https://github.com/kangax/fabric.js/issues/806
11687 
      if (options.format === 'jpg') {
11688 
        options.format = 'jpeg';
11689 
      }
11690 
 
11691 
      if (options.format === 'jpeg') {
11692 
        canvas.backgroundColor = '#fff';
11693 
      }
11694 
 
11695 
      var origParams = {
11696 
        active: this.get('active'),
11697 
        left: this.getLeft(),
11698 
        top: this.getTop()
11699 
      };
11700 
 
11701 
      this.set('active', false);
11702 
      this.setPositionByOrigin(new fabric.Point(el.width / 2, el.height / 2), 'center', 'center');
11703 
 
11704 
      var originalCanvas = this.canvas;
11705 
      canvas.add(this);
11706 
      var data = canvas.toDataURL(options);
11707 
 
11708 
      this.set(origParams).setCoords();
11709 
      this.canvas = originalCanvas;
11710 
 
11711 
      canvas.dispose();
11712 
      canvas = null;
11713 
 
11714 
      return data;
11715 
    },
11716 
 
11717 
    /**
11718 
     * Returns true if specified type is identical to the type of an instance
11719 
     * @param {String} type Type to check against
11720 
     * @return {Boolean}
11721 
     */
11722 
    isType: function(type) {
11723 
      return this.type === type;
11724 
    },
11725 
 
11726 
    /**
11727 
     * Returns complexity of an instance
11728 
     * @return {Number} complexity of this instance
11729 
     */
11730 
    complexity: function() {
11731 
      return 0;
11732 
    },
11733 
 
11734 
    /**
11735 
     * Returns a JSON representation of an instance
11736 
     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
11737 
     * @return {Object} JSON
11738 
     */
11739 
    toJSON: function(propertiesToInclude) {
11740 
      // delegate, not alias
11741 
      return this.toObject(propertiesToInclude);
11742 
    },
11743 
 
11744 
    /**
11745 
     * Sets gradient (fill or stroke) of an object
11746 
     * <b>Backwards incompatibility note:</b> This method was named "setGradientFill" until v1.1.0
11747 
     * @param {String} property Property name 'stroke' or 'fill'
11748 
     * @param {Object} [options] Options object
11749 
     * @param {String} [options.type] Type of gradient 'radial' or 'linear'
11750 
     * @param {Number} [options.x1=0] x-coordinate of start point
11751 
     * @param {Number} [options.y1=0] y-coordinate of start point
11752 
     * @param {Number} [options.x2=0] x-coordinate of end point
11753 
     * @param {Number} [options.y2=0] y-coordinate of end point
11754 
     * @param {Number} [options.r1=0] Radius of start point (only for radial gradients)
11755 
     * @param {Number} [options.r2=0] Radius of end point (only for radial gradients)
11756 
     * @param {Object} [options.colorStops] Color stops object eg. {0: 'ff0000', 1: '000000'}
11757 
     * @return {fabric.Object} thisArg
11758 
     * @chainable
11759 
     * @see {@link http://jsfiddle.net/fabricjs/58y8b/|jsFiddle demo}
11760 
     * @example <caption>Set linear gradient</caption>
11761 
     * object.setGradient('fill', {
11762 
     *   type: 'linear',
11763 
     *   x1: -object.width / 2,
11764 
     *   y1: 0,
11765 
     *   x2: object.width / 2,
11766 
     *   y2: 0,
11767 
     *   colorStops: {
11768 
     *     0: 'red',
11769 
     *     0.5: '#005555',
11770 
     *     1: 'rgba(0,0,255,0.5)'
11771 
     *   }
11772 
     * });
11773 
     * canvas.renderAll();
11774 
     * @example <caption>Set radial gradient</caption>
11775 
     * object.setGradient('fill', {
11776 
     *   type: 'radial',
11777 
     *   x1: 0,
11778 
     *   y1: 0,
11779 
     *   x2: 0,
11780 
     *   y2: 0,
11781 
     *   r1: object.width / 2,
11782 
     *   r2: 10,
11783 
     *   colorStops: {
11784 
     *     0: 'red',
11785 
     *     0.5: '#005555',
11786 
     *     1: 'rgba(0,0,255,0.5)'
11787 
     *   }
11788 
     * });
11789 
     * canvas.renderAll();
11790 
     */
11791 
    setGradient: function(property, options) {
11792 
      options || (options = { });
11793 
 
11794 
      var gradient = { colorStops: [] };
11795 
 
11796 
      gradient.type = options.type || (options.r1 || options.r2 ? 'radial' : 'linear');
11797 
      gradient.coords = {
11798 
        x1: options.x1,
11799 
        y1: options.y1,
11800 
        x2: options.x2,
11801 
        y2: options.y2
11802 
      };
11803 
 
11804 
      if (options.r1 || options.r2) {
11805 
        gradient.coords.r1 = options.r1;
11806 
        gradient.coords.r2 = options.r2;
11807 
      }
11808 
 
11809 
      for (var position in options.colorStops) {
11810 
        var color = new fabric.Color(options.colorStops[position]);
11811 
        gradient.colorStops.push({
11812 
          offset: position,
11813 
          color: color.toRgb(),
11814 
          opacity: color.getAlpha()
11815 
        });
11816 
      }
11817 
 
11818 
      return this.set(property, fabric.Gradient.forObject(this, gradient));
11819 
    },
11820 
 
11821 
    /**
11822 
     * Sets pattern fill of an object
11823 
     * @param {Object} options Options object
11824 
     * @param {(String|HTMLImageElement)} options.source Pattern source
11825 
     * @param {String} [options.repeat=repeat] Repeat property of a pattern (one of repeat, repeat-x, repeat-y or no-repeat)
11826 
     * @param {Number} [options.offsetX=0] Pattern horizontal offset from object's left/top corner
11827 
     * @param {Number} [options.offsetY=0] Pattern vertical offset from object's left/top corner
11828 
     * @return {fabric.Object} thisArg
11829 
     * @chainable
11830 
     * @see {@link http://jsfiddle.net/fabricjs/QT3pa/|jsFiddle demo}
11831 
     * @example <caption>Set pattern</caption>
11832 
     * fabric.util.loadImage('http://fabricjs.com/assets/escheresque_ste.png', function(img) {
11833 
     *   object.setPatternFill({
11834 
     *     source: img,
11835 
     *     repeat: 'repeat'
11836 
     *   });
11837 
     *   canvas.renderAll();
11838 
     * });
11839 
     */
11840 
    setPatternFill: function(options) {
11841 
      return this.set('fill', new fabric.Pattern(options));
11842 
    },
11843 
 
11844 
    /**
11845 
     * Sets {@link fabric.Object#shadow|shadow} of an object
11846 
     * @param {Object|String} [options] Options object or string (e.g. "2px 2px 10px rgba(0,0,0,0.2)")
11847 
     * @param {String} [options.color=rgb(0,0,0)] Shadow color
11848 
     * @param {Number} [options.blur=0] Shadow blur
11849 
     * @param {Number} [options.offsetX=0] Shadow horizontal offset
11850 
     * @param {Number} [options.offsetY=0] Shadow vertical offset
11851 
     * @return {fabric.Object} thisArg
11852 
     * @chainable
11853 
     * @see {@link http://jsfiddle.net/fabricjs/7gvJG/|jsFiddle demo}
11854 
     * @example <caption>Set shadow with string notation</caption>
11855 
     * object.setShadow('2px 2px 10px rgba(0,0,0,0.2)');
11856 
     * canvas.renderAll();
11857 
     * @example <caption>Set shadow with object notation</caption>
11858 
     * object.setShadow({
11859 
     *   color: 'red',
11860 
     *   blur: 10,
11861 
     *   offsetX: 20,
11862 
     *   offsetY: 20
11863 
     * });
11864 
     * canvas.renderAll();
11865 
     */
11866 
    setShadow: function(options) {
11867 
      return this.set('shadow', options ? new fabric.Shadow(options) : null);
11868 
    },
11869 
 
11870 
    /**
11871 
     * Sets "color" of an instance (alias of `set('fill', &hellip;)`)
11872 
     * @param {String} color Color value
11873 
     * @return {fabric.Object} thisArg
11874 
     * @chainable
11875 
     */
11876 
    setColor: function(color) {
11877 
      this.set('fill', color);
11878 
      return this;
11879 
    },
11880 
 
11881 
    /**
11882 
     * Sets "angle" of an instance
11883 
     * @param {Number} angle Angle value (in degrees)
11884 
     * @return {fabric.Object} thisArg
11885 
     * @chainable
11886 
     */
11887 
    setAngle: function(angle) {
11888 
      var shouldCenterOrigin = (this.originX !== 'center' || this.originY !== 'center') && this.centeredRotation;
11889 
 
11890 
      if (shouldCenterOrigin) {
11891 
        this._setOriginToCenter();
11892 
      }
11893 
 
11894 
      this.set('angle', angle);
11895 
 
11896 
      if (shouldCenterOrigin) {
11897 
        this._resetOrigin();
11898 
      }
11899 
 
11900 
      return this;
11901 
    },
11902 
 
11903 
    /**
11904 
     * Centers object horizontally on canvas to which it was added last.
11905 
     * You might need to call `setCoords` on an object after centering, to update controls area.
11906 
     * @return {fabric.Object} thisArg
11907 
     * @chainable
11908 
     */
11909 
    centerH: function () {
11910 
      this.canvas.centerObjectH(this);
11911 
      return this;
11912 
    },
11913 
 
11914 
    /**
11915 
     * Centers object vertically on canvas to which it was added last.
11916 
     * You might need to call `setCoords` on an object after centering, to update controls area.
11917 
     * @return {fabric.Object} thisArg
11918 
     * @chainable
11919 
     */
11920 
    centerV: function () {
11921 
      this.canvas.centerObjectV(this);
11922 
      return this;
11923 
    },
11924 
 
11925 
    /**
11926 
     * Centers object vertically and horizontally on canvas to which is was added last
11927 
     * You might need to call `setCoords` on an object after centering, to update controls area.
11928 
     * @return {fabric.Object} thisArg
11929 
     * @chainable
11930 
     */
11931 
    center: function () {
11932 
      this.canvas.centerObject(this);
11933 
      return this;
11934 
    },
11935 
 
11936 
    /**
11937 
     * Removes object from canvas to which it was added last
11938 
     * @return {fabric.Object} thisArg
11939 
     * @chainable
11940 
     */
11941 
    remove: function() {
11942 
      this.canvas.remove(this);
11943 
      return this;
11944 
    },
11945 
 
11946 
    /**
11947 
     * Returns coordinates of a pointer relative to an object
11948 
     * @param {Event} e Event to operate upon
11949 
     * @param {Object} [pointer] Pointer to operate upon (instead of event)
11950 
     * @return {Object} Coordinates of a pointer (x, y)
11951 
     */
11952 
    getLocalPointer: function(e, pointer) {
11953 
      pointer = pointer || this.canvas.getPointer(e);
11954 
      var objectLeftTop = this.translateToOriginPoint(this.getCenterPoint(), 'left', 'top');
11955 
      return {
11956 
        x: pointer.x - objectLeftTop.x,
11957 
        y: pointer.y - objectLeftTop.y
11958 
      };
11959 
    },
11960 
 
11961 
    /**
11962 
     * Sets canvas globalCompositeOperation for specific object
11963 
     * custom composition operation for the particular object can be specifed using globalCompositeOperation property
11964 
     * @param {CanvasRenderingContext2D} ctx Rendering canvas context
11965 
     */
11966 
    _setupCompositeOperation: function (ctx) {
11967 
      if (this.globalCompositeOperation) {
11968 
        this._prevGlobalCompositeOperation = ctx.globalCompositeOperation;
11969 
        ctx.globalCompositeOperation = this.globalCompositeOperation;
11970 
      }
11971 
    },
11972 
 
11973 
    /**
11974 
     * Restores previously saved canvas globalCompositeOperation after obeject rendering
11975 
     * @param {CanvasRenderingContext2D} ctx Rendering canvas context
11976 
     */
11977 
    _restoreCompositeOperation: function (ctx) {
11978 
      if (this.globalCompositeOperation && this._prevGlobalCompositeOperation) {
11979 
        ctx.globalCompositeOperation = this._prevGlobalCompositeOperation;
11980 
      }
11981 
    }
11982 
  });
11983 
 
11984 
  fabric.util.createAccessors(fabric.Object);
11985 
 
11986 
  /**
11987 
   * Alias for {@link fabric.Object.prototype.setAngle}
11988 
   * @alias rotate -> setAngle
11989 
   * @memberof fabric.Object
11990 
   */
11991 
  fabric.Object.prototype.rotate = fabric.Object.prototype.setAngle;
11992 
 
11993 
  extend(fabric.Object.prototype, fabric.Observable);
11994 
 
11995 
  /**
11996 
   * Defines the number of fraction digits to use when serializing object values.
11997 
   * You can use it to increase/decrease precision of such values like left, top, scaleX, scaleY, etc.
11998 
   * @static
11999 
   * @memberof fabric.Object
12000 
   * @constant
12001 
   * @type Number
12002 
   */
12003 
  fabric.Object.NUM_FRACTION_DIGITS = 2;
12004 
 
12005 
  /**
12006 
   * Unique id used internally when creating SVG elements
12007 
   * @static
12008 
   * @memberof fabric.Object
12009 
   * @type Number
12010 
   */
12011 
  fabric.Object.__uid = 0;
12012 
 
12013 
})(typeof exports !== 'undefined' ? exports : this);
12014 
 
12015 
 
12016 
(function() {
12017 
 
12018 
  var degreesToRadians = fabric.util.degreesToRadians;
12019 
 
12020 
  fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ {
12021 
 
12022 
    /**
12023 
     * Translates the coordinates from origin to center coordinates (based on the object's dimensions)
12024 
     * @param {fabric.Point} point The point which corresponds to the originX and originY params
12025 
     * @param {String} originX Horizontal origin: 'left', 'center' or 'right'
12026 
     * @param {String} originY Vertical origin: 'top', 'center' or 'bottom'
12027 
     * @return {fabric.Point}
12028 
     */
12029 
    translateToCenterPoint: function(point, originX, originY) {
12030 
      var cx = point.x,
12031 
          cy = point.y,
12032 
          strokeWidth = this.stroke ? this.strokeWidth : 0;
12033 
 
12034 
      if (originX === 'left') {
12035 
        cx = point.x + (this.getWidth() + strokeWidth * this.scaleX) / 2;
12036 
      }
12037 
      else if (originX === 'right') {
12038 
        cx = point.x - (this.getWidth() + strokeWidth * this.scaleX) / 2;
12039 
      }
12040 
 
12041 
      if (originY === 'top') {
12042 
        cy = point.y + (this.getHeight() + strokeWidth * this.scaleY) / 2;
12043 
      }
12044 
      else if (originY === 'bottom') {
12045 
        cy = point.y - (this.getHeight() + strokeWidth * this.scaleY) / 2;
12046 
      }
12047 
 
12048 
      // Apply the reverse rotation to the point (it's already scaled properly)
12049 
      return fabric.util.rotatePoint(new fabric.Point(cx, cy), point, degreesToRadians(this.angle));
12050 
    },
12051 
 
12052 
    /**
12053 
     * Translates the coordinates from center to origin coordinates (based on the object's dimensions)
12054 
     * @param {fabric.Point} center The point which corresponds to center of the object
12055 
     * @param {String} originX Horizontal origin: 'left', 'center' or 'right'
12056 
     * @param {String} originY Vertical origin: 'top', 'center' or 'bottom'
12057 
     * @return {fabric.Point}
12058 
     */
12059 
    translateToOriginPoint: function(center, originX, originY) {
12060 
      var x = center.x,
12061 
          y = center.y,
12062 
          strokeWidth = this.stroke ? this.strokeWidth : 0;
12063 
 
12064 
      // Get the point coordinates
12065 
      if (originX === 'left') {
12066 
        x = center.x - (this.getWidth() + strokeWidth * this.scaleX) / 2;
12067 
      }
12068 
      else if (originX === 'right') {
12069 
        x = center.x + (this.getWidth() + strokeWidth * this.scaleX) / 2;
12070 
      }
12071 
      if (originY === 'top') {
12072 
        y = center.y - (this.getHeight() + strokeWidth * this.scaleY) / 2;
12073 
      }
12074 
      else if (originY === 'bottom') {
12075 
        y = center.y + (this.getHeight() + strokeWidth * this.scaleY) / 2;
12076 
      }
12077 
 
12078 
      // Apply the rotation to the point (it's already scaled properly)
12079 
      return fabric.util.rotatePoint(new fabric.Point(x, y), center, degreesToRadians(this.angle));
12080 
    },
12081 
 
12082 
    /**
12083 
     * Returns the real center coordinates of the object
12084 
     * @return {fabric.Point}
12085 
     */
12086 
    getCenterPoint: function() {
12087 
      var leftTop = new fabric.Point(this.left, this.top);
12088 
      return this.translateToCenterPoint(leftTop, this.originX, this.originY);
12089 
    },
12090 
 
12091 
    /**
12092 
     * Returns the coordinates of the object based on center coordinates
12093 
     * @param {fabric.Point} point The point which corresponds to the originX and originY params
12094 
     * @return {fabric.Point}
12095 
     */
12096 
    // getOriginPoint: function(center) {
12097 
    //   return this.translateToOriginPoint(center, this.originX, this.originY);
12098 
    // },
12099 
 
12100 
    /**
12101 
     * Returns the coordinates of the object as if it has a different origin
12102 
     * @param {String} originX Horizontal origin: 'left', 'center' or 'right'
12103 
     * @param {String} originY Vertical origin: 'top', 'center' or 'bottom'
12104 
     * @return {fabric.Point}
12105 
     */
12106 
    getPointByOrigin: function(originX, originY) {
12107 
      var center = this.getCenterPoint();
12108 
      return this.translateToOriginPoint(center, originX, originY);
12109 
    },
12110 
 
12111 
    /**
12112 
     * Returns the point in local coordinates
12113 
     * @param {fabric.Point} point The point relative to the global coordinate system
12114 
     * @param {String} originX Horizontal origin: 'left', 'center' or 'right'
12115 
     * @param {String} originY Vertical origin: 'top', 'center' or 'bottom'
12116 
     * @return {fabric.Point}
12117 
     */
12118 
    toLocalPoint: function(point, originX, originY) {
12119 
      var center = this.getCenterPoint(),
12120 
          strokeWidth = this.stroke ? this.strokeWidth : 0,
12121 
          x, y;
12122 
 
12123 
      if (originX && originY) {
12124 
        if (originX === 'left') {
12125 
          x = center.x - (this.getWidth() + strokeWidth * this.scaleX) / 2;
12126 
        }
12127 
        else if (originX === 'right') {
12128 
          x = center.x + (this.getWidth() + strokeWidth * this.scaleX) / 2;
12129 
        }
12130 
        else {
12131 
          x = center.x;
12132 
        }
12133 
 
12134 
        if (originY === 'top') {
12135 
          y = center.y - (this.getHeight() + strokeWidth * this.scaleY) / 2;
12136 
        }
12137 
        else if (originY === 'bottom') {
12138 
          y = center.y + (this.getHeight() + strokeWidth * this.scaleY) / 2;
12139 
        }
12140 
        else {
12141 
          y = center.y;
12142 
        }
12143 
      }
12144 
      else {
12145 
        x = this.left;
12146 
        y = this.top;
12147 
      }
12148 
 
12149 
      return fabric.util.rotatePoint(new fabric.Point(point.x, point.y), center, -degreesToRadians(this.angle))
12150 
        .subtractEquals(new fabric.Point(x, y));
12151 
    },
12152 
 
12153 
    /**
12154 
     * Returns the point in global coordinates
12155 
     * @param {fabric.Point} The point relative to the local coordinate system
12156 
     * @return {fabric.Point}
12157 
     */
12158 
    // toGlobalPoint: function(point) {
12159 
    //   return fabric.util.rotatePoint(point, this.getCenterPoint(), degreesToRadians(this.angle)).addEquals(new fabric.Point(this.left, this.top));
12160 
    // },
12161 
 
12162 
    /**
12163 
     * Sets the position of the object taking into consideration the object's origin
12164 
     * @param {fabric.Point} pos The new position of the object
12165 
     * @param {String} originX Horizontal origin: 'left', 'center' or 'right'
12166 
     * @param {String} originY Vertical origin: 'top', 'center' or 'bottom'
12167 
     * @return {void}
12168 
     */
12169 
    setPositionByOrigin: function(pos, originX, originY) {
12170 
      var center = this.translateToCenterPoint(pos, originX, originY),
12171 
          position = this.translateToOriginPoint(center, this.originX, this.originY);
12172 
 
12173 
      this.set('left', position.x);
12174 
      this.set('top', position.y);
12175 
    },
12176 
 
12177 
    /**
12178 
     * @param {String} to One of 'left', 'center', 'right'
12179 
     */
12180 
    adjustPosition: function(to) {
12181 
      var angle = degreesToRadians(this.angle),
12182 
          hypotHalf = this.getWidth() / 2,
12183 
          xHalf = Math.cos(angle) * hypotHalf,
12184 
          yHalf = Math.sin(angle) * hypotHalf,
12185 
          hypotFull = this.getWidth(),
12186 
          xFull = Math.cos(angle) * hypotFull,
12187 
          yFull = Math.sin(angle) * hypotFull;
12188 
 
12189 
      if (this.originX === 'center' && to === 'left' ||
12190 
          this.originX === 'right' && to === 'center') {
12191 
        // move half left
12192 
        this.left -= xHalf;
12193 
        this.top -= yHalf;
12194 
      }
12195 
      else if (this.originX === 'left' && to === 'center' ||
12196 
               this.originX === 'center' && to === 'right') {
12197 
        // move half right
12198 
        this.left += xHalf;
12199 
        this.top += yHalf;
12200 
      }
12201 
      else if (this.originX === 'left' && to === 'right') {
12202 
        // move full right
12203 
        this.left += xFull;
12204 
        this.top += yFull;
12205 
      }
12206 
      else if (this.originX === 'right' && to === 'left') {
12207 
        // move full left
12208 
        this.left -= xFull;
12209 
        this.top -= yFull;
12210 
      }
12211 
 
12212 
      this.setCoords();
12213 
      this.originX = to;
12214 
    },
12215 
 
12216 
    /**
12217 
     * Sets the origin/position of the object to it's center point
12218 
     * @private
12219 
     * @return {void}
12220 
     */
12221 
    _setOriginToCenter: function() {
12222 
      this._originalOriginX = this.originX;
12223 
      this._originalOriginY = this.originY;
12224 
 
12225 
      var center = this.getCenterPoint();
12226 
 
12227 
      this.originX = 'center';
12228 
      this.originY = 'center';
12229 
 
12230 
      this.left = center.x;
12231 
      this.top = center.y;
12232 
    },
12233 
 
12234 
    /**
12235 
     * Resets the origin/position of the object to it's original origin
12236 
     * @private
12237 
     * @return {void}
12238 
     */
12239 
    _resetOrigin: function() {
12240 
      var originPoint = this.translateToOriginPoint(
12241 
        this.getCenterPoint(),
12242 
        this._originalOriginX,
12243 
        this._originalOriginY);
12244 
 
12245 
      this.originX = this._originalOriginX;
12246 
      this.originY = this._originalOriginY;
12247 
 
12248 
      this.left = originPoint.x;
12249 
      this.top = originPoint.y;
12250 
 
12251 
      this._originalOriginX = null;
12252 
      this._originalOriginY = null;
12253 
    },
12254 
 
12255 
    /**
12256 
     * @private
12257 
     */
12258 
    _getLeftTopCoords: function() {
12259 
      return this.translateToOriginPoint(this.getCenterPoint(), 'left', 'center');
12260 
    }
12261 
  });
12262 
 
12263 
})();
12264 
 
12265 
 
12266 
(function() {
12267 
 
12268 
  var degreesToRadians = fabric.util.degreesToRadians;
12269 
 
12270 
  fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ {
12271 
 
12272 
    /**
12273 
     * Object containing coordinates of object's controls
12274 
     * @type Object
12275 
     * @default
12276 
     */
12277 
    oCoords: null,
12278 
 
12279 
    /**
12280 
     * Checks if object intersects with an area formed by 2 points
12281 
     * @param {Object} pointTL top-left point of area
12282 
     * @param {Object} pointBR bottom-right point of area
12283 
     * @return {Boolean} true if object intersects with an area formed by 2 points
12284 
     */
12285 
    intersectsWithRect: function(pointTL, pointBR) {
12286 
      var oCoords = this.oCoords,
12287 
          tl = new fabric.Point(oCoords.tl.x, oCoords.tl.y),
12288 
          tr = new fabric.Point(oCoords.tr.x, oCoords.tr.y),
12289 
          bl = new fabric.Point(oCoords.bl.x, oCoords.bl.y),
12290 
          br = new fabric.Point(oCoords.br.x, oCoords.br.y),
12291 
          intersection = fabric.Intersection.intersectPolygonRectangle(
12292 
            [tl, tr, br, bl],
12293 
            pointTL,
12294 
            pointBR
12295 
          );
12296 
      return intersection.status === 'Intersection';
12297 
    },
12298 
 
12299 
    /**
12300 
     * Checks if object intersects with another object
12301 
     * @param {Object} other Object to test
12302 
     * @return {Boolean} true if object intersects with another object
12303 
     */
12304 
    intersectsWithObject: function(other) {
12305 
      // extracts coords
12306 
      function getCoords(oCoords) {
12307 
        return {
12308 
          tl: new fabric.Point(oCoords.tl.x, oCoords.tl.y),
12309 
          tr: new fabric.Point(oCoords.tr.x, oCoords.tr.y),
12310 
          bl: new fabric.Point(oCoords.bl.x, oCoords.bl.y),
12311 
          br: new fabric.Point(oCoords.br.x, oCoords.br.y)
12312 
        };
12313 
      }
12314 
      var thisCoords = getCoords(this.oCoords),
12315 
          otherCoords = getCoords(other.oCoords),
12316 
          intersection = fabric.Intersection.intersectPolygonPolygon(
12317 
            [thisCoords.tl, thisCoords.tr, thisCoords.br, thisCoords.bl],
12318 
            [otherCoords.tl, otherCoords.tr, otherCoords.br, otherCoords.bl]
12319 
          );
12320 
 
12321 
      return intersection.status === 'Intersection';
12322 
    },
12323 
 
12324 
    /**
12325 
     * Checks if object is fully contained within area of another object
12326 
     * @param {Object} other Object to test
12327 
     * @return {Boolean} true if object is fully contained within area of another object
12328 
     */
12329 
    isContainedWithinObject: function(other) {
12330 
      var boundingRect = other.getBoundingRect(),
12331 
          point1 = new fabric.Point(boundingRect.left, boundingRect.top),
12332 
          point2 = new fabric.Point(boundingRect.left + boundingRect.width, boundingRect.top + boundingRect.height);
12333 
 
12334 
      return this.isContainedWithinRect(point1, point2);
12335 
    },
12336 
 
12337 
    /**
12338 
     * Checks if object is fully contained within area formed by 2 points
12339 
     * @param {Object} pointTL top-left point of area
12340 
     * @param {Object} pointBR bottom-right point of area
12341 
     * @return {Boolean} true if object is fully contained within area formed by 2 points
12342 
     */
12343 
    isContainedWithinRect: function(pointTL, pointBR) {
12344 
      var boundingRect = this.getBoundingRect();
12345 
 
12346 
      return (
12347 
        boundingRect.left >= pointTL.x &&
12348 
        boundingRect.left + boundingRect.width <= pointBR.x &&
12349 
        boundingRect.top >= pointTL.y &&
12350 
        boundingRect.top + boundingRect.height <= pointBR.y
12351 
      );
12352 
    },
12353 
 
12354 
    /**
12355 
     * Checks if point is inside the object
12356 
     * @param {fabric.Point} point Point to check against
12357 
     * @return {Boolean} true if point is inside the object
12358 
     */
12359 
    containsPoint: function(point) {
12360 
      var lines = this._getImageLines(this.oCoords),
12361 
          xPoints = this._findCrossPoints(point, lines);
12362 
 
12363 
      // if xPoints is odd then point is inside the object
12364 
      return (xPoints !== 0 && xPoints % 2 === 1);
12365 
    },
12366 
 
12367 
    /**
12368 
     * Method that returns an object with the object edges in it, given the coordinates of the corners
12369 
     * @private
12370 
     * @param {Object} oCoords Coordinates of the object corners
12371 
     */
12372 
    _getImageLines: function(oCoords) {
12373 
      return {
12374 
        topline: {
12375 
          o: oCoords.tl,
12376 
          d: oCoords.tr
12377 
        },
12378 
        rightline: {
12379 
          o: oCoords.tr,
12380 
          d: oCoords.br
12381 
        },
12382 
        bottomline: {
12383 
          o: oCoords.br,
12384 
          d: oCoords.bl
12385 
        },
12386 
        leftline: {
12387 
          o: oCoords.bl,
12388 
          d: oCoords.tl
12389 
        }
12390 
      };
12391 
    },
12392 
 
12393 
    /**
12394 
     * Helper method to determine how many cross points are between the 4 object edges
12395 
     * and the horizontal line determined by a point on canvas
12396 
     * @private
12397 
     * @param {fabric.Point} point Point to check
12398 
     * @param {Object} oCoords Coordinates of the object being evaluated
12399 
     */
12400 
    _findCrossPoints: function(point, oCoords) {
12401 
      var b1, b2, a1, a2, xi, yi,
12402 
          xcount = 0,
12403 
          iLine;
12404 
 
12405 
      for (var lineKey in oCoords) {
12406 
        iLine = oCoords[lineKey];
12407 
        // optimisation 1: line below point. no cross
12408 
        if ((iLine.o.y < point.y) && (iLine.d.y < point.y)) {
12409 
          continue;
12410 
        }
12411 
        // optimisation 2: line above point. no cross
12412 
        if ((iLine.o.y >= point.y) && (iLine.d.y >= point.y)) {
12413 
          continue;
12414 
        }
12415 
        // optimisation 3: vertical line case
12416 
        if ((iLine.o.x === iLine.d.x) && (iLine.o.x >= point.x)) {
12417 
          xi = iLine.o.x;
12418 
          yi = point.y;
12419 
        }
12420 
        // calculate the intersection point
12421 
        else {
12422 
          b1 = 0;
12423 
          b2 = (iLine.d.y - iLine.o.y) / (iLine.d.x - iLine.o.x);
12424 
          a1 = point.y - b1 * point.x;
12425 
          a2 = iLine.o.y - b2 * iLine.o.x;
12426 
 
12427 
          xi = - (a1 - a2) / (b1 - b2);
12428 
          yi = a1 + b1 * xi;
12429 
        }
12430 
        // dont count xi < point.x cases
12431 
        if (xi >= point.x) {
12432 
          xcount += 1;
12433 
        }
12434 
        // optimisation 4: specific for square images
12435 
        if (xcount === 2) {
12436 
          break;
12437 
        }
12438 
      }
12439 
      return xcount;
12440 
    },
12441 
 
12442 
    /**
12443 
     * Returns width of an object's bounding rectangle
12444 
     * @deprecated since 1.0.4
12445 
     * @return {Number} width value
12446 
     */
12447 
    getBoundingRectWidth: function() {
12448 
      return this.getBoundingRect().width;
12449 
    },
12450 
 
12451 
    /**
12452 
     * Returns height of an object's bounding rectangle
12453 
     * @deprecated since 1.0.4
12454 
     * @return {Number} height value
12455 
     */
12456 
    getBoundingRectHeight: function() {
12457 
      return this.getBoundingRect().height;
12458 
    },
12459 
 
12460 
    /**
12461 
     * Returns coordinates of object's bounding rectangle (left, top, width, height)
12462 
     * @return {Object} Object with left, top, width, height properties
12463 
     */
12464 
    getBoundingRect: function() {
12465 
      this.oCoords || this.setCoords();
12466 
 
12467 
      var xCoords = [this.oCoords.tl.x, this.oCoords.tr.x, this.oCoords.br.x, this.oCoords.bl.x],
12468 
          minX = fabric.util.array.min(xCoords),
12469 
          maxX = fabric.util.array.max(xCoords),
12470 
          width = Math.abs(minX - maxX),
12471 
 
12472 
          yCoords = [this.oCoords.tl.y, this.oCoords.tr.y, this.oCoords.br.y, this.oCoords.bl.y],
12473 
          minY = fabric.util.array.min(yCoords),
12474 
          maxY = fabric.util.array.max(yCoords),
12475 
          height = Math.abs(minY - maxY);
12476 
 
12477 
      return {
12478 
        left: minX,
12479 
        top: minY,
12480 
        width: width,
12481 
        height: height
12482 
      };
12483 
    },
12484 
 
12485 
    /**
12486 
     * Returns width of an object
12487 
     * @return {Number} width value
12488 
     */
12489 
    getWidth: function() {
12490 
      return this.width * this.scaleX;
12491 
    },
12492 
 
12493 
    /**
12494 
     * Returns height of an object
12495 
     * @return {Number} height value
12496 
     */
12497 
    getHeight: function() {
12498 
      return this.height * this.scaleY;
12499 
    },
12500 
 
12501 
    /**
12502 
     * Makes sure the scale is valid and modifies it if necessary
12503 
     * @private
12504 
     * @param {Number} value
12505 
     * @return {Number}
12506 
     */
12507 
    _constrainScale: function(value) {
12508 
      if (Math.abs(value) < this.minScaleLimit) {
12509 
        if (value < 0) {
12510 
          return -this.minScaleLimit;
12511 
        }
12512 
        else {
12513 
          return this.minScaleLimit;
12514 
        }
12515 
      }
12516 
      return value;
12517 
    },
12518 
 
12519 
    /**
12520 
     * Scales an object (equally by x and y)
12521 
     * @param {Number} value Scale factor
12522 
     * @return {fabric.Object} thisArg
12523 
     * @chainable
12524 
     */
12525 
    scale: function(value) {
12526 
      value = this._constrainScale(value);
12527 
 
12528 
      if (value < 0) {
12529 
        this.flipX = !this.flipX;
12530 
        this.flipY = !this.flipY;
12531 
        value *= -1;
12532 
      }
12533 
 
12534 
      this.scaleX = value;
12535 
      this.scaleY = value;
12536 
      this.setCoords();
12537 
      return this;
12538 
    },
12539 
 
12540 
    /**
12541 
     * Scales an object to a given width, with respect to bounding box (scaling by x/y equally)
12542 
     * @param {Number} value New width value
12543 
     * @return {fabric.Object} thisArg
12544 
     * @chainable
12545 
     */
12546 
    scaleToWidth: function(value) {
12547 
      // adjust to bounding rect factor so that rotated shapes would fit as well
12548 
      var boundingRectFactor = this.getBoundingRectWidth() / this.getWidth();
12549 
      return this.scale(value / this.width / boundingRectFactor);
12550 
    },
12551 
 
12552 
    /**
12553 
     * Scales an object to a given height, with respect to bounding box (scaling by x/y equally)
12554 
     * @param {Number} value New height value
12555 
     * @return {fabric.Object} thisArg
12556 
     * @chainable
12557 
     */
12558 
    scaleToHeight: function(value) {
12559 
      // adjust to bounding rect factor so that rotated shapes would fit as well
12560 
      var boundingRectFactor = this.getBoundingRectHeight() / this.getHeight();
12561 
      return this.scale(value / this.height / boundingRectFactor);
12562 
    },
12563 
 
12564 
    /**
12565 
     * Sets corner position coordinates based on current angle, width and height
12566 
     * See https://github.com/kangax/fabric.js/wiki/When-to-call-setCoords
12567 
     * @return {fabric.Object} thisArg
12568 
     * @chainable
12569 
     */
12570 
    setCoords: function() {
12571 
      var theta = degreesToRadians(this.angle),
12572 
          vpt = this.getViewportTransform(),
12573 
          f = function (p) {
12574 
            return fabric.util.transformPoint(p, vpt);
12575 
          },
12576 
          p = this._calculateCurrentDimensions(false),
12577 
          currentWidth = p.x, currentHeight = p.y;
12578 
 
12579 
      // If width is negative, make postive. Fixes path selection issue
12580 
      if (currentWidth < 0) {
12581 
        currentWidth = Math.abs(currentWidth);
12582 
      }
12583 
 
12584 
      var _hypotenuse = Math.sqrt(
12585 
            Math.pow(currentWidth / 2, 2) +
12586 
            Math.pow(currentHeight / 2, 2)),
12587 
 
12588 
          _angle = Math.atan(
12589 
            isFinite(currentHeight / currentWidth)
12590 
              ? currentHeight / currentWidth
12591 
              : 0),
12592 
 
12593 
          // offset added for rotate and scale actions
12594 
          offsetX = Math.cos(_angle + theta) * _hypotenuse,
12595 
          offsetY = Math.sin(_angle + theta) * _hypotenuse,
12596 
          sinTh = Math.sin(theta),
12597 
          cosTh = Math.cos(theta),
12598 
          coords = this.getCenterPoint(),
12599 
          wh = new fabric.Point(currentWidth, currentHeight),
12600 
          _tl =   new fabric.Point(coords.x - offsetX, coords.y - offsetY),
12601 
          _tr =   new fabric.Point(_tl.x + (wh.x * cosTh),   _tl.y + (wh.x * sinTh)),
12602 
          bl =  f(new fabric.Point(_tl.x - (wh.y * sinTh),   _tl.y + (wh.y * cosTh))),
12603 
          br  = f(new fabric.Point(_tr.x - (wh.y * sinTh),   _tr.y + (wh.y * cosTh))),
12604 
          tl  = f(_tl),
12605 
          tr  = f(_tr),
12606 
          ml  = new fabric.Point((tl.x + bl.x)/2, (tl.y + bl.y)/2),
12607 
          mt  = new fabric.Point((tr.x + tl.x)/2, (tr.y + tl.y)/2),
12608 
          mr  = new fabric.Point((br.x + tr.x)/2, (br.y + tr.y)/2),
12609 
          mb  = new fabric.Point((br.x + bl.x)/2, (br.y + bl.y)/2),
12610 
          mtr = new fabric.Point(mt.x + sinTh * this.rotatingPointOffset, mt.y - cosTh * this.rotatingPointOffset);
12611 
      // debugging
12612 
 
12613 
      /* setTimeout(function() {
12614 
         canvas.contextTop.fillStyle = 'green';
12615 
         canvas.contextTop.fillRect(mb.x, mb.y, 3, 3);
12616 
         canvas.contextTop.fillRect(bl.x, bl.y, 3, 3);
12617 
         canvas.contextTop.fillRect(br.x, br.y, 3, 3);
12618 
         canvas.contextTop.fillRect(tl.x, tl.y, 3, 3);
12619 
         canvas.contextTop.fillRect(tr.x, tr.y, 3, 3);
12620 
         canvas.contextTop.fillRect(ml.x, ml.y, 3, 3);
12621 
         canvas.contextTop.fillRect(mr.x, mr.y, 3, 3);
12622 
         canvas.contextTop.fillRect(mt.x, mt.y, 3, 3);
12623 
         canvas.contextTop.fillRect(mtr.x, mtr.y, 3, 3);
12624 
       }, 50); */
12625 
 
12626 
      this.oCoords = {
12627 
        // corners
12628 
        tl: tl, tr: tr, br: br, bl: bl,
12629 
        // middle
12630 
        ml: ml, mt: mt, mr: mr, mb: mb,
12631 
        // rotating point
12632 
        mtr: mtr
12633 
      };
12634 
 
12635 
      // set coordinates of the draggable boxes in the corners used to scale/rotate the image
12636 
      this._setCornerCoords && this._setCornerCoords();
12637 
 
12638 
      return this;
12639 
    }
12640 
  });
12641 
})();
12642 
 
12643 
 
12644 
fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ {
12645 
 
12646 
  /**
12647 
   * Moves an object to the bottom of the stack of drawn objects
12648 
   * @return {fabric.Object} thisArg
12649 
   * @chainable
12650 
   */
12651 
  sendToBack: function() {
12652 
    if (this.group) {
12653 
      fabric.StaticCanvas.prototype.sendToBack.call(this.group, this);
12654 
    }
12655 
    else {
12656 
      this.canvas.sendToBack(this);
12657 
    }
12658 
    return this;
12659 
  },
12660 
 
12661 
  /**
12662 
   * Moves an object to the top of the stack of drawn objects
12663 
   * @return {fabric.Object} thisArg
12664 
   * @chainable
12665 
   */
12666 
  bringToFront: function() {
12667 
    if (this.group) {
12668 
      fabric.StaticCanvas.prototype.bringToFront.call(this.group, this);
12669 
    }
12670 
    else {
12671 
      this.canvas.bringToFront(this);
12672 
    }
12673 
    return this;
12674 
  },
12675 
 
12676 
  /**
12677 
   * Moves an object down in stack of drawn objects
12678 
   * @param {Boolean} [intersecting] If `true`, send object behind next lower intersecting object
12679 
   * @return {fabric.Object} thisArg
12680 
   * @chainable
12681 
   */
12682 
  sendBackwards: function(intersecting) {
12683 
    if (this.group) {
12684 
      fabric.StaticCanvas.prototype.sendBackwards.call(this.group, this, intersecting);
12685 
    }
12686 
    else {
12687 
      this.canvas.sendBackwards(this, intersecting);
12688 
    }
12689 
    return this;
12690 
  },
12691 
 
12692 
  /**
12693 
   * Moves an object up in stack of drawn objects
12694 
   * @param {Boolean} [intersecting] If `true`, send object in front of next upper intersecting object
12695 
   * @return {fabric.Object} thisArg
12696 
   * @chainable
12697 
   */
12698 
  bringForward: function(intersecting) {
12699 
    if (this.group) {
12700 
      fabric.StaticCanvas.prototype.bringForward.call(this.group, this, intersecting);
12701 
    }
12702 
    else {
12703 
      this.canvas.bringForward(this, intersecting);
12704 
    }
12705 
    return this;
12706 
  },
12707 
 
12708 
  /**
12709 
   * Moves an object to specified level in stack of drawn objects
12710 
   * @param {Number} index New position of object
12711 
   * @return {fabric.Object} thisArg
12712 
   * @chainable
12713 
   */
12714 
  moveTo: function(index) {
12715 
    if (this.group) {
12716 
      fabric.StaticCanvas.prototype.moveTo.call(this.group, this, index);
12717 
    }
12718 
    else {
12719 
      this.canvas.moveTo(this, index);
12720 
    }
12721 
    return this;
12722 
  }
12723 
});
12724 
 
12725 
 
12726 
/* _TO_SVG_START_ */
12727 
fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ {
12728 
 
12729 
  /**
12730 
   * Returns styles-string for svg-export
12731 
   * @return {String}
12732 
   */
12733 
  getSvgStyles: function() {
12734 
 
12735 
    var fill = this.fill
12736 
          ? (this.fill.toLive ? 'url(#SVGID_' + this.fill.id + ')' : this.fill)
12737 
          : 'none',
12738 
        fillRule = this.fillRule,
12739 
        stroke = this.stroke
12740 
          ? (this.stroke.toLive ? 'url(#SVGID_' + this.stroke.id + ')' : this.stroke)
12741 
          : 'none',
12742 
 
12743 
        strokeWidth = this.strokeWidth ? this.strokeWidth : '0',
12744 
        strokeDashArray = this.strokeDashArray ? this.strokeDashArray.join(' ') : '',
12745 
        strokeLineCap = this.strokeLineCap ? this.strokeLineCap : 'butt',
12746 
        strokeLineJoin = this.strokeLineJoin ? this.strokeLineJoin : 'miter',
12747 
        strokeMiterLimit = this.strokeMiterLimit ? this.strokeMiterLimit : '4',
12748 
        opacity = typeof this.opacity !== 'undefined' ? this.opacity : '1',
12749 
 
12750 
        visibility = this.visible ? '' : ' visibility: hidden;',
12751 
        filter = this.shadow ? 'filter: url(#SVGID_' + this.shadow.id + ');' : '';
12752 
 
12753 
    return [
12754 
      'stroke: ', stroke, '; ',
12755 
      'stroke-width: ', strokeWidth, '; ',
12756 
      'stroke-dasharray: ', strokeDashArray, '; ',
12757 
      'stroke-linecap: ', strokeLineCap, '; ',
12758 
      'stroke-linejoin: ', strokeLineJoin, '; ',
12759 
      'stroke-miterlimit: ', strokeMiterLimit, '; ',
12760 
      'fill: ', fill, '; ',
12761 
      'fill-rule: ', fillRule, '; ',
12762 
      'opacity: ', opacity, ';',
12763 
      filter,
12764 
      visibility
12765 
    ].join('');
12766 
  },
12767 
 
12768 
  /**
12769 
   * Returns transform-string for svg-export
12770 
   * @return {String}
12771 
   */
12772 
  getSvgTransform: function() {
12773 
    if (this.group && this.group.type === 'path-group') {
12774 
      return '';
12775 
    }
12776 
    var toFixed = fabric.util.toFixed,
12777 
        angle = this.getAngle(),
12778 
        vpt = !this.canvas || this.canvas.svgViewportTransformation ? this.getViewportTransform() : [1, 0, 0, 1, 0, 0],
12779 
        center = fabric.util.transformPoint(this.getCenterPoint(), vpt),
12780 
 
12781 
        NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS,
12782 
 
12783 
        translatePart = this.type === 'path-group' ? '' : 'translate(' +
12784 
                          toFixed(center.x, NUM_FRACTION_DIGITS) +
12785 
                          ' ' +
12786 
                          toFixed(center.y, NUM_FRACTION_DIGITS) +
12787 
                        ')',
12788 
 
12789 
        anglePart = angle !== 0
12790 
          ? (' rotate(' + toFixed(angle, NUM_FRACTION_DIGITS) + ')')
12791 
          : '',
12792 
 
12793 
        scalePart = (this.scaleX === 1 && this.scaleY === 1 && vpt[0] === 1 && vpt[3] === 1)
12794 
          ? '' :
12795 
          (' scale(' +
12796 
            toFixed(this.scaleX * vpt[0], NUM_FRACTION_DIGITS) +
12797 
            ' ' +
12798 
            toFixed(this.scaleY * vpt[3], NUM_FRACTION_DIGITS) +
12799 
          ')'),
12800 
 
12801 
        addTranslateX = this.type === 'path-group' ? this.width * vpt[0] : 0,
12802 
 
12803 
        flipXPart = this.flipX ? ' matrix(-1 0 0 1 ' + addTranslateX + ' 0) ' : '',
12804 
 
12805 
        addTranslateY = this.type === 'path-group' ? this.height * vpt[3] : 0,
12806 
 
12807 
        flipYPart = this.flipY ? ' matrix(1 0 0 -1 0 ' + addTranslateY + ')' : '';
12808 
 
12809 
    return [
12810 
      translatePart, anglePart, scalePart, flipXPart, flipYPart
12811 
    ].join('');
12812 
  },
12813 
 
12814 
  /**
12815 
   * Returns transform-string for svg-export from the transform matrix of single elements
12816 
   * @return {String}
12817 
   */
12818 
  getSvgTransformMatrix: function() {
12819 
    return this.transformMatrix ? ' matrix(' + this.transformMatrix.join(' ') + ') ' : '';
12820 
  },
12821 
 
12822 
  /**
12823 
   * @private
12824 
   */
12825 
  _createBaseSVGMarkup: function() {
12826 
    var markup = [ ];
12827 
 
12828 
    if (this.fill && this.fill.toLive) {
12829 
      markup.push(this.fill.toSVG(this, false));
12830 
    }
12831 
    if (this.stroke && this.stroke.toLive) {
12832 
      markup.push(this.stroke.toSVG(this, false));
12833 
    }
12834 
    if (this.shadow) {
12835 
      markup.push(this.shadow.toSVG(this));
12836 
    }
12837 
    return markup;
12838 
  }
12839 
});
12840 
/* _TO_SVG_END_ */
12841 
 
12842 
 
12843 
/*
12844 
  Depends on `stateProperties`
12845 
*/
12846 
fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ {
12847 
 
12848 
  /**
12849 
   * Returns true if object state (one of its state properties) was changed
12850 
   * @return {Boolean} true if instance' state has changed since `{@link fabric.Object#saveState}` was called
12851 
   */
12852 
  hasStateChanged: function() {
12853 
    return this.stateProperties.some(function(prop) {
12854 
      return this.get(prop) !== this.originalState[prop];
12855 
    }, this);
12856 
  },
12857 
 
12858 
  /**
12859 
   * Saves state of an object
12860 
   * @param {Object} [options] Object with additional `stateProperties` array to include when saving state
12861 
   * @return {fabric.Object} thisArg
12862 
   */
12863 
  saveState: function(options) {
12864 
    this.stateProperties.forEach(function(prop) {
12865 
      this.originalState[prop] = this.get(prop);
12866 
    }, this);
12867 
 
12868 
    if (options && options.stateProperties) {
12869 
      options.stateProperties.forEach(function(prop) {
12870 
        this.originalState[prop] = this.get(prop);
12871 
      }, this);
12872 
    }
12873 
 
12874 
    return this;
12875 
  },
12876 
 
12877 
  /**
12878 
   * Setups state of an object
12879 
   * @return {fabric.Object} thisArg
12880 
   */
12881 
  setupState: function() {
12882 
    this.originalState = { };
12883 
    this.saveState();
12884 
 
12885 
    return this;
12886 
  }
12887 
});
12888 
 
12889 
 
12890 
(function() {
12891 
 
12892 
  var degreesToRadians = fabric.util.degreesToRadians,
12893 
      //jscs:disable requireCamelCaseOrUpperCaseIdentifiers
12894 
      isVML = function() { return typeof G_vmlCanvasManager !== 'undefined'; };
12895 
  //jscs:enable requireCamelCaseOrUpperCaseIdentifiers
12896 
 
12897 
  fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ {
12898 
 
12899 
    /**
12900 
     * The object interactivity controls.
12901 
     * @private
12902 
     */
12903 
    _controlsVisibility: null,
12904 
 
12905 
    /**
12906 
     * Determines which corner has been clicked
12907 
     * @private
12908 
     * @param {Object} pointer The pointer indicating the mouse position
12909 
     * @return {String|Boolean} corner code (tl, tr, bl, br, etc.), or false if nothing is found
12910 
     */
12911 
    _findTargetCorner: function(pointer) {
12912 
      if (!this.hasControls || !this.active) {
12913 
        return false;
12914 
      }
12915 
 
12916 
      var ex = pointer.x,
12917 
          ey = pointer.y,
12918 
          xPoints,
12919 
          lines;
12920 
 
12921 
      for (var i in this.oCoords) {
12922 
 
12923 
        if (!this.isControlVisible(i)) {
12924 
          continue;
12925 
        }
12926 
 
12927 
        if (i === 'mtr' && !this.hasRotatingPoint) {
12928 
          continue;
12929 
        }
12930 
 
12931 
        if (this.get('lockUniScaling') &&
12932 
           (i === 'mt' || i === 'mr' || i === 'mb' || i === 'ml')) {
12933 
          continue;
12934 
        }
12935 
 
12936 
        lines = this._getImageLines(this.oCoords[i].corner);
12937 
 
12938 
        // debugging
12939 
 
12940 
        // canvas.contextTop.fillRect(lines.bottomline.d.x, lines.bottomline.d.y, 2, 2);
12941 
        // canvas.contextTop.fillRect(lines.bottomline.o.x, lines.bottomline.o.y, 2, 2);
12942 
 
12943 
        // canvas.contextTop.fillRect(lines.leftline.d.x, lines.leftline.d.y, 2, 2);
12944 
        // canvas.contextTop.fillRect(lines.leftline.o.x, lines.leftline.o.y, 2, 2);
12945 
 
12946 
        // canvas.contextTop.fillRect(lines.topline.d.x, lines.topline.d.y, 2, 2);
12947 
        // canvas.contextTop.fillRect(lines.topline.o.x, lines.topline.o.y, 2, 2);
12948 
 
12949 
        // canvas.contextTop.fillRect(lines.rightline.d.x, lines.rightline.d.y, 2, 2);
12950 
        // canvas.contextTop.fillRect(lines.rightline.o.x, lines.rightline.o.y, 2, 2);
12951 
 
12952 
        xPoints = this._findCrossPoints({ x: ex, y: ey }, lines);
12953 
        if (xPoints !== 0 && xPoints % 2 === 1) {
12954 
          this.__corner = i;
12955 
          return i;
12956 
        }
12957 
      }
12958 
      return false;
12959 
    },
12960 
 
12961 
    /**
12962 
     * Sets the coordinates of the draggable boxes in the corners of
12963 
     * the image used to scale/rotate it.
12964 
     * @private
12965 
     */
12966 
    _setCornerCoords: function() {
12967 
      var coords = this.oCoords,
12968 
          newTheta = degreesToRadians(45 - this.angle),
12969 
          cornerHypotenuse = Math.sqrt(2 * Math.pow(this.cornerSize, 2)) / 2,
12970 
          cosHalfOffset = cornerHypotenuse * Math.cos(newTheta),
12971 
          sinHalfOffset = cornerHypotenuse * Math.sin(newTheta),
12972 
          x, y;
12973 
 
12974 
      for (var point in coords) {
12975 
        x = coords[point].x;
12976 
        y = coords[point].y;
12977 
        coords[point].corner = {
12978 
          tl: {
12979 
            x: x - sinHalfOffset,
12980 
            y: y - cosHalfOffset
12981 
          },
12982 
          tr: {
12983 
            x: x + cosHalfOffset,
12984 
            y: y - sinHalfOffset
12985 
          },
12986 
          bl: {
12987 
            x: x - cosHalfOffset,
12988 
            y: y + sinHalfOffset
12989 
          },
12990 
          br: {
12991 
            x: x + sinHalfOffset,
12992 
            y: y + cosHalfOffset
12993 
          }
12994 
        };
12995 
      }
12996 
    },
12997 
 
12998 
    _calculateCurrentDimensions: function(shouldTransform)  {
12999 
      var vpt = this.getViewportTransform(),
13000 
          strokeWidth = this.strokeWidth,
13001 
          w = this.width,
13002 
          h = this.height,
13003 
          capped = this.strokeLineCap === 'round' || this.strokeLineCap === 'square',
13004 
          vLine = this.type === 'line' && this.width === 0,
13005 
          hLine = this.type === 'line' && this.height === 0,
13006 
          sLine = vLine || hLine,
13007 
          strokeW = (capped && hLine) || !sLine,
13008 
          strokeH = (capped && vLine) || !sLine;
13009 
 
13010 
      if (vLine) {
13011 
        w = strokeWidth;
13012 
      }
13013 
      else if (hLine) {
13014 
        h = strokeWidth;
13015 
      }
13016 
      if (strokeW) {
13017 
        w += (w < 0 ? -strokeWidth : strokeWidth);
13018 
      }
13019 
      if (strokeH) {
13020 
        h += (h < 0 ? -strokeWidth : strokeWidth);
13021 
      }
13022 
 
13023 
      w = w * this.scaleX + 2 * this.padding;
13024 
      h = h * this.scaleY + 2 * this.padding;
13025 
 
13026 
      if (shouldTransform) {
13027 
        return fabric.util.transformPoint(new fabric.Point(w, h), vpt, true);
13028 
      }
13029 
      return { x: w, y: h };
13030 
    },
13031 
 
13032 
    /**
13033 
     * Draws borders of an object's bounding box.
13034 
     * Requires public properties: width, height
13035 
     * Requires public options: padding, borderColor
13036 
     * @param {CanvasRenderingContext2D} ctx Context to draw on
13037 
     * @return {fabric.Object} thisArg
13038 
     * @chainable
13039 
     */
13040 
    drawBorders: function(ctx) {
13041 
      if (!this.hasBorders) {
13042 
        return this;
13043 
      }
13044 
 
13045 
      ctx.save();
13046 
 
13047 
      ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1;
13048 
      ctx.strokeStyle = this.borderColor;
13049 
      ctx.lineWidth = 1 / this.borderScaleFactor;
13050 
 
13051 
      var wh = this._calculateCurrentDimensions(true),
13052 
          width = wh.x,
13053 
          height = wh.y;
13054 
      if (this.group) {
13055 
        width = width * this.group.scaleX;
13056 
        height = height * this.group.scaleY;
13057 
      }
13058 
 
13059 
      ctx.strokeRect(
13060 
        ~~(-(width / 2)) - 0.5, // offset needed to make lines look sharper
13061 
        ~~(-(height / 2)) - 0.5,
13062 
        ~~(width) + 1, // double offset needed to make lines look sharper
13063 
        ~~(height) + 1
13064 
      );
13065 
 
13066 
      if (this.hasRotatingPoint && this.isControlVisible('mtr') && !this.get('lockRotation') && this.hasControls) {
13067 
 
13068 
        var rotateHeight = -height / 2;
13069 
 
13070 
        ctx.beginPath();
13071 
        ctx.moveTo(0, rotateHeight);
13072 
        ctx.lineTo(0, rotateHeight - this.rotatingPointOffset);
13073 
        ctx.closePath();
13074 
        ctx.stroke();
13075 
      }
13076 
 
13077 
      ctx.restore();
13078 
      return this;
13079 
    },
13080 
 
13081 
    /**
13082 
     * Draws corners of an object's bounding box.
13083 
     * Requires public properties: width, height
13084 
     * Requires public options: cornerSize, padding
13085 
     * @param {CanvasRenderingContext2D} ctx Context to draw on
13086 
     * @return {fabric.Object} thisArg
13087 
     * @chainable
13088 
     */
13089 
    drawControls: function(ctx) {
13090 
      if (!this.hasControls) {
13091 
        return this;
13092 
      }
13093 
 
13094 
      var wh = this._calculateCurrentDimensions(true),
13095 
          width = wh.x,
13096 
          height = wh.y,
13097 
          left = -(width / 2),
13098 
          top = -(height / 2),
13099 
          scaleOffset = this.cornerSize / 2,
13100 
          methodName = this.transparentCorners ? 'strokeRect' : 'fillRect';
13101 
 
13102 
      ctx.save();
13103 
 
13104 
      ctx.lineWidth = 1;
13105 
 
13106 
      ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1;
13107 
      ctx.strokeStyle = ctx.fillStyle = this.cornerColor;
13108 
 
13109 
      // top-left
13110 
      this._drawControl('tl', ctx, methodName,
13111 
        left - scaleOffset,
13112 
        top - scaleOffset);
13113 
 
13114 
      // top-right
13115 
      this._drawControl('tr', ctx, methodName,
13116 
        left + width - scaleOffset,
13117 
        top - scaleOffset);
13118 
 
13119 
      // bottom-left
13120 
      this._drawControl('bl', ctx, methodName,
13121 
        left - scaleOffset,
13122 
        top + height - scaleOffset);
13123 
 
13124 
      // bottom-right
13125 
      this._drawControl('br', ctx, methodName,
13126 
        left + width - scaleOffset,
13127 
        top + height - scaleOffset);
13128 
 
13129 
      if (!this.get('lockUniScaling')) {
13130 
 
13131 
        // middle-top
13132 
        this._drawControl('mt', ctx, methodName,
13133 
          left + width/2 - scaleOffset,
13134 
          top - scaleOffset);
13135 
 
13136 
        // middle-bottom
13137 
        this._drawControl('mb', ctx, methodName,
13138 
          left + width/2 - scaleOffset,
13139 
          top + height - scaleOffset);
13140 
 
13141 
        // middle-right
13142 
        this._drawControl('mr', ctx, methodName,
13143 
          left + width - scaleOffset,
13144 
          top + height/2 - scaleOffset);
13145 
 
13146 
        // middle-left
13147 
        this._drawControl('ml', ctx, methodName,
13148 
          left - scaleOffset,
13149 
          top + height/2 - scaleOffset);
13150 
      }
13151 
 
13152 
      // middle-top-rotate
13153 
      if (this.hasRotatingPoint) {
13154 
        this._drawControl('mtr', ctx, methodName,
13155 
          left + width/2 - scaleOffset,
13156 
          top - this.rotatingPointOffset - scaleOffset);
13157 
      }
13158 
 
13159 
      ctx.restore();
13160 
 
13161 
      return this;
13162 
    },
13163 
 
13164 
    /**
13165 
     * @private
13166 
     */
13167 
    _drawControl: function(control, ctx, methodName, left, top) {
13168 
      if (!this.isControlVisible(control)) {
13169 
        return;
13170 
      }
13171 
      var size = this.cornerSize;
13172 
      isVML() || this.transparentCorners || ctx.clearRect(left, top, size, size);
13173 
      ctx[methodName](left, top, size, size);
13174 
    },
13175 
 
13176 
    /**
13177 
     * Returns true if the specified control is visible, false otherwise.
13178 
     * @param {String} controlName The name of the control. Possible values are 'tl', 'tr', 'br', 'bl', 'ml', 'mt', 'mr', 'mb', 'mtr'.
13179 
     * @returns {Boolean} true if the specified control is visible, false otherwise
13180 
     */
13181 
    isControlVisible: function(controlName) {
13182 
      return this._getControlsVisibility()[controlName];
13183 
    },
13184 
 
13185 
    /**
13186 
     * Sets the visibility of the specified control.
13187 
     * @param {String} controlName The name of the control. Possible values are 'tl', 'tr', 'br', 'bl', 'ml', 'mt', 'mr', 'mb', 'mtr'.
13188 
     * @param {Boolean} visible true to set the specified control visible, false otherwise
13189 
     * @return {fabric.Object} thisArg
13190 
     * @chainable
13191 
     */
13192 
    setControlVisible: function(controlName, visible) {
13193 
      this._getControlsVisibility()[controlName] = visible;
13194 
      return this;
13195 
    },
13196 
 
13197 
    /**
13198 
     * Sets the visibility state of object controls.
13199 
     * @param {Object} [options] Options object
13200 
     * @param {Boolean} [options.bl] true to enable the bottom-left control, false to disable it
13201 
     * @param {Boolean} [options.br] true to enable the bottom-right control, false to disable it
13202 
     * @param {Boolean} [options.mb] true to enable the middle-bottom control, false to disable it
13203 
     * @param {Boolean} [options.ml] true to enable the middle-left control, false to disable it
13204 
     * @param {Boolean} [options.mr] true to enable the middle-right control, false to disable it
13205 
     * @param {Boolean} [options.mt] true to enable the middle-top control, false to disable it
13206 
     * @param {Boolean} [options.tl] true to enable the top-left control, false to disable it
13207 
     * @param {Boolean} [options.tr] true to enable the top-right control, false to disable it
13208 
     * @param {Boolean} [options.mtr] true to enable the middle-top-rotate control, false to disable it
13209 
     * @return {fabric.Object} thisArg
13210 
     * @chainable
13211 
     */
13212 
    setControlsVisibility: function(options) {
13213 
      options || (options = { });
13214 
 
13215 
      for (var p in options) {
13216 
        this.setControlVisible(p, options[p]);
13217 
      }
13218 
      return this;
13219 
    },
13220 
 
13221 
    /**
13222 
     * Returns the instance of the control visibility set for this object.
13223 
     * @private
13224 
     * @returns {Object}
13225 
     */
13226 
    _getControlsVisibility: function() {
13227 
      if (!this._controlsVisibility) {
13228 
        this._controlsVisibility = {
13229 
          tl: true,
13230 
          tr: true,
13231 
          br: true,
13232 
          bl: true,
13233 
          ml: true,
13234 
          mt: true,
13235 
          mr: true,
13236 
          mb: true,
13237 
          mtr: true
13238 
        };
13239 
      }
13240 
      return this._controlsVisibility;
13241 
    }
13242 
  });
13243 
})();
13244 
 
13245 
 
13246 
fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ {
13247 
 
13248 
  /**
13249 
   * Animation duration (in ms) for fx* methods
13250 
   * @type Number
13251 
   * @default
13252 
   */
13253 
  FX_DURATION: 500,
13254 
 
13255 
  /**
13256 
   * Centers object horizontally with animation.
13257 
   * @param {fabric.Object} object Object to center
13258 
   * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties
13259 
   * @param {Function} [callbacks.onComplete] Invoked on completion
13260 
   * @param {Function} [callbacks.onChange] Invoked on every step of animation
13261 
   * @return {fabric.Canvas} thisArg
13262 
   * @chainable
13263 
   */
13264 
  fxCenterObjectH: function (object, callbacks) {
13265 
    callbacks = callbacks || { };
13266 
 
13267 
    var empty = function() { },
13268 
        onComplete = callbacks.onComplete || empty,
13269 
        onChange = callbacks.onChange || empty,
13270 
        _this = this;
13271 
 
13272 
    fabric.util.animate({
13273 
      startValue: object.get('left'),
13274 
      endValue: this.getCenter().left,
13275 
      duration: this.FX_DURATION,
13276 
      onChange: function(value) {
13277 
        object.set('left', value);
13278 
        _this.renderAll();
13279 
        onChange();
13280 
      },
13281 
      onComplete: function() {
13282 
        object.setCoords();
13283 
        onComplete();
13284 
      }
13285 
    });
13286 
 
13287 
    return this;
13288 
  },
13289 
 
13290 
  /**
13291 
   * Centers object vertically with animation.
13292 
   * @param {fabric.Object} object Object to center
13293 
   * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties
13294 
   * @param {Function} [callbacks.onComplete] Invoked on completion
13295 
   * @param {Function} [callbacks.onChange] Invoked on every step of animation
13296 
   * @return {fabric.Canvas} thisArg
13297 
   * @chainable
13298 
   */
13299 
  fxCenterObjectV: function (object, callbacks) {
13300 
    callbacks = callbacks || { };
13301 
 
13302 
    var empty = function() { },
13303 
        onComplete = callbacks.onComplete || empty,
13304 
        onChange = callbacks.onChange || empty,
13305 
        _this = this;
13306 
 
13307 
    fabric.util.animate({
13308 
      startValue: object.get('top'),
13309 
      endValue: this.getCenter().top,
13310 
      duration: this.FX_DURATION,
13311 
      onChange: function(value) {
13312 
        object.set('top', value);
13313 
        _this.renderAll();
13314 
        onChange();
13315 
      },
13316 
      onComplete: function() {
13317 
        object.setCoords();
13318 
        onComplete();
13319 
      }
13320 
    });
13321 
 
13322 
    return this;
13323 
  },
13324 
 
13325 
  /**
13326 
   * Same as `fabric.Canvas#remove` but animated
13327 
   * @param {fabric.Object} object Object to remove
13328 
   * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties
13329 
   * @param {Function} [callbacks.onComplete] Invoked on completion
13330 
   * @param {Function} [callbacks.onChange] Invoked on every step of animation
13331 
   * @return {fabric.Canvas} thisArg
13332 
   * @chainable
13333 
   */
13334 
  fxRemove: function (object, callbacks) {
13335 
    callbacks = callbacks || { };
13336 
 
13337 
    var empty = function() { },
13338 
        onComplete = callbacks.onComplete || empty,
13339 
        onChange = callbacks.onChange || empty,
13340 
        _this = this;
13341 
 
13342 
    fabric.util.animate({
13343 
      startValue: object.get('opacity'),
13344 
      endValue: 0,
13345 
      duration: this.FX_DURATION,
13346 
      onStart: function() {
13347 
        object.set('active', false);
13348 
      },
13349 
      onChange: function(value) {
13350 
        object.set('opacity', value);
13351 
        _this.renderAll();
13352 
        onChange();
13353 
      },
13354 
      onComplete: function () {
13355 
        _this.remove(object);
13356 
        onComplete();
13357 
      }
13358 
    });
13359 
 
13360 
    return this;
13361 
  }
13362 
});
13363 
 
13364 
fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ {
13365 
  /**
13366 
   * Animates object's properties
13367 
   * @param {String|Object} property Property to animate (if string) or properties to animate (if object)
13368 
   * @param {Number|Object} value Value to animate property to (if string was given first) or options object
13369 
   * @return {fabric.Object} thisArg
13370 
   * @tutorial {@link http://fabricjs.com/fabric-intro-part-2/#animation}
13371 
   * @chainable
13372 
   *
13373 
   * As object — multiple properties
13374 
   *
13375 
   * object.animate({ left: ..., top: ... });
13376 
   * object.animate({ left: ..., top: ... }, { duration: ... });
13377 
   *
13378 
   * As string — one property
13379 
   *
13380 
   * object.animate('left', ...);
13381 
   * object.animate('left', { duration: ... });
13382 
   *
13383 
   */
13384 
  animate: function() {
13385 
    if (arguments[0] && typeof arguments[0] === 'object') {
13386 
      var propsToAnimate = [ ], prop, skipCallbacks;
13387 
      for (prop in arguments[0]) {
13388 
        propsToAnimate.push(prop);
13389 
      }
13390 
      for (var i = 0, len = propsToAnimate.length; i < len; i++) {
13391 
        prop = propsToAnimate[i];
13392 
        skipCallbacks = i !== len - 1;
13393 
        this._animate(prop, arguments[0][prop], arguments[1], skipCallbacks);
13394 
      }
13395 
    }
13396 
    else {
13397 
      this._animate.apply(this, arguments);
13398 
    }
13399 
    return this;
13400 
  },
13401 
 
13402 
  /**
13403 
   * @private
13404 
   * @param {String} property Property to animate
13405 
   * @param {String} to Value to animate to
13406 
   * @param {Object} [options] Options object
13407 
   * @param {Boolean} [skipCallbacks] When true, callbacks like onchange and oncomplete are not invoked
13408 
   */
13409 
  _animate: function(property, to, options, skipCallbacks) {
13410 
    var _this = this, propPair;
13411 
 
13412 
    to = to.toString();
13413 
 
13414 
    if (!options) {
13415 
      options = { };
13416 
    }
13417 
    else {
13418 
      options = fabric.util.object.clone(options);
13419 
    }
13420 
 
13421 
    if (~property.indexOf('.')) {
13422 
      propPair = property.split('.');
13423 
    }
13424 
 
13425 
    var currentValue = propPair
13426 
      ? this.get(propPair[0])[propPair[1]]
13427 
      : this.get(property);
13428 
 
13429 
    if (!('from' in options)) {
13430 
      options.from = currentValue;
13431 
    }
13432 
 
13433 
    if (~to.indexOf('=')) {
13434 
      to = currentValue + parseFloat(to.replace('=', ''));
13435 
    }
13436 
    else {
13437 
      to = parseFloat(to);
13438 
    }
13439 
 
13440 
    fabric.util.animate({
13441 
      startValue: options.from,
13442 
      endValue: to,
13443 
      byValue: options.by,
13444 
      easing: options.easing,
13445 
      duration: options.duration,
13446 
      abort: options.abort && function() {
13447 
        return options.abort.call(_this);
13448 
      },
13449 
      onChange: function(value) {
13450 
        if (propPair) {
13451 
          _this[propPair[0]][propPair[1]] = value;
13452 
        }
13453 
        else {
13454 
          _this.set(property, value);
13455 
        }
13456 
        if (skipCallbacks) {
13457 
          return;
13458 
        }
13459 
        options.onChange && options.onChange();
13460 
      },
13461 
      onComplete: function() {
13462 
        if (skipCallbacks) {
13463 
          return;
13464 
        }
13465 
 
13466 
        _this.setCoords();
13467 
        options.onComplete && options.onComplete();
13468 
      }
13469 
    });
13470 
  }
13471 
});
13472 
 
13473 
 
13474 
(function(global) {
13475 
 
13476 
  'use strict';
13477 
 
13478 
  var fabric = global.fabric || (global.fabric = { }),
13479 
      extend = fabric.util.object.extend,
13480 
      coordProps = { x1: 1, x2: 1, y1: 1, y2: 1 },
13481 
      supportsLineDash = fabric.StaticCanvas.supports('setLineDash');
13482 
 
13483 
  if (fabric.Line) {
13484 
    fabric.warn('fabric.Line is already defined');
13485 
    return;
13486 
  }
13487 
 
13488 
  /**
13489 
   * Line class
13490 
   * @class fabric.Line
13491 
   * @extends fabric.Object
13492 
   * @see {@link fabric.Line#initialize} for constructor definition
13493 
   */
13494 
  fabric.Line = fabric.util.createClass(fabric.Object, /** @lends fabric.Line.prototype */ {
13495 
 
13496 
    /**
13497 
     * Type of an object
13498 
     * @type String
13499 
     * @default
13500 
     */
13501 
    type: 'line',
13502 
 
13503 
    /**
13504 
     * x value or first line edge
13505 
     * @type Number
13506 
     * @default
13507 
     */
13508 
    x1: 0,
13509 
 
13510 
    /**
13511 
     * y value or first line edge
13512 
     * @type Number
13513 
     * @default
13514 
     */
13515 
    y1: 0,
13516 
 
13517 
    /**
13518 
     * x value or second line edge
13519 
     * @type Number
13520 
     * @default
13521 
     */
13522 
    x2: 0,
13523 
 
13524 
    /**
13525 
     * y value or second line edge
13526 
     * @type Number
13527 
     * @default
13528 
     */
13529 
    y2: 0,
13530 
 
13531 
    /**
13532 
     * Constructor
13533 
     * @param {Array} [points] Array of points
13534 
     * @param {Object} [options] Options object
13535 
     * @return {fabric.Line} thisArg
13536 
     */
13537 
    initialize: function(points, options) {
13538 
      options = options || { };
13539 
 
13540 
      if (!points) {
13541 
        points = [0, 0, 0, 0];
13542 
      }
13543 
 
13544 
      this.callSuper('initialize', options);
13545 
 
13546 
      this.set('x1', points[0]);
13547 
      this.set('y1', points[1]);
13548 
      this.set('x2', points[2]);
13549 
      this.set('y2', points[3]);
13550 
 
13551 
      this._setWidthHeight(options);
13552 
    },
13553 
 
13554 
    /**
13555 
     * @private
13556 
     * @param {Object} [options] Options
13557 
     */
13558 
    _setWidthHeight: function(options) {
13559 
      options || (options = { });
13560 
 
13561 
      this.width = Math.abs(this.x2 - this.x1);
13562 
      this.height = Math.abs(this.y2 - this.y1);
13563 
 
13564 
      this.left = 'left' in options
13565 
        ? options.left
13566 
        : this._getLeftToOriginX();
13567 
 
13568 
      this.top = 'top' in options
13569 
        ? options.top
13570 
        : this._getTopToOriginY();
13571 
    },
13572 
 
13573 
    /**
13574 
     * @private
13575 
     * @param {String} key
13576 
     * @param {Any} value
13577 
     */
13578 
    _set: function(key, value) {
13579 
      this.callSuper('_set', key, value);
13580 
      if (typeof coordProps[key] !== 'undefined') {
13581 
        this._setWidthHeight();
13582 
      }
13583 
      return this;
13584 
    },
13585 
 
13586 
    /**
13587 
     * @private
13588 
     * @return {Number} leftToOriginX Distance from left edge of canvas to originX of Line.
13589 
     */
13590 
    _getLeftToOriginX: makeEdgeToOriginGetter(
13591 
      { // property names
13592 
        origin: 'originX',
13593 
        axis1: 'x1',
13594 
        axis2: 'x2',
13595 
        dimension: 'width'
13596 
      },
13597 
      { // possible values of origin
13598 
        nearest: 'left',
13599 
        center: 'center',
13600 
        farthest: 'right'
13601 
      }
13602 
    ),
13603 
 
13604 
    /**
13605 
     * @private
13606 
     * @return {Number} topToOriginY Distance from top edge of canvas to originY of Line.
13607 
     */
13608 
    _getTopToOriginY: makeEdgeToOriginGetter(
13609 
      { // property names
13610 
        origin: 'originY',
13611 
        axis1: 'y1',
13612 
        axis2: 'y2',
13613 
        dimension: 'height'
13614 
      },
13615 
      { // possible values of origin
13616 
        nearest: 'top',
13617 
        center: 'center',
13618 
        farthest: 'bottom'
13619 
      }
13620 
    ),
13621 
 
13622 
    /**
13623 
     * @private
13624 
     * @param {CanvasRenderingContext2D} ctx Context to render on
13625 
     */
13626 
    _render: function(ctx, noTransform) {
13627 
      ctx.beginPath();
13628 
 
13629 
      if (noTransform) {
13630 
        //  Line coords are distances from left-top of canvas to origin of line.
13631 
        //  To render line in a path-group, we need to translate them to
13632 
        //  distances from center of path-group to center of line.
13633 
        var cp = this.getCenterPoint();
13634 
        ctx.translate(
13635 
          cp.x - this.strokeWidth / 2,
13636 
          cp.y - this.strokeWidth / 2
13637 
        );
13638 
      }
13639 
 
13640 
      if (!this.strokeDashArray || this.strokeDashArray && supportsLineDash) {
13641 
        // move from center (of virtual box) to its left/top corner
13642 
        // we can't assume x1, y1 is top left and x2, y2 is bottom right
13643 
        var p = this.calcLinePoints();
13644 
        ctx.moveTo(p.x1, p.y1);
13645 
        ctx.lineTo(p.x2, p.y2);
13646 
      }
13647 
 
13648 
      ctx.lineWidth = this.strokeWidth;
13649 
 
13650 
      // TODO: test this
13651 
      // make sure setting "fill" changes color of a line
13652 
      // (by copying fillStyle to strokeStyle, since line is stroked, not filled)
13653 
      var origStrokeStyle = ctx.strokeStyle;
13654 
      ctx.strokeStyle = this.stroke || ctx.fillStyle;
13655 
      this.stroke && this._renderStroke(ctx);
13656 
      ctx.strokeStyle = origStrokeStyle;
13657 
    },
13658 
 
13659 
    /**
13660 
     * @private
13661 
     * @param {CanvasRenderingContext2D} ctx Context to render on
13662 
     */
13663 
    _renderDashedStroke: function(ctx) {
13664 
      var p = this.calcLinePoints();
13665 
 
13666 
      ctx.beginPath();
13667 
      fabric.util.drawDashedLine(ctx, p.x1, p.y1, p.x2, p.y2, this.strokeDashArray);
13668 
      ctx.closePath();
13669 
    },
13670 
 
13671 
    /**
13672 
     * Returns object representation of an instance
13673 
     * @methd toObject
13674 
     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
13675 
     * @return {Object} object representation of an instance
13676 
     */
13677 
    toObject: function(propertiesToInclude) {
13678 
      return extend(this.callSuper('toObject', propertiesToInclude), this.calcLinePoints());
13679 
    },
13680 
 
13681 
    /**
13682 
     * Recalculates line points given width and height
13683 
     * @private
13684 
     */
13685 
    calcLinePoints: function() {
13686 
      var xMult = this.x1 <= this.x2 ? -1 : 1,
13687 
          yMult = this.y1 <= this.y2 ? -1 : 1,
13688 
          x1 = (xMult * this.width * 0.5),
13689 
          y1 = (yMult * this.height * 0.5),
13690 
          x2 = (xMult * this.width * -0.5),
13691 
          y2 = (yMult * this.height * -0.5);
13692 
 
13693 
      return {
13694 
        x1: x1,
13695 
        x2: x2,
13696 
        y1: y1,
13697 
        y2: y2
13698 
      };
13699 
    },
13700 
 
13701 
    /* _TO_SVG_START_ */
13702 
    /**
13703 
     * Returns SVG representation of an instance
13704 
     * @param {Function} [reviver] Method for further parsing of svg representation.
13705 
     * @return {String} svg representation of an instance
13706 
     */
13707 
    toSVG: function(reviver) {
13708 
      var markup = this._createBaseSVGMarkup(),
13709 
          p = { x1: this.x1, x2: this.x2, y1: this.y1, y2: this.y2 };
13710 
 
13711 
      if (!(this.group && this.group.type === 'path-group')) {
13712 
        p = this.calcLinePoints();
13713 
      }
13714 
      markup.push(
13715 
        '<line ',
13716 
          'x1="', p.x1,
13717 
          '" y1="', p.y1,
13718 
          '" x2="', p.x2,
13719 
          '" y2="', p.y2,
13720 
          '" style="', this.getSvgStyles(),
13721 
          '" transform="', this.getSvgTransform(),
13722 
          this.getSvgTransformMatrix(),
13723 
        '"/>\n'
13724 
      );
13725 
 
13726 
      return reviver ? reviver(markup.join('')) : markup.join('');
13727 
    },
13728 
    /* _TO_SVG_END_ */
13729 
 
13730 
    /**
13731 
     * Returns complexity of an instance
13732 
     * @return {Number} complexity
13733 
     */
13734 
    complexity: function() {
13735 
      return 1;
13736 
    }
13737 
  });
13738 
 
13739 
  /* _FROM_SVG_START_ */
13740 
  /**
13741 
   * List of attribute names to account for when parsing SVG element (used by {@link fabric.Line.fromElement})
13742 
   * @static
13743 
   * @memberOf fabric.Line
13744 
   * @see http://www.w3.org/TR/SVG/shapes.html#LineElement
13745 
   */
13746 
  fabric.Line.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('x1 y1 x2 y2'.split(' '));
13747 
 
13748 
  /**
13749 
   * Returns fabric.Line instance from an SVG element
13750 
   * @static
13751 
   * @memberOf fabric.Line
13752 
   * @param {SVGElement} element Element to parse
13753 
   * @param {Object} [options] Options object
13754 
   * @return {fabric.Line} instance of fabric.Line
13755 
   */
13756 
  fabric.Line.fromElement = function(element, options) {
13757 
    var parsedAttributes = fabric.parseAttributes(element, fabric.Line.ATTRIBUTE_NAMES),
13758 
        points = [
13759 
          parsedAttributes.x1 || 0,
13760 
          parsedAttributes.y1 || 0,
13761 
          parsedAttributes.x2 || 0,
13762 
          parsedAttributes.y2 || 0
13763 
        ];
13764 
    return new fabric.Line(points, extend(parsedAttributes, options));
13765 
  };
13766 
  /* _FROM_SVG_END_ */
13767 
 
13768 
  /**
13769 
   * Returns fabric.Line instance from an object representation
13770 
   * @static
13771 
   * @memberOf fabric.Line
13772 
   * @param {Object} object Object to create an instance from
13773 
   * @return {fabric.Line} instance of fabric.Line
13774 
   */
13775 
  fabric.Line.fromObject = function(object) {
13776 
    var points = [object.x1, object.y1, object.x2, object.y2];
13777 
    return new fabric.Line(points, object);
13778 
  };
13779 
 
13780 
  /**
13781 
   * Produces a function that calculates distance from canvas edge to Line origin.
13782 
   */
13783 
  function makeEdgeToOriginGetter(propertyNames, originValues) {
13784 
    var origin = propertyNames.origin,
13785 
        axis1 = propertyNames.axis1,
13786 
        axis2 = propertyNames.axis2,
13787 
        dimension = propertyNames.dimension,
13788 
        nearest = originValues.nearest,
13789 
        center = originValues.center,
13790 
        farthest = originValues.farthest;
13791 
 
13792 
    return function() {
13793 
      switch (this.get(origin)) {
13794 
      case nearest:
13795 
        return Math.min(this.get(axis1), this.get(axis2));
13796 
      case center:
13797 
        return Math.min(this.get(axis1), this.get(axis2)) + (0.5 * this.get(dimension));
13798 
      case farthest:
13799 
        return Math.max(this.get(axis1), this.get(axis2));
13800 
      }
13801 
    };
13802 
 
13803 
  }
13804 
 
13805 
})(typeof exports !== 'undefined' ? exports : this);
13806 
 
13807 
 
13808 
(function(global) {
13809 
 
13810 
  'use strict';
13811 
 
13812 
  var fabric = global.fabric || (global.fabric = { }),
13813 
      pi = Math.PI,
13814 
      extend = fabric.util.object.extend;
13815 
 
13816 
  if (fabric.Circle) {
13817 
    fabric.warn('fabric.Circle is already defined.');
13818 
    return;
13819 
  }
13820 
 
13821 
  /**
13822 
   * Circle class
13823 
   * @class fabric.Circle
13824 
   * @extends fabric.Object
13825 
   * @see {@link fabric.Circle#initialize} for constructor definition
13826 
   */
13827 
  fabric.Circle = fabric.util.createClass(fabric.Object, /** @lends fabric.Circle.prototype */ {
13828 
 
13829 
    /**
13830 
     * Type of an object
13831 
     * @type String
13832 
     * @default
13833 
     */
13834 
    type: 'circle',
13835 
 
13836 
    /**
13837 
     * Radius of this circle
13838 
     * @type Number
13839 
     * @default
13840 
     */
13841 
    radius: 0,
13842 
 
13843 
    /**
13844 
     * Start angle of the circle, moving clockwise
13845 
     * @type Number
13846 
     * @default 0
13847 
     */
13848 
    startAngle: 0,
13849 
 
13850 
    /**
13851 
     * End angle of the circle
13852 
     * @type Number
13853 
     * @default 2Pi
13854 
     */
13855 
    endAngle: pi * 2,
13856 
 
13857 
    /**
13858 
     * Constructor
13859 
     * @param {Object} [options] Options object
13860 
     * @return {fabric.Circle} thisArg
13861 
     */
13862 
    initialize: function(options) {
13863 
      options = options || { };
13864 
 
13865 
      this.callSuper('initialize', options);
13866 
      this.set('radius', options.radius || 0);
13867 
      this.startAngle = options.startAngle || this.startAngle;
13868 
      this.endAngle = options.endAngle || this.endAngle;
13869 
    },
13870 
 
13871 
    /**
13872 
     * @private
13873 
     * @param {String} key
13874 
     * @param {Any} value
13875 
     * @return {fabric.Circle} thisArg
13876 
     */
13877 
    _set: function(key, value) {
13878 
      this.callSuper('_set', key, value);
13879 
 
13880 
      if (key === 'radius') {
13881 
        this.setRadius(value);
13882 
      }
13883 
 
13884 
      return this;
13885 
    },
13886 
 
13887 
    /**
13888 
     * Returns object representation of an instance
13889 
     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
13890 
     * @return {Object} object representation of an instance
13891 
     */
13892 
    toObject: function(propertiesToInclude) {
13893 
      return extend(this.callSuper('toObject', propertiesToInclude), {
13894 
        radius: this.get('radius'),
13895 
        startAngle: this.startAngle,
13896 
        endAngle: this.endAngle
13897 
      });
13898 
    },
13899 
 
13900 
    /* _TO_SVG_START_ */
13901 
    /**
13902 
     * Returns svg representation of an instance
13903 
     * @param {Function} [reviver] Method for further parsing of svg representation.
13904 
     * @return {String} svg representation of an instance
13905 
     */
13906 
    toSVG: function(reviver) {
13907 
      var markup = this._createBaseSVGMarkup(), x = 0, y = 0,
13908 
      angle = (this.endAngle - this.startAngle) % ( 2 * pi);
13909 
 
13910 
      if (angle === 0) {
13911 
        if (this.group && this.group.type === 'path-group') {
13912 
          x = this.left + this.radius;
13913 
          y = this.top + this.radius;
13914 
        }
13915 
        markup.push(
13916 
          '<circle ',
13917 
            'cx="' + x + '" cy="' + y + '" ',
13918 
            'r="', this.radius,
13919 
            '" style="', this.getSvgStyles(),
13920 
            '" transform="', this.getSvgTransform(),
13921 
            ' ', this.getSvgTransformMatrix(),
13922 
          '"/>\n'
13923 
        );
13924 
      }
13925 
      else {
13926 
        var startX = Math.cos(this.startAngle) * this.radius,
13927 
            startY = Math.sin(this.startAngle) * this.radius,
13928 
            endX = Math.cos(this.endAngle) * this.radius,
13929 
            endY = Math.sin(this.endAngle) * this.radius,
13930 
            largeFlag = angle > pi ? '1' : '0';
13931 
 
13932 
        markup.push(
13933 
          '<path d="M ' + startX + ' ' + startY,
13934 
          ' A ' + this.radius + ' ' + this.radius,
13935 
          ' 0 ', + largeFlag + ' 1', ' ' + endX + ' ' + endY,
13936 
          '" style="', this.getSvgStyles(),
13937 
          '" transform="', this.getSvgTransform(),
13938 
          ' ', this.getSvgTransformMatrix(),
13939 
          '"/>\n'
13940 
        );
13941 
      }
13942 
 
13943 
      return reviver ? reviver(markup.join('')) : markup.join('');
13944 
    },
13945 
    /* _TO_SVG_END_ */
13946 
 
13947 
    /**
13948 
     * @private
13949 
     * @param {CanvasRenderingContext2D} ctx context to render on
13950 
     * @param {Boolean} [noTransform] When true, context is not transformed
13951 
     */
13952 
    _render: function(ctx, noTransform) {
13953 
      ctx.beginPath();
13954 
      ctx.arc(noTransform ? this.left + this.radius : 0,
13955 
              noTransform ? this.top + this.radius : 0,
13956 
              this.radius,
13957 
              this.startAngle,
13958 
              this.endAngle, false);
13959 
      this._renderFill(ctx);
13960 
      this._renderStroke(ctx);
13961 
    },
13962 
 
13963 
    /**
13964 
     * Returns horizontal radius of an object (according to how an object is scaled)
13965 
     * @return {Number}
13966 
     */
13967 
    getRadiusX: function() {
13968 
      return this.get('radius') * this.get('scaleX');
13969 
    },
13970 
 
13971 
    /**
13972 
     * Returns vertical radius of an object (according to how an object is scaled)
13973 
     * @return {Number}
13974 
     */
13975 
    getRadiusY: function() {
13976 
      return this.get('radius') * this.get('scaleY');
13977 
    },
13978 
 
13979 
    /**
13980 
     * Sets radius of an object (and updates width accordingly)
13981 
     * @return {Number}
13982 
     */
13983 
    setRadius: function(value) {
13984 
      this.radius = value;
13985 
      this.set('width', value * 2).set('height', value * 2);
13986 
    },
13987 
 
13988 
    /**
13989 
     * Returns complexity of an instance
13990 
     * @return {Number} complexity of this instance
13991 
     */
13992 
    complexity: function() {
13993 
      return 1;
13994 
    }
13995 
  });
13996 
 
13997 
  /* _FROM_SVG_START_ */
13998 
  /**
13999 
   * List of attribute names to account for when parsing SVG element (used by {@link fabric.Circle.fromElement})
14000 
   * @static
14001 
   * @memberOf fabric.Circle
14002 
   * @see: http://www.w3.org/TR/SVG/shapes.html#CircleElement
14003 
   */
14004 
  fabric.Circle.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('cx cy r'.split(' '));
14005 
 
14006 
  /**
14007 
   * Returns {@link fabric.Circle} instance from an SVG element
14008 
   * @static
14009 
   * @memberOf fabric.Circle
14010 
   * @param {SVGElement} element Element to parse
14011 
   * @param {Object} [options] Options object
14012 
   * @throws {Error} If value of `r` attribute is missing or invalid
14013 
   * @return {fabric.Circle} Instance of fabric.Circle
14014 
   */
14015 
  fabric.Circle.fromElement = function(element, options) {
14016 
    options || (options = { });
14017 
 
14018 
    var parsedAttributes = fabric.parseAttributes(element, fabric.Circle.ATTRIBUTE_NAMES);
14019 
 
14020 
    if (!isValidRadius(parsedAttributes)) {
14021 
      throw new Error('value of `r` attribute is required and can not be negative');
14022 
    }
14023 
 
14024 
    parsedAttributes.left = parsedAttributes.left || 0;
14025 
    parsedAttributes.top = parsedAttributes.top || 0;
14026 
 
14027 
    var obj = new fabric.Circle(extend(parsedAttributes, options));
14028 
 
14029 
    obj.left -= obj.radius;
14030 
    obj.top -= obj.radius;
14031 
    return obj;
14032 
  };
14033 
 
14034 
  /**
14035 
   * @private
14036 
   */
14037 
  function isValidRadius(attributes) {
14038 
    return (('radius' in attributes) && (attributes.radius >= 0));
14039 
  }
14040 
  /* _FROM_SVG_END_ */
14041 
 
14042 
  /**
14043 
   * Returns {@link fabric.Circle} instance from an object representation
14044 
   * @static
14045 
   * @memberOf fabric.Circle
14046 
   * @param {Object} object Object to create an instance from
14047 
   * @return {Object} Instance of fabric.Circle
14048 
   */
14049 
  fabric.Circle.fromObject = function(object) {
14050 
    return new fabric.Circle(object);
14051 
  };
14052 
 
14053 
})(typeof exports !== 'undefined' ? exports : this);
14054 
 
14055 
 
14056 
(function(global) {
14057 
 
14058 
  'use strict';
14059 
 
14060 
  var fabric = global.fabric || (global.fabric = { });
14061 
 
14062 
  if (fabric.Triangle) {
14063 
    fabric.warn('fabric.Triangle is already defined');
14064 
    return;
14065 
  }
14066 
 
14067 
  /**
14068 
   * Triangle class
14069 
   * @class fabric.Triangle
14070 
   * @extends fabric.Object
14071 
   * @return {fabric.Triangle} thisArg
14072 
   * @see {@link fabric.Triangle#initialize} for constructor definition
14073 
   */
14074 
  fabric.Triangle = fabric.util.createClass(fabric.Object, /** @lends fabric.Triangle.prototype */ {
14075 
 
14076 
    /**
14077 
     * Type of an object
14078 
     * @type String
14079 
     * @default
14080 
     */
14081 
    type: 'triangle',
14082 
 
14083 
    /**
14084 
     * Constructor
14085 
     * @param {Object} [options] Options object
14086 
     * @return {Object} thisArg
14087 
     */
14088 
    initialize: function(options) {
14089 
      options = options || { };
14090 
 
14091 
      this.callSuper('initialize', options);
14092 
 
14093 
      this.set('width', options.width || 100)
14094 
          .set('height', options.height || 100);
14095 
    },
14096 
 
14097 
    /**
14098 
     * @private
14099 
     * @param {CanvasRenderingContext2D} ctx Context to render on
14100 
     */
14101 
    _render: function(ctx) {
14102 
      var widthBy2 = this.width / 2,
14103 
          heightBy2 = this.height / 2;
14104 
 
14105 
      ctx.beginPath();
14106 
      ctx.moveTo(-widthBy2, heightBy2);
14107 
      ctx.lineTo(0, -heightBy2);
14108 
      ctx.lineTo(widthBy2, heightBy2);
14109 
      ctx.closePath();
14110 
 
14111 
      this._renderFill(ctx);
14112 
      this._renderStroke(ctx);
14113 
    },
14114 
 
14115 
    /**
14116 
     * @private
14117 
     * @param {CanvasRenderingContext2D} ctx Context to render on
14118 
     */
14119 
    _renderDashedStroke: function(ctx) {
14120 
      var widthBy2 = this.width / 2,
14121 
          heightBy2 = this.height / 2;
14122 
 
14123 
      ctx.beginPath();
14124 
      fabric.util.drawDashedLine(ctx, -widthBy2, heightBy2, 0, -heightBy2, this.strokeDashArray);
14125 
      fabric.util.drawDashedLine(ctx, 0, -heightBy2, widthBy2, heightBy2, this.strokeDashArray);
14126 
      fabric.util.drawDashedLine(ctx, widthBy2, heightBy2, -widthBy2, heightBy2, this.strokeDashArray);
14127 
      ctx.closePath();
14128 
    },
14129 
 
14130 
    /* _TO_SVG_START_ */
14131 
    /**
14132 
     * Returns SVG representation of an instance
14133 
     * @param {Function} [reviver] Method for further parsing of svg representation.
14134 
     * @return {String} svg representation of an instance
14135 
     */
14136 
    toSVG: function(reviver) {
14137 
      var markup = this._createBaseSVGMarkup(),
14138 
          widthBy2 = this.width / 2,
14139 
          heightBy2 = this.height / 2,
14140 
          points = [
14141 
            -widthBy2 + ' ' + heightBy2,
14142 
            '0 ' + -heightBy2,
14143 
            widthBy2 + ' ' + heightBy2
14144 
          ]
14145 
          .join(',');
14146 
 
14147 
      markup.push(
14148 
        '<polygon ',
14149 
          'points="', points,
14150 
          '" style="', this.getSvgStyles(),
14151 
          '" transform="', this.getSvgTransform(),
14152 
        '"/>'
14153 
      );
14154 
 
14155 
      return reviver ? reviver(markup.join('')) : markup.join('');
14156 
    },
14157 
    /* _TO_SVG_END_ */
14158 
 
14159 
    /**
14160 
     * Returns complexity of an instance
14161 
     * @return {Number} complexity of this instance
14162 
     */
14163 
    complexity: function() {
14164 
      return 1;
14165 
    }
14166 
  });
14167 
 
14168 
  /**
14169 
   * Returns fabric.Triangle instance from an object representation
14170 
   * @static
14171 
   * @memberOf fabric.Triangle
14172 
   * @param {Object} object Object to create an instance from
14173 
   * @return {Object} instance of Canvas.Triangle
14174 
   */
14175 
  fabric.Triangle.fromObject = function(object) {
14176 
    return new fabric.Triangle(object);
14177 
  };
14178 
 
14179 
})(typeof exports !== 'undefined' ? exports : this);
14180 
 
14181 
 
14182 
(function(global) {
14183 
 
14184 
  'use strict';
14185 
 
14186 
  var fabric = global.fabric || (global.fabric = { }),
14187 
      piBy2   = Math.PI * 2,
14188 
      extend = fabric.util.object.extend;
14189 
 
14190 
  if (fabric.Ellipse) {
14191 
    fabric.warn('fabric.Ellipse is already defined.');
14192 
    return;
14193 
  }
14194 
 
14195 
  /**
14196 
   * Ellipse class
14197 
   * @class fabric.Ellipse
14198 
   * @extends fabric.Object
14199 
   * @return {fabric.Ellipse} thisArg
14200 
   * @see {@link fabric.Ellipse#initialize} for constructor definition
14201 
   */
14202 
  fabric.Ellipse = fabric.util.createClass(fabric.Object, /** @lends fabric.Ellipse.prototype */ {
14203 
 
14204 
    /**
14205 
     * Type of an object
14206 
     * @type String
14207 
     * @default
14208 
     */
14209 
    type: 'ellipse',
14210 
 
14211 
    /**
14212 
     * Horizontal radius
14213 
     * @type Number
14214 
     * @default
14215 
     */
14216 
    rx:   0,
14217 
 
14218 
    /**
14219 
     * Vertical radius
14220 
     * @type Number
14221 
     * @default
14222 
     */
14223 
    ry:   0,
14224 
 
14225 
    /**
14226 
     * Constructor
14227 
     * @param {Object} [options] Options object
14228 
     * @return {fabric.Ellipse} thisArg
14229 
     */
14230 
    initialize: function(options) {
14231 
      options = options || { };
14232 
 
14233 
      this.callSuper('initialize', options);
14234 
 
14235 
      this.set('rx', options.rx || 0);
14236 
      this.set('ry', options.ry || 0);
14237 
    },
14238 
 
14239 
    /**
14240 
     * @private
14241 
     * @param {String} key
14242 
     * @param {Any} value
14243 
     * @return {fabric.Ellipse} thisArg
14244 
     */
14245 
    _set: function(key, value) {
14246 
      this.callSuper('_set', key, value);
14247 
      switch (key) {
14248 
 
14249 
        case 'rx':
14250 
          this.rx = value;
14251 
          this.set('width', value * 2);
14252 
          break;
14253 
 
14254 
        case 'ry':
14255 
          this.ry = value;
14256 
          this.set('height', value * 2);
14257 
          break;
14258 
 
14259 
      }
14260 
      return this;
14261 
    },
14262 
 
14263 
    /**
14264 
     * Returns horizontal radius of an object (according to how an object is scaled)
14265 
     * @return {Number}
14266 
     */
14267 
    getRx: function() {
14268 
      return this.get('rx') * this.get('scaleX');
14269 
    },
14270 
 
14271 
    /**
14272 
     * Returns Vertical radius of an object (according to how an object is scaled)
14273 
     * @return {Number}
14274 
     */
14275 
    getRy: function() {
14276 
      return this.get('ry') * this.get('scaleY');
14277 
    },
14278 
 
14279 
    /**
14280 
     * Returns object representation of an instance
14281 
     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
14282 
     * @return {Object} object representation of an instance
14283 
     */
14284 
    toObject: function(propertiesToInclude) {
14285 
      return extend(this.callSuper('toObject', propertiesToInclude), {
14286 
        rx: this.get('rx'),
14287 
        ry: this.get('ry')
14288 
      });
14289 
    },
14290 
 
14291 
    /* _TO_SVG_START_ */
14292 
    /**
14293 
     * Returns svg representation of an instance
14294 
     * @param {Function} [reviver] Method for further parsing of svg representation.
14295 
     * @return {String} svg representation of an instance
14296 
     */
14297 
    toSVG: function(reviver) {
14298 
      var markup = this._createBaseSVGMarkup(), x = 0, y = 0;
14299 
      if (this.group && this.group.type === 'path-group') {
14300 
        x = this.left + this.rx;
14301 
        y = this.top + this.ry;
14302 
      }
14303 
      markup.push(
14304 
        '<ellipse ',
14305 
          'cx="', x, '" cy="', y, '" ',
14306 
          'rx="', this.rx,
14307 
          '" ry="', this.ry,
14308 
          '" style="', this.getSvgStyles(),
14309 
          '" transform="', this.getSvgTransform(),
14310 
          this.getSvgTransformMatrix(),
14311 
        '"/>\n'
14312 
      );
14313 
 
14314 
      return reviver ? reviver(markup.join('')) : markup.join('');
14315 
    },
14316 
    /* _TO_SVG_END_ */
14317 
 
14318 
    /**
14319 
     * @private
14320 
     * @param {CanvasRenderingContext2D} ctx context to render on
14321 
     * @param {Boolean} [noTransform] When true, context is not transformed
14322 
     */
14323 
    _render: function(ctx, noTransform) {
14324 
      ctx.beginPath();
14325 
      ctx.save();
14326 
      ctx.transform(1, 0, 0, this.ry/this.rx, 0, 0);
14327 
      ctx.arc(
14328 
        noTransform ? this.left + this.rx : 0,
14329 
        noTransform ? (this.top + this.ry) * this.rx/this.ry : 0,
14330 
        this.rx,
14331 
        0,
14332 
        piBy2,
14333 
        false);
14334 
      ctx.restore();
14335 
      this._renderFill(ctx);
14336 
      this._renderStroke(ctx);
14337 
    },
14338 
 
14339 
    /**
14340 
     * Returns complexity of an instance
14341 
     * @return {Number} complexity
14342 
     */
14343 
    complexity: function() {
14344 
      return 1;
14345 
    }
14346 
  });
14347 
 
14348 
  /* _FROM_SVG_START_ */
14349 
  /**
14350 
   * List of attribute names to account for when parsing SVG element (used by {@link fabric.Ellipse.fromElement})
14351 
   * @static
14352 
   * @memberOf fabric.Ellipse
14353 
   * @see http://www.w3.org/TR/SVG/shapes.html#EllipseElement
14354 
   */
14355 
  fabric.Ellipse.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('cx cy rx ry'.split(' '));
14356 
 
14357 
  /**
14358 
   * Returns {@link fabric.Ellipse} instance from an SVG element
14359 
   * @static
14360 
   * @memberOf fabric.Ellipse
14361 
   * @param {SVGElement} element Element to parse
14362 
   * @param {Object} [options] Options object
14363 
   * @return {fabric.Ellipse}
14364 
   */
14365 
  fabric.Ellipse.fromElement = function(element, options) {
14366 
    options || (options = { });
14367 
 
14368 
    var parsedAttributes = fabric.parseAttributes(element, fabric.Ellipse.ATTRIBUTE_NAMES);
14369 
 
14370 
    parsedAttributes.left = parsedAttributes.left || 0;
14371 
    parsedAttributes.top = parsedAttributes.top || 0;
14372 
 
14373 
    var ellipse = new fabric.Ellipse(extend(parsedAttributes, options));
14374 
 
14375 
    ellipse.top -= ellipse.ry;
14376 
    ellipse.left -= ellipse.rx;
14377 
    return ellipse;
14378 
  };
14379 
  /* _FROM_SVG_END_ */
14380 
 
14381 
  /**
14382 
   * Returns {@link fabric.Ellipse} instance from an object representation
14383 
   * @static
14384 
   * @memberOf fabric.Ellipse
14385 
   * @param {Object} object Object to create an instance from
14386 
   * @return {fabric.Ellipse}
14387 
   */
14388 
  fabric.Ellipse.fromObject = function(object) {
14389 
    return new fabric.Ellipse(object);
14390 
  };
14391 
 
14392 
})(typeof exports !== 'undefined' ? exports : this);
14393 
 
14394 
 
14395 
(function(global) {
14396 
 
14397 
  'use strict';
14398 
 
14399 
  var fabric = global.fabric || (global.fabric = { }),
14400 
      extend = fabric.util.object.extend;
14401 
 
14402 
  if (fabric.Rect) {
14403 
    console.warn('fabric.Rect is already defined');
14404 
    return;
14405 
  }
14406 
 
14407 
  var stateProperties = fabric.Object.prototype.stateProperties.concat();
14408 
  stateProperties.push('rx', 'ry', 'x', 'y');
14409 
 
14410 
  /**
14411 
   * Rectangle class
14412 
   * @class fabric.Rect
14413 
   * @extends fabric.Object
14414 
   * @return {fabric.Rect} thisArg
14415 
   * @see {@link fabric.Rect#initialize} for constructor definition
14416 
   */
14417 
  fabric.Rect = fabric.util.createClass(fabric.Object, /** @lends fabric.Rect.prototype */ {
14418 
 
14419 
    /**
14420 
     * List of properties to consider when checking if state of an object is changed ({@link fabric.Object#hasStateChanged})
14421 
     * as well as for history (undo/redo) purposes
14422 
     * @type Array
14423 
     */
14424 
    stateProperties: stateProperties,
14425 
 
14426 
    /**
14427 
     * Type of an object
14428 
     * @type String
14429 
     * @default
14430 
     */
14431 
    type: 'rect',
14432 
 
14433 
    /**
14434 
     * Horizontal border radius
14435 
     * @type Number
14436 
     * @default
14437 
     */
14438 
    rx:   0,
14439 
 
14440 
    /**
14441 
     * Vertical border radius
14442 
     * @type Number
14443 
     * @default
14444 
     */
14445 
    ry:   0,
14446 
 
14447 
    /**
14448 
     * Used to specify dash pattern for stroke on this object
14449 
     * @type Array
14450 
     */
14451 
    strokeDashArray: null,
14452 
 
14453 
    /**
14454 
     * Constructor
14455 
     * @param {Object} [options] Options object
14456 
     * @return {Object} thisArg
14457 
     */
14458 
    initialize: function(options) {
14459 
      options = options || { };
14460 
 
14461 
      this.callSuper('initialize', options);
14462 
      this._initRxRy();
14463 
 
14464 
    },
14465 
 
14466 
    /**
14467 
     * Initializes rx/ry attributes
14468 
     * @private
14469 
     */
14470 
    _initRxRy: function() {
14471 
      if (this.rx && !this.ry) {
14472 
        this.ry = this.rx;
14473 
      }
14474 
      else if (this.ry && !this.rx) {
14475 
        this.rx = this.ry;
14476 
      }
14477 
    },
14478 
 
14479 
    /**
14480 
     * @private
14481 
     * @param {CanvasRenderingContext2D} ctx Context to render on
14482 
     */
14483 
    _render: function(ctx, noTransform) {
14484 
 
14485 
      // optimize 1x1 case (used in spray brush)
14486 
      if (this.width === 1 && this.height === 1) {
14487 
        ctx.fillRect(0, 0, 1, 1);
14488 
        return;
14489 
      }
14490 
 
14491 
      var rx = this.rx ? Math.min(this.rx, this.width / 2) : 0,
14492 
          ry = this.ry ? Math.min(this.ry, this.height / 2) : 0,
14493 
          w = this.width,
14494 
          h = this.height,
14495 
          x = noTransform ? this.left : -this.width / 2,
14496 
          y = noTransform ? this.top : -this.height / 2,
14497 
          isRounded = rx !== 0 || ry !== 0,
14498 
          k = 1 - 0.5522847498 /* "magic number" for bezier approximations of arcs (http://itc.ktu.lt/itc354/Riskus354.pdf) */;
14499 
 
14500 
      ctx.beginPath();
14501 
 
14502 
      ctx.moveTo(x + rx, y);
14503 
 
14504 
      ctx.lineTo(x + w - rx, y);
14505 
      isRounded && ctx.bezierCurveTo(x + w - k * rx, y, x + w, y + k * ry, x + w, y + ry);
14506 
 
14507 
      ctx.lineTo(x + w, y + h - ry);
14508 
      isRounded && ctx.bezierCurveTo(x + w, y + h - k * ry, x + w - k * rx, y + h, x + w - rx, y + h);
14509 
 
14510 
      ctx.lineTo(x + rx, y + h);
14511 
      isRounded && ctx.bezierCurveTo(x + k * rx, y + h, x, y + h - k * ry, x, y + h - ry);
14512 
 
14513 
      ctx.lineTo(x, y + ry);
14514 
      isRounded && ctx.bezierCurveTo(x, y + k * ry, x + k * rx, y, x + rx, y);
14515 
 
14516 
      ctx.closePath();
14517 
 
14518 
      this._renderFill(ctx);
14519 
      this._renderStroke(ctx);
14520 
    },
14521 
 
14522 
    /**
14523 
     * @private
14524 
     * @param {CanvasRenderingContext2D} ctx Context to render on
14525 
     */
14526 
    _renderDashedStroke: function(ctx) {
14527 
      var x = -this.width / 2,
14528 
          y = -this.height / 2,
14529 
          w = this.width,
14530 
          h = this.height;
14531 
 
14532 
      ctx.beginPath();
14533 
      fabric.util.drawDashedLine(ctx, x, y, x + w, y, this.strokeDashArray);
14534 
      fabric.util.drawDashedLine(ctx, x + w, y, x + w, y + h, this.strokeDashArray);
14535 
      fabric.util.drawDashedLine(ctx, x + w, y + h, x, y + h, this.strokeDashArray);
14536 
      fabric.util.drawDashedLine(ctx, x, y + h, x, y, this.strokeDashArray);
14537 
      ctx.closePath();
14538 
    },
14539 
 
14540 
    /**
14541 
     * Returns object representation of an instance
14542 
     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
14543 
     * @return {Object} object representation of an instance
14544 
     */
14545 
    toObject: function(propertiesToInclude) {
14546 
      var object = extend(this.callSuper('toObject', propertiesToInclude), {
14547 
        rx: this.get('rx') || 0,
14548 
        ry: this.get('ry') || 0
14549 
      });
14550 
      if (!this.includeDefaultValues) {
14551 
        this._removeDefaultValues(object);
14552 
      }
14553 
      return object;
14554 
    },
14555 
 
14556 
    /* _TO_SVG_START_ */
14557 
    /**
14558 
     * Returns svg representation of an instance
14559 
     * @param {Function} [reviver] Method for further parsing of svg representation.
14560 
     * @return {String} svg representation of an instance
14561 
     */
14562 
    toSVG: function(reviver) {
14563 
      var markup = this._createBaseSVGMarkup(), x = this.left, y = this.top;
14564 
      if (!(this.group && this.group.type === 'path-group')) {
14565 
        x = -this.width / 2;
14566 
        y = -this.height / 2;
14567 
      }
14568 
      markup.push(
14569 
        '<rect ',
14570 
          'x="', x, '" y="', y,
14571 
          '" rx="', this.get('rx'), '" ry="', this.get('ry'),
14572 
          '" width="', this.width, '" height="', this.height,
14573 
          '" style="', this.getSvgStyles(),
14574 
          '" transform="', this.getSvgTransform(),
14575 
          this.getSvgTransformMatrix(),
14576 
        '"/>\n');
14577 
 
14578 
      return reviver ? reviver(markup.join('')) : markup.join('');
14579 
    },
14580 
    /* _TO_SVG_END_ */
14581 
 
14582 
    /**
14583 
     * Returns complexity of an instance
14584 
     * @return {Number} complexity
14585 
     */
14586 
    complexity: function() {
14587 
      return 1;
14588 
    }
14589 
  });
14590 
 
14591 
  /* _FROM_SVG_START_ */
14592 
  /**
14593 
   * List of attribute names to account for when parsing SVG element (used by `fabric.Rect.fromElement`)
14594 
   * @static
14595 
   * @memberOf fabric.Rect
14596 
   * @see: http://www.w3.org/TR/SVG/shapes.html#RectElement
14597 
   */
14598 
  fabric.Rect.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('x y rx ry width height'.split(' '));
14599 
 
14600 
  /**
14601 
   * Returns {@link fabric.Rect} instance from an SVG element
14602 
   * @static
14603 
   * @memberOf fabric.Rect
14604 
   * @param {SVGElement} element Element to parse
14605 
   * @param {Object} [options] Options object
14606 
   * @return {fabric.Rect} Instance of fabric.Rect
14607 
   */
14608 
  fabric.Rect.fromElement = function(element, options) {
14609 
    if (!element) {
14610 
      return null;
14611 
    }
14612 
    options = options || { };
14613 
 
14614 
    var parsedAttributes = fabric.parseAttributes(element, fabric.Rect.ATTRIBUTE_NAMES);
14615 
 
14616 
    parsedAttributes.left = parsedAttributes.left || 0;
14617 
    parsedAttributes.top  = parsedAttributes.top  || 0;
14618 
    var rect = new fabric.Rect(extend((options ? fabric.util.object.clone(options) : { }), parsedAttributes));
14619 
    rect.visible = rect.width > 0 && rect.height > 0;
14620 
    return rect;
14621 
  };
14622 
  /* _FROM_SVG_END_ */
14623 
 
14624 
  /**
14625 
   * Returns {@link fabric.Rect} instance from an object representation
14626 
   * @static
14627 
   * @memberOf fabric.Rect
14628 
   * @param {Object} object Object to create an instance from
14629 
   * @return {Object} instance of fabric.Rect
14630 
   */
14631 
  fabric.Rect.fromObject = function(object) {
14632 
    return new fabric.Rect(object);
14633 
  };
14634 
 
14635 
})(typeof exports !== 'undefined' ? exports : this);
14636 
 
14637 
 
14638 
(function(global) {
14639 
 
14640 
  'use strict';
14641 
 
14642 
  var fabric = global.fabric || (global.fabric = { });
14643 
 
14644 
  if (fabric.Polyline) {
14645 
    fabric.warn('fabric.Polyline is already defined');
14646 
    return;
14647 
  }
14648 
 
14649 
  /**
14650 
   * Polyline class
14651 
   * @class fabric.Polyline
14652 
   * @extends fabric.Object
14653 
   * @see {@link fabric.Polyline#initialize} for constructor definition
14654 
   */
14655 
  fabric.Polyline = fabric.util.createClass(fabric.Object, /** @lends fabric.Polyline.prototype */ {
14656 
 
14657 
    /**
14658 
     * Type of an object
14659 
     * @type String
14660 
     * @default
14661 
     */
14662 
    type: 'polyline',
14663 
 
14664 
    /**
14665 
     * Points array
14666 
     * @type Array
14667 
     * @default
14668 
     */
14669 
    points: null,
14670 
 
14671 
    /**
14672 
     * Minimum X from points values, necessary to offset points
14673 
     * @type Number
14674 
     * @default
14675 
     */
14676 
    minX: 0,
14677 
 
14678 
    /**
14679 
     * Minimum Y from points values, necessary to offset points
14680 
     * @type Number
14681 
     * @default
14682 
     */
14683 
    minY: 0,
14684 
 
14685 
    /**
14686 
     * Constructor
14687 
     * @param {Array} points Array of points (where each point is an object with x and y)
14688 
     * @param {Object} [options] Options object
14689 
     * @param {Boolean} [skipOffset] Whether points offsetting should be skipped
14690 
     * @return {fabric.Polyline} thisArg
14691 
     * @example
14692 
     * var poly = new fabric.Polyline([
14693 
     *     { x: 10, y: 10 },
14694 
     *     { x: 50, y: 30 },
14695 
     *     { x: 40, y: 70 },
14696 
     *     { x: 60, y: 50 },
14697 
     *     { x: 100, y: 150 },
14698 
     *     { x: 40, y: 100 }
14699 
     *   ], {
14700 
     *   stroke: 'red',
14701 
     *   left: 100,
14702 
     *   top: 100
14703 
     * });
14704 
     */
14705 
    initialize: function(points, options) {
14706 
      return fabric.Polygon.prototype.initialize.call(this, points, options);
14707 
    },
14708 
 
14709 
    /**
14710 
     * @private
14711 
     */
14712 
    _calcDimensions: function() {
14713 
      return fabric.Polygon.prototype._calcDimensions.call(this);
14714 
    },
14715 
 
14716 
    /**
14717 
     * @private
14718 
     */
14719 
    _applyPointOffset: function() {
14720 
      return fabric.Polygon.prototype._applyPointOffset.call(this);
14721 
    },
14722 
 
14723 
    /**
14724 
     * Returns object representation of an instance
14725 
     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
14726 
     * @return {Object} Object representation of an instance
14727 
     */
14728 
    toObject: function(propertiesToInclude) {
14729 
      return fabric.Polygon.prototype.toObject.call(this, propertiesToInclude);
14730 
    },
14731 
 
14732 
    /* _TO_SVG_START_ */
14733 
    /**
14734 
     * Returns SVG representation of an instance
14735 
     * @param {Function} [reviver] Method for further parsing of svg representation.
14736 
     * @return {String} svg representation of an instance
14737 
     */
14738 
    toSVG: function(reviver) {
14739 
      return fabric.Polygon.prototype.toSVG.call(this, reviver);
14740 
    },
14741 
    /* _TO_SVG_END_ */
14742 
 
14743 
    /**
14744 
     * @private
14745 
     * @param {CanvasRenderingContext2D} ctx Context to render on
14746 
     */
14747 
    _render: function(ctx) {
14748 
      if (!fabric.Polygon.prototype.commonRender.call(this, ctx)) {
14749 
        return;
14750 
      }
14751 
      this._renderFill(ctx);
14752 
      this._renderStroke(ctx);
14753 
    },
14754 
 
14755 
    /**
14756 
     * @private
14757 
     * @param {CanvasRenderingContext2D} ctx Context to render on
14758 
     */
14759 
    _renderDashedStroke: function(ctx) {
14760 
      var p1, p2;
14761 
 
14762 
      ctx.beginPath();
14763 
      for (var i = 0, len = this.points.length; i < len; i++) {
14764 
        p1 = this.points[i];
14765 
        p2 = this.points[i + 1] || p1;
14766 
        fabric.util.drawDashedLine(ctx, p1.x, p1.y, p2.x, p2.y, this.strokeDashArray);
14767 
      }
14768 
    },
14769 
 
14770 
    /**
14771 
     * Returns complexity of an instance
14772 
     * @return {Number} complexity of this instance
14773 
     */
14774 
    complexity: function() {
14775 
      return this.get('points').length;
14776 
    }
14777 
  });
14778 
 
14779 
  /* _FROM_SVG_START_ */
14780 
  /**
14781 
   * List of attribute names to account for when parsing SVG element (used by {@link fabric.Polyline.fromElement})
14782 
   * @static
14783 
   * @memberOf fabric.Polyline
14784 
   * @see: http://www.w3.org/TR/SVG/shapes.html#PolylineElement
14785 
   */
14786 
  fabric.Polyline.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat();
14787 
 
14788 
  /**
14789 
   * Returns fabric.Polyline instance from an SVG element
14790 
   * @static
14791 
   * @memberOf fabric.Polyline
14792 
   * @param {SVGElement} element Element to parse
14793 
   * @param {Object} [options] Options object
14794 
   * @return {fabric.Polyline} Instance of fabric.Polyline
14795 
   */
14796 
  fabric.Polyline.fromElement = function(element, options) {
14797 
    if (!element) {
14798 
      return null;
14799 
    }
14800 
    options || (options = { });
14801 
 
14802 
    var points = fabric.parsePointsAttribute(element.getAttribute('points')),
14803 
        parsedAttributes = fabric.parseAttributes(element, fabric.Polyline.ATTRIBUTE_NAMES);
14804 
 
14805 
    return new fabric.Polyline(points, fabric.util.object.extend(parsedAttributes, options));
14806 
  };
14807 
  /* _FROM_SVG_END_ */
14808 
 
14809 
  /**
14810 
   * Returns fabric.Polyline instance from an object representation
14811 
   * @static
14812 
   * @memberOf fabric.Polyline
14813 
   * @param {Object} object Object to create an instance from
14814 
   * @return {fabric.Polyline} Instance of fabric.Polyline
14815 
   */
14816 
  fabric.Polyline.fromObject = function(object) {
14817 
    var points = object.points;
14818 
    return new fabric.Polyline(points, object, true);
14819 
  };
14820 
 
14821 
})(typeof exports !== 'undefined' ? exports : this);
14822 
 
14823 
 
14824 
(function(global) {
14825 
 
14826 
  'use strict';
14827 
 
14828 
  var fabric = global.fabric || (global.fabric = { }),
14829 
      extend = fabric.util.object.extend,
14830 
      min = fabric.util.array.min,
14831 
      max = fabric.util.array.max,
14832 
      toFixed = fabric.util.toFixed;
14833 
 
14834 
  if (fabric.Polygon) {
14835 
    fabric.warn('fabric.Polygon is already defined');
14836 
    return;
14837 
  }
14838 
 
14839 
  /**
14840 
   * Polygon class
14841 
   * @class fabric.Polygon
14842 
   * @extends fabric.Object
14843 
   * @see {@link fabric.Polygon#initialize} for constructor definition
14844 
   */
14845 
  fabric.Polygon = fabric.util.createClass(fabric.Object, /** @lends fabric.Polygon.prototype */ {
14846 
 
14847 
    /**
14848 
     * Type of an object
14849 
     * @type String
14850 
     * @default
14851 
     */
14852 
    type: 'polygon',
14853 
 
14854 
    /**
14855 
     * Points array
14856 
     * @type Array
14857 
     * @default
14858 
     */
14859 
    points: null,
14860 
 
14861 
    /**
14862 
     * Minimum X from points values, necessary to offset points
14863 
     * @type Number
14864 
     * @default
14865 
     */
14866 
    minX: 0,
14867 
 
14868 
    /**
14869 
     * Minimum Y from points values, necessary to offset points
14870 
     * @type Number
14871 
     * @default
14872 
     */
14873 
    minY: 0,
14874 
 
14875 
    /**
14876 
     * Constructor
14877 
     * @param {Array} points Array of points
14878 
     * @param {Object} [options] Options object
14879 
     * @return {fabric.Polygon} thisArg
14880 
     */
14881 
    initialize: function(points, options) {
14882 
      options = options || { };
14883 
      this.points = points || [ ];
14884 
      this.callSuper('initialize', options);
14885 
      this._calcDimensions();
14886 
      if (!('top' in options)) {
14887 
        this.top = this.minY;
14888 
      }
14889 
      if (!('left' in options)) {
14890 
        this.left = this.minX;
14891 
      }
14892 
    },
14893 
 
14894 
    /**
14895 
     * @private
14896 
     */
14897 
    _calcDimensions: function() {
14898 
 
14899 
      var points = this.points,
14900 
          minX = min(points, 'x'),
14901 
          minY = min(points, 'y'),
14902 
          maxX = max(points, 'x'),
14903 
          maxY = max(points, 'y');
14904 
 
14905 
      this.width = (maxX - minX) || 0;
14906 
      this.height = (maxY - minY) || 0;
14907 
 
14908 
      this.minX = minX || 0,
14909 
      this.minY = minY || 0;
14910 
    },
14911 
 
14912 
    /**
14913 
     * @private
14914 
     */
14915 
    _applyPointOffset: function() {
14916 
      // change points to offset polygon into a bounding box
14917 
      // executed one time
14918 
      this.points.forEach(function(p) {
14919 
        p.x -= (this.minX + this.width / 2);
14920 
        p.y -= (this.minY + this.height / 2);
14921 
      }, this);
14922 
    },
14923 
 
14924 
    /**
14925 
     * Returns object representation of an instance
14926 
     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
14927 
     * @return {Object} Object representation of an instance
14928 
     */
14929 
    toObject: function(propertiesToInclude) {
14930 
      return extend(this.callSuper('toObject', propertiesToInclude), {
14931 
        points: this.points.concat()
14932 
      });
14933 
    },
14934 
 
14935 
    /* _TO_SVG_START_ */
14936 
    /**
14937 
     * Returns svg representation of an instance
14938 
     * @param {Function} [reviver] Method for further parsing of svg representation.
14939 
     * @return {String} svg representation of an instance
14940 
     */
14941 
    toSVG: function(reviver) {
14942 
      var points = [],
14943 
          markup = this._createBaseSVGMarkup();
14944 
 
14945 
      for (var i = 0, len = this.points.length; i < len; i++) {
14946 
        points.push(toFixed(this.points[i].x, 2), ',', toFixed(this.points[i].y, 2), ' ');
14947 
      }
14948 
 
14949 
      markup.push(
14950 
        '<', this.type, ' ',
14951 
          'points="', points.join(''),
14952 
          '" style="', this.getSvgStyles(),
14953 
          '" transform="', this.getSvgTransform(),
14954 
          ' ', this.getSvgTransformMatrix(),
14955 
        '"/>\n'
14956 
      );
14957 
 
14958 
      return reviver ? reviver(markup.join('')) : markup.join('');
14959 
    },
14960 
    /* _TO_SVG_END_ */
14961 
 
14962 
    /**
14963 
     * @private
14964 
     * @param {CanvasRenderingContext2D} ctx Context to render on
14965 
     */
14966 
    _render: function(ctx) {
14967 
      if (!this.commonRender(ctx)) {
14968 
        return;
14969 
      }
14970 
      this._renderFill(ctx);
14971 
      if (this.stroke || this.strokeDashArray) {
14972 
        ctx.closePath();
14973 
        this._renderStroke(ctx);
14974 
      }
14975 
    },
14976 
 
14977 
    /**
14978 
     * @private
14979 
     * @param {CanvasRenderingContext2D} ctx Context to render on
14980 
     */
14981 
    commonRender: function(ctx) {
14982 
      var point, len = this.points.length;
14983 
 
14984 
      if (!len || isNaN(this.points[len - 1].y)) {
14985 
        // do not draw if no points or odd points
14986 
        // NaN comes from parseFloat of a empty string in parser
14987 
        return false;
14988 
      }
14989 
 
14990 
      ctx.beginPath();
14991 
 
14992 
      if (this._applyPointOffset) {
14993 
        if (!(this.group && this.group.type === 'path-group')) {
14994 
          this._applyPointOffset();
14995 
        }
14996 
        this._applyPointOffset = null;
14997 
      }
14998 
 
14999 
      ctx.moveTo(this.points[0].x, this.points[0].y);
15000 
      for (var i = 0; i < len; i++) {
15001 
        point = this.points[i];
15002 
        ctx.lineTo(point.x, point.y);
15003 
      }
15004 
      return true;
15005 
    },
15006 
 
15007 
    /**
15008 
     * @private
15009 
     * @param {CanvasRenderingContext2D} ctx Context to render on
15010 
     */
15011 
    _renderDashedStroke: function(ctx) {
15012 
      fabric.Polyline.prototype._renderDashedStroke.call(this, ctx);
15013 
      ctx.closePath();
15014 
    },
15015 
 
15016 
    /**
15017 
     * Returns complexity of an instance
15018 
     * @return {Number} complexity of this instance
15019 
     */
15020 
    complexity: function() {
15021 
      return this.points.length;
15022 
    }
15023 
  });
15024 
 
15025 
  /* _FROM_SVG_START_ */
15026 
  /**
15027 
   * List of attribute names to account for when parsing SVG element (used by `fabric.Polygon.fromElement`)
15028 
   * @static
15029 
   * @memberOf fabric.Polygon
15030 
   * @see: http://www.w3.org/TR/SVG/shapes.html#PolygonElement
15031 
   */
15032 
  fabric.Polygon.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat();
15033 
 
15034 
  /**
15035 
   * Returns {@link fabric.Polygon} instance from an SVG element
15036 
   * @static
15037 
   * @memberOf fabric.Polygon
15038 
   * @param {SVGElement} element Element to parse
15039 
   * @param {Object} [options] Options object
15040 
   * @return {fabric.Polygon} Instance of fabric.Polygon
15041 
   */
15042 
  fabric.Polygon.fromElement = function(element, options) {
15043 
    if (!element) {
15044 
      return null;
15045 
    }
15046 
 
15047 
    options || (options = { });
15048 
 
15049 
    var points = fabric.parsePointsAttribute(element.getAttribute('points')),
15050 
        parsedAttributes = fabric.parseAttributes(element, fabric.Polygon.ATTRIBUTE_NAMES);
15051 
 
15052 
    return new fabric.Polygon(points, extend(parsedAttributes, options));
15053 
  };
15054 
  /* _FROM_SVG_END_ */
15055 
 
15056 
  /**
15057 
   * Returns fabric.Polygon instance from an object representation
15058 
   * @static
15059 
   * @memberOf fabric.Polygon
15060 
   * @param {Object} object Object to create an instance from
15061 
   * @return {fabric.Polygon} Instance of fabric.Polygon
15062 
   */
15063 
  fabric.Polygon.fromObject = function(object) {
15064 
    return new fabric.Polygon(object.points, object, true);
15065 
  };
15066 
 
15067 
})(typeof exports !== 'undefined' ? exports : this);
15068 
 
15069 
 
15070 
(function(global) {
15071 
 
15072 
  'use strict';
15073 
 
15074 
  var fabric = global.fabric || (global.fabric = { }),
15075 
      min = fabric.util.array.min,
15076 
      max = fabric.util.array.max,
15077 
      extend = fabric.util.object.extend,
15078 
      _toString = Object.prototype.toString,
15079 
      drawArc = fabric.util.drawArc,
15080 
      commandLengths = {
15081 
        m: 2,
15082 
        l: 2,
15083 
        h: 1,
15084 
        v: 1,
15085 
        c: 6,
15086 
        s: 4,
15087 
        q: 4,
15088 
        t: 2,
15089 
        a: 7
15090 
      },
15091 
      repeatedCommands = {
15092 
        m: 'l',
15093 
        M: 'L'
15094 
      };
15095 
 
15096 
  if (fabric.Path) {
15097 
    fabric.warn('fabric.Path is already defined');
15098 
    return;
15099 
  }
15100 
 
15101 
  /**
15102 
   * Path class
15103 
   * @class fabric.Path
15104 
   * @extends fabric.Object
15105 
   * @tutorial {@link http://fabricjs.com/fabric-intro-part-1/#path_and_pathgroup}
15106 
   * @see {@link fabric.Path#initialize} for constructor definition
15107 
   */
15108 
  fabric.Path = fabric.util.createClass(fabric.Object, /** @lends fabric.Path.prototype */ {
15109 
 
15110 
    /**
15111 
     * Type of an object
15112 
     * @type String
15113 
     * @default
15114 
     */
15115 
    type: 'path',
15116 
 
15117 
    /**
15118 
     * Array of path points
15119 
     * @type Array
15120 
     * @default
15121 
     */
15122 
    path: null,
15123 
 
15124 
    /**
15125 
     * Minimum X from points values, necessary to offset points
15126 
     * @type Number
15127 
     * @default
15128 
     */
15129 
    minX: 0,
15130 
 
15131 
    /**
15132 
     * Minimum Y from points values, necessary to offset points
15133 
     * @type Number
15134 
     * @default
15135 
     */
15136 
    minY: 0,
15137 
 
15138 
    /**
15139 
     * Constructor
15140 
     * @param {Array|String} path Path data (sequence of coordinates and corresponding "command" tokens)
15141 
     * @param {Object} [options] Options object
15142 
     * @return {fabric.Path} thisArg
15143 
     */
15144 
    initialize: function(path, options) {
15145 
      options = options || { };
15146 
 
15147 
      this.setOptions(options);
15148 
 
15149 
      if (!path) {
15150 
        throw new Error('`path` argument is required');
15151 
      }
15152 
 
15153 
      var fromArray = _toString.call(path) === '[object Array]';
15154 
 
15155 
      this.path = fromArray
15156 
        ? path
15157 
        // one of commands (m,M,l,L,q,Q,c,C,etc.) followed by non-command characters (i.e. command values)
15158 
        : path.match && path.match(/[mzlhvcsqta][^mzlhvcsqta]*/gi);
15159 
 
15160 
      if (!this.path) {
15161 
        return;
15162 
      }
15163 
 
15164 
      if (!fromArray) {
15165 
        this.path = this._parsePath();
15166 
      }
15167 
 
15168 
      this._setPositionDimensions();
15169 
 
15170 
      if (options.sourcePath) {
15171 
        this.setSourcePath(options.sourcePath);
15172 
      }
15173 
    },
15174 
 
15175 
    /**
15176 
     * @private
15177 
     */
15178 
    _setPositionDimensions: function() {
15179 
      var calcDim = this._parseDimensions();
15180 
 
15181 
      this.minX = calcDim.left;
15182 
      this.minY = calcDim.top;
15183 
      this.width = calcDim.width;
15184 
      this.height = calcDim.height;
15185 
 
15186 
      calcDim.left += this.originX === 'center'
15187 
        ? this.width / 2
15188 
        : this.originX === 'right'
15189 
          ? this.width
15190 
          : 0;
15191 
 
15192 
      calcDim.top += this.originY === 'center'
15193 
        ? this.height / 2
15194 
        : this.originY === 'bottom'
15195 
          ? this.height
15196 
          : 0;
15197 
 
15198 
      this.top = this.top || calcDim.top;
15199 
      this.left = this.left || calcDim.left;
15200 
 
15201 
      this.pathOffset = this.pathOffset || {
15202 
        x: this.minX + this.width / 2,
15203 
        y: this.minY + this.height / 2
15204 
      };
15205 
    },
15206 
 
15207 
    /**
15208 
     * @private
15209 
     * @param {CanvasRenderingContext2D} ctx context to render path on
15210 
     */
15211 
    _render: function(ctx) {
15212 
      var current, // current instruction
15213 
          previous = null,
15214 
          subpathStartX = 0,
15215 
          subpathStartY = 0,
15216 
          x = 0, // current x
15217 
          y = 0, // current y
15218 
          controlX = 0, // current control point x
15219 
          controlY = 0, // current control point y
15220 
          tempX,
15221 
          tempY,
15222 
          l = -this.pathOffset.x,
15223 
          t = -this.pathOffset.y;
15224 
 
15225 
      if (this.group && this.group.type === 'path-group') {
15226 
        l = 0;
15227 
        t = 0;
15228 
      }
15229 
 
15230 
      ctx.beginPath();
15231 
 
15232 
      for (var i = 0, len = this.path.length; i < len; ++i) {
15233 
 
15234 
        current = this.path[i];
15235 
 
15236 
        switch (current[0]) { // first letter
15237 
 
15238 
          case 'l': // lineto, relative
15239 
            x += current[1];
15240 
            y += current[2];
15241 
            ctx.lineTo(x + l, y + t);
15242 
            break;
15243 
 
15244 
          case 'L': // lineto, absolute
15245 
            x = current[1];
15246 
            y = current[2];
15247 
            ctx.lineTo(x + l, y + t);
15248 
            break;
15249 
 
15250 
          case 'h': // horizontal lineto, relative
15251 
            x += current[1];
15252 
            ctx.lineTo(x + l, y + t);
15253 
            break;
15254 
 
15255 
          case 'H': // horizontal lineto, absolute
15256 
            x = current[1];
15257 
            ctx.lineTo(x + l, y + t);
15258 
            break;
15259 
 
15260 
          case 'v': // vertical lineto, relative
15261 
            y += current[1];
15262 
            ctx.lineTo(x + l, y + t);
15263 
            break;
15264 
 
15265 
          case 'V': // verical lineto, absolute
15266 
            y = current[1];
15267 
            ctx.lineTo(x + l, y + t);
15268 
            break;
15269 
 
15270 
          case 'm': // moveTo, relative
15271 
            x += current[1];
15272 
            y += current[2];
15273 
            subpathStartX = x;
15274 
            subpathStartY = y;
15275 
            ctx.moveTo(x + l, y + t);
15276 
            break;
15277 
 
15278 
          case 'M': // moveTo, absolute
15279 
            x = current[1];
15280 
            y = current[2];
15281 
            subpathStartX = x;
15282 
            subpathStartY = y;
15283 
            ctx.moveTo(x + l, y + t);
15284 
            break;
15285 
 
15286 
          case 'c': // bezierCurveTo, relative
15287 
            tempX = x + current[5];
15288 
            tempY = y + current[6];
15289 
            controlX = x + current[3];
15290 
            controlY = y + current[4];
15291 
            ctx.bezierCurveTo(
15292 
              x + current[1] + l, // x1
15293 
              y + current[2] + t, // y1
15294 
              controlX + l, // x2
15295 
              controlY + t, // y2
15296 
              tempX + l,
15297 
              tempY + t
15298 
            );
15299 
            x = tempX;
15300 
            y = tempY;
15301 
            break;
15302 
 
15303 
          case 'C': // bezierCurveTo, absolute
15304 
            x = current[5];
15305 
            y = current[6];
15306 
            controlX = current[3];
15307 
            controlY = current[4];
15308 
            ctx.bezierCurveTo(
15309 
              current[1] + l,
15310 
              current[2] + t,
15311 
              controlX + l,
15312 
              controlY + t,
15313 
              x + l,
15314 
              y + t
15315 
            );
15316 
            break;
15317 
 
15318 
          case 's': // shorthand cubic bezierCurveTo, relative
15319 
 
15320 
            // transform to absolute x,y
15321 
            tempX = x + current[3];
15322 
            tempY = y + current[4];
15323 
 
15324 
            if (previous[0].match(/[CcSs]/) === null) {
15325 
              // If there is no previous command or if the previous command was not a C, c, S, or s,
15326 
              // the control point is coincident with the current point
15327 
              controlX = x;
15328 
              controlY = y;
15329 
            }
15330 
            else {
15331 
              // calculate reflection of previous control points
15332 
              controlX = 2 * x - controlX;
15333 
              controlY = 2 * y - controlY;
15334 
            }
15335 
 
15336 
            ctx.bezierCurveTo(
15337 
              controlX + l,
15338 
              controlY + t,
15339 
              x + current[1] + l,
15340 
              y + current[2] + t,
15341 
              tempX + l,
15342 
              tempY + t
15343 
            );
15344 
            // set control point to 2nd one of this command
15345 
            // "... the first control point is assumed to be
15346 
            // the reflection of the second control point on
15347 
            // the previous command relative to the current point."
15348 
            controlX = x + current[1];
15349 
            controlY = y + current[2];
15350 
 
15351 
            x = tempX;
15352 
            y = tempY;
15353 
            break;
15354 
 
15355 
          case 'S': // shorthand cubic bezierCurveTo, absolute
15356 
            tempX = current[3];
15357 
            tempY = current[4];
15358 
            if (previous[0].match(/[CcSs]/) === null) {
15359 
              // If there is no previous command or if the previous command was not a C, c, S, or s,
15360 
              // the control point is coincident with the current point
15361 
              controlX = x;
15362 
              controlY = y;
15363 
            }
15364 
            else {
15365 
              // calculate reflection of previous control points
15366 
              controlX = 2 * x - controlX;
15367 
              controlY = 2 * y - controlY;
15368 
            }
15369 
            ctx.bezierCurveTo(
15370 
              controlX + l,
15371 
              controlY + t,
15372 
              current[1] + l,
15373 
              current[2] + t,
15374 
              tempX + l,
15375 
              tempY + t
15376 
            );
15377 
            x = tempX;
15378 
            y = tempY;
15379 
 
15380 
            // set control point to 2nd one of this command
15381 
            // "... the first control point is assumed to be
15382 
            // the reflection of the second control point on
15383 
            // the previous command relative to the current point."
15384 
            controlX = current[1];
15385 
            controlY = current[2];
15386 
 
15387 
            break;
15388 
 
15389 
          case 'q': // quadraticCurveTo, relative
15390 
            // transform to absolute x,y
15391 
            tempX = x + current[3];
15392 
            tempY = y + current[4];
15393 
 
15394 
            controlX = x + current[1];
15395 
            controlY = y + current[2];
15396 
 
15397 
            ctx.quadraticCurveTo(
15398 
              controlX + l,
15399 
              controlY + t,
15400 
              tempX + l,
15401 
              tempY + t
15402 
            );
15403 
            x = tempX;
15404 
            y = tempY;
15405 
            break;
15406 
 
15407 
          case 'Q': // quadraticCurveTo, absolute
15408 
            tempX = current[3];
15409 
            tempY = current[4];
15410 
 
15411 
            ctx.quadraticCurveTo(
15412 
              current[1] + l,
15413 
              current[2] + t,
15414 
              tempX + l,
15415 
              tempY + t
15416 
            );
15417 
            x = tempX;
15418 
            y = tempY;
15419 
            controlX = current[1];
15420 
            controlY = current[2];
15421 
            break;
15422 
 
15423 
          case 't': // shorthand quadraticCurveTo, relative
15424 
 
15425 
            // transform to absolute x,y
15426 
            tempX = x + current[1];
15427 
            tempY = y + current[2];
15428 
 
15429 
            if (previous[0].match(/[QqTt]/) === null) {
15430 
              // If there is no previous command or if the previous command was not a Q, q, T or t,
15431 
              // assume the control point is coincident with the current point
15432 
              controlX = x;
15433 
              controlY = y;
15434 
            }
15435 
            else {
15436 
              // calculate reflection of previous control point
15437 
              controlX = 2 * x - controlX;
15438 
              controlY = 2 * y - controlY;
15439 
            }
15440 
 
15441 
            ctx.quadraticCurveTo(
15442 
              controlX + l,
15443 
              controlY + t,
15444 
              tempX + l,
15445 
              tempY + t
15446 
            );
15447 
            x = tempX;
15448 
            y = tempY;
15449 
 
15450 
            break;
15451 
 
15452 
          case 'T':
15453 
            tempX = current[1];
15454 
            tempY = current[2];
15455 
 
15456 
            if (previous[0].match(/[QqTt]/) === null) {
15457 
              // If there is no previous command or if the previous command was not a Q, q, T or t,
15458 
              // assume the control point is coincident with the current point
15459 
              controlX = x;
15460 
              controlY = y;
15461 
            }
15462 
            else {
15463 
              // calculate reflection of previous control point
15464 
              controlX = 2 * x - controlX;
15465 
              controlY = 2 * y - controlY;
15466 
            }
15467 
            ctx.quadraticCurveTo(
15468 
              controlX + l,
15469 
              controlY + t,
15470 
              tempX + l,
15471 
              tempY + t
15472 
            );
15473 
            x = tempX;
15474 
            y = tempY;
15475 
            break;
15476 
 
15477 
          case 'a':
15478 
            // TODO: optimize this
15479 
            drawArc(ctx, x + l, y + t, [
15480 
              current[1],
15481 
              current[2],
15482 
              current[3],
15483 
              current[4],
15484 
              current[5],
15485 
              current[6] + x + l,
15486 
              current[7] + y + t
15487 
            ]);
15488 
            x += current[6];
15489 
            y += current[7];
15490 
            break;
15491 
 
15492 
          case 'A':
15493 
            // TODO: optimize this
15494 
            drawArc(ctx, x + l, y + t, [
15495 
              current[1],
15496 
              current[2],
15497 
              current[3],
15498 
              current[4],
15499 
              current[5],
15500 
              current[6] + l,
15501 
              current[7] + t
15502 
            ]);
15503 
            x = current[6];
15504 
            y = current[7];
15505 
            break;
15506 
 
15507 
          case 'z':
15508 
          case 'Z':
15509 
            x = subpathStartX;
15510 
            y = subpathStartY;
15511 
            ctx.closePath();
15512 
            break;
15513 
        }
15514 
        previous = current;
15515 
      }
15516 
      this._renderFill(ctx);
15517 
      this._renderStroke(ctx);
15518 
    },
15519 
 
15520 
    /**
15521 
     * Returns string representation of an instance
15522 
     * @return {String} string representation of an instance
15523 
     */
15524 
    toString: function() {
15525 
      return '#<fabric.Path (' + this.complexity() +
15526 
        '): { "top": ' + this.top + ', "left": ' + this.left + ' }>';
15527 
    },
15528 
 
15529 
    /**
15530 
     * Returns object representation of an instance
15531 
     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
15532 
     * @return {Object} object representation of an instance
15533 
     */
15534 
    toObject: function(propertiesToInclude) {
15535 
      var o = extend(this.callSuper('toObject', propertiesToInclude), {
15536 
        path: this.path.map(function(item) { return item.slice() }),
15537 
        pathOffset: this.pathOffset
15538 
      });
15539 
      if (this.sourcePath) {
15540 
        o.sourcePath = this.sourcePath;
15541 
      }
15542 
      if (this.transformMatrix) {
15543 
        o.transformMatrix = this.transformMatrix;
15544 
      }
15545 
      return o;
15546 
    },
15547 
 
15548 
    /**
15549 
     * Returns dataless object representation of an instance
15550 
     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
15551 
     * @return {Object} object representation of an instance
15552 
     */
15553 
    toDatalessObject: function(propertiesToInclude) {
15554 
      var o = this.toObject(propertiesToInclude);
15555 
      if (this.sourcePath) {
15556 
        o.path = this.sourcePath;
15557 
      }
15558 
      delete o.sourcePath;
15559 
      return o;
15560 
    },
15561 
 
15562 
    /* _TO_SVG_START_ */
15563 
    /**
15564 
     * Returns svg representation of an instance
15565 
     * @param {Function} [reviver] Method for further parsing of svg representation.
15566 
     * @return {String} svg representation of an instance
15567 
     */
15568 
    toSVG: function(reviver) {
15569 
      var chunks = [],
15570 
          markup = this._createBaseSVGMarkup(), addTransform = '';
15571 
 
15572 
      for (var i = 0, len = this.path.length; i < len; i++) {
15573 
        chunks.push(this.path[i].join(' '));
15574 
      }
15575 
      var path = chunks.join(' ');
15576 
      if (!(this.group && this.group.type === 'path-group')) {
15577 
        addTransform = ' translate(' + (-this.pathOffset.x) + ', ' + (-this.pathOffset.y) + ') ';
15578 
      }
15579 
      markup.push(
15580 
        //jscs:disable validateIndentation
15581 
        '<path ',
15582 
          'd="', path,
15583 
          '" style="', this.getSvgStyles(),
15584 
          '" transform="', this.getSvgTransform(), addTransform,
15585 
          this.getSvgTransformMatrix(), '" stroke-linecap="round" ',
15586 
        '/>\n'
15587 
        //jscs:enable validateIndentation
15588 
      );
15589 
 
15590 
      return reviver ? reviver(markup.join('')) : markup.join('');
15591 
    },
15592 
    /* _TO_SVG_END_ */
15593 
 
15594 
    /**
15595 
     * Returns number representation of an instance complexity
15596 
     * @return {Number} complexity of this instance
15597 
     */
15598 
    complexity: function() {
15599 
      return this.path.length;
15600 
    },
15601 
 
15602 
    /**
15603 
     * @private
15604 
     */
15605 
    _parsePath: function() {
15606 
      var result = [ ],
15607 
          coords = [ ],
15608 
          currentPath,
15609 
          parsed,
15610 
          re = /([-+]?((\d+\.\d+)|((\d+)|(\.\d+)))(?:e[-+]?\d+)?)/ig,
15611 
          match,
15612 
          coordsStr;
15613 
 
15614 
      for (var i = 0, coordsParsed, len = this.path.length; i < len; i++) {
15615 
        currentPath = this.path[i];
15616 
 
15617 
        coordsStr = currentPath.slice(1).trim();
15618 
        coords.length = 0;
15619 
 
15620 
        while ((match = re.exec(coordsStr))) {
15621 
          coords.push(match[0]);
15622 
        }
15623 
 
15624 
        coordsParsed = [ currentPath.charAt(0) ];
15625 
 
15626 
        for (var j = 0, jlen = coords.length; j < jlen; j++) {
15627 
          parsed = parseFloat(coords[j]);
15628 
          if (!isNaN(parsed)) {
15629 
            coordsParsed.push(parsed);
15630 
          }
15631 
        }
15632 
 
15633 
        var command = coordsParsed[0],
15634 
            commandLength = commandLengths[command.toLowerCase()],
15635 
            repeatedCommand = repeatedCommands[command] || command;
15636 
 
15637 
        if (coordsParsed.length - 1 > commandLength) {
15638 
          for (var k = 1, klen = coordsParsed.length; k < klen; k += commandLength) {
15639 
            result.push([ command ].concat(coordsParsed.slice(k, k + commandLength)));
15640 
            command = repeatedCommand;
15641 
          }
15642 
        }
15643 
        else {
15644 
          result.push(coordsParsed);
15645 
        }
15646 
      }
15647 
 
15648 
      return result;
15649 
    },
15650 
 
15651 
    /**
15652 
     * @private
15653 
     */
15654 
    _parseDimensions: function() {
15655 
 
15656 
      var aX = [],
15657 
          aY = [],
15658 
          current, // current instruction
15659 
          previous = null,
15660 
          subpathStartX = 0,
15661 
          subpathStartY = 0,
15662 
          x = 0, // current x
15663 
          y = 0, // current y
15664 
          controlX = 0, // current control point x
15665 
          controlY = 0, // current control point y
15666 
          tempX,
15667 
          tempY,
15668 
          bounds;
15669 
 
15670 
      for (var i = 0, len = this.path.length; i < len; ++i) {
15671 
 
15672 
        current = this.path[i];
15673 
 
15674 
        switch (current[0]) { // first letter
15675 
 
15676 
          case 'l': // lineto, relative
15677 
            x += current[1];
15678 
            y += current[2];
15679 
            bounds = [ ];
15680 
            break;
15681 
 
15682 
          case 'L': // lineto, absolute
15683 
            x = current[1];
15684 
            y = current[2];
15685 
            bounds = [ ];
15686 
            break;
15687 
 
15688 
          case 'h': // horizontal lineto, relative
15689 
            x += current[1];
15690 
            bounds = [ ];
15691 
            break;
15692 
 
15693 
          case 'H': // horizontal lineto, absolute
15694 
            x = current[1];
15695 
            bounds = [ ];
15696 
            break;
15697 
 
15698 
          case 'v': // vertical lineto, relative
15699 
            y += current[1];
15700 
            bounds = [ ];
15701 
            break;
15702 
 
15703 
          case 'V': // verical lineto, absolute
15704 
            y = current[1];
15705 
            bounds = [ ];
15706 
            break;
15707 
 
15708 
          case 'm': // moveTo, relative
15709 
            x += current[1];
15710 
            y += current[2];
15711 
            subpathStartX = x;
15712 
            subpathStartY = y;
15713 
            bounds = [ ];
15714 
            break;
15715 
 
15716 
          case 'M': // moveTo, absolute
15717 
            x = current[1];
15718 
            y = current[2];
15719 
            subpathStartX = x;
15720 
            subpathStartY = y;
15721 
            bounds = [ ];
15722 
            break;
15723 
 
15724 
          case 'c': // bezierCurveTo, relative
15725 
            tempX = x + current[5];
15726 
            tempY = y + current[6];
15727 
            controlX = x + current[3];
15728 
            controlY = y + current[4];
15729 
            bounds = fabric.util.getBoundsOfCurve(x, y,
15730 
              x + current[1], // x1
15731 
              y + current[2], // y1
15732 
              controlX, // x2
15733 
              controlY, // y2
15734 
              tempX,
15735 
              tempY
15736 
            );
15737 
            x = tempX;
15738 
            y = tempY;
15739 
            break;
15740 
 
15741 
          case 'C': // bezierCurveTo, absolute
15742 
            x = current[5];
15743 
            y = current[6];
15744 
            controlX = current[3];
15745 
            controlY = current[4];
15746 
            bounds = fabric.util.getBoundsOfCurve(x, y,
15747 
              current[1],
15748 
              current[2],
15749 
              controlX,
15750 
              controlY,
15751 
              x,
15752 
              y
15753 
            );
15754 
            break;
15755 
 
15756 
          case 's': // shorthand cubic bezierCurveTo, relative
15757 
 
15758 
            // transform to absolute x,y
15759 
            tempX = x + current[3];
15760 
            tempY = y + current[4];
15761 
 
15762 
            if (previous[0].match(/[CcSs]/) === null) {
15763 
              // If there is no previous command or if the previous command was not a C, c, S, or s,
15764 
              // the control point is coincident with the current point
15765 
              controlX = x;
15766 
              controlY = y;
15767 
            }
15768 
            else {
15769 
              // calculate reflection of previous control points
15770 
              controlX = 2 * x - controlX;
15771 
              controlY = 2 * y - controlY;
15772 
            }
15773 
 
15774 
            bounds = fabric.util.getBoundsOfCurve(x, y,
15775 
              controlX,
15776 
              controlY,
15777 
              x + current[1],
15778 
              y + current[2],
15779 
              tempX,
15780 
              tempY
15781 
            );
15782 
            // set control point to 2nd one of this command
15783 
            // "... the first control point is assumed to be
15784 
            // the reflection of the second control point on
15785 
            // the previous command relative to the current point."
15786 
            controlX = x + current[1];
15787 
            controlY = y + current[2];
15788 
            x = tempX;
15789 
            y = tempY;
15790 
            break;
15791 
 
15792 
          case 'S': // shorthand cubic bezierCurveTo, absolute
15793 
            tempX = current[3];
15794 
            tempY = current[4];
15795 
            if (previous[0].match(/[CcSs]/) === null) {
15796 
              // If there is no previous command or if the previous command was not a C, c, S, or s,
15797 
              // the control point is coincident with the current point
15798 
              controlX = x;
15799 
              controlY = y;
15800 
            }
15801 
            else {
15802 
              // calculate reflection of previous control points
15803 
              controlX = 2 * x - controlX;
15804 
              controlY = 2 * y - controlY;
15805 
            }
15806 
            bounds = fabric.util.getBoundsOfCurve(x, y,
15807 
              controlX,
15808 
              controlY,
15809 
              current[1],
15810 
              current[2],
15811 
              tempX,
15812 
              tempY
15813 
            );
15814 
            x = tempX;
15815 
            y = tempY;
15816 
            // set control point to 2nd one of this command
15817 
            // "... the first control point is assumed to be
15818 
            // the reflection of the second control point on
15819 
            // the previous command relative to the current point."
15820 
            controlX = current[1];
15821 
            controlY = current[2];
15822 
            break;
15823 
 
15824 
          case 'q': // quadraticCurveTo, relative
15825 
            // transform to absolute x,y
15826 
            tempX = x + current[3];
15827 
            tempY = y + current[4];
15828 
            controlX = x + current[1];
15829 
            controlY = y + current[2];
15830 
            bounds = fabric.util.getBoundsOfCurve(x, y,
15831 
              controlX,
15832 
              controlY,
15833 
              controlX,
15834 
              controlY,
15835 
              tempX,
15836 
              tempY
15837 
            );
15838 
            x = tempX;
15839 
            y = tempY;
15840 
            break;
15841 
 
15842 
          case 'Q': // quadraticCurveTo, absolute
15843 
            controlX = current[1];
15844 
            controlY = current[2];
15845 
            bounds = fabric.util.getBoundsOfCurve(x, y,
15846 
              controlX,
15847 
              controlY,
15848 
              controlX,
15849 
              controlY,
15850 
              current[3],
15851 
              current[4]
15852 
            );
15853 
            x = current[3];
15854 
            y = current[4];
15855 
            break;
15856 
 
15857 
          case 't': // shorthand quadraticCurveTo, relative
15858 
            // transform to absolute x,y
15859 
            tempX = x + current[1];
15860 
            tempY = y + current[2];
15861 
            if (previous[0].match(/[QqTt]/) === null) {
15862 
              // If there is no previous command or if the previous command was not a Q, q, T or t,
15863 
              // assume the control point is coincident with the current point
15864 
              controlX = x;
15865 
              controlY = y;
15866 
            }
15867 
            else {
15868 
              // calculate reflection of previous control point
15869 
              controlX = 2 * x - controlX;
15870 
              controlY = 2 * y - controlY;
15871 
            }
15872 
 
15873 
            bounds = fabric.util.getBoundsOfCurve(x, y,
15874 
              controlX,
15875 
              controlY,
15876 
              controlX,
15877 
              controlY,
15878 
              tempX,
15879 
              tempY
15880 
            );
15881 
            x = tempX;
15882 
            y = tempY;
15883 
 
15884 
            break;
15885 
 
15886 
          case 'T':
15887 
            tempX = current[1];
15888 
            tempY = current[2];
15889 
 
15890 
            if (previous[0].match(/[QqTt]/) === null) {
15891 
              // If there is no previous command or if the previous command was not a Q, q, T or t,
15892 
              // assume the control point is coincident with the current point
15893 
              controlX = x;
15894 
              controlY = y;
15895 
            }
15896 
            else {
15897 
              // calculate reflection of previous control point
15898 
              controlX = 2 * x - controlX;
15899 
              controlY = 2 * y - controlY;
15900 
            }
15901 
            bounds = fabric.util.getBoundsOfCurve(x, y,
15902 
              controlX,
15903 
              controlY,
15904 
              controlX,
15905 
              controlY,
15906 
              tempX,
15907 
              tempY
15908 
            );
15909 
            x = tempX;
15910 
            y = tempY;
15911 
            break;
15912 
 
15913 
          case 'a':
15914 
            // TODO: optimize this
15915 
            bounds = fabric.util.getBoundsOfArc(x, y,
15916 
              current[1],
15917 
              current[2],
15918 
              current[3],
15919 
              current[4],
15920 
              current[5],
15921 
              current[6] + x,
15922 
              current[7] + y
15923 
            );
15924 
            x += current[6];
15925 
            y += current[7];
15926 
            break;
15927 
 
15928 
          case 'A':
15929 
            // TODO: optimize this
15930 
            bounds = fabric.util.getBoundsOfArc(x, y,
15931 
              current[1],
15932 
              current[2],
15933 
              current[3],
15934 
              current[4],
15935 
              current[5],
15936 
              current[6],
15937 
              current[7]
15938 
            );
15939 
            x = current[6];
15940 
            y = current[7];
15941 
            break;
15942 
 
15943 
          case 'z':
15944 
          case 'Z':
15945 
            x = subpathStartX;
15946 
            y = subpathStartY;
15947 
            break;
15948 
        }
15949 
        previous = current;
15950 
        bounds.forEach(function (point) {
15951 
          aX.push(point.x);
15952 
          aY.push(point.y);
15953 
        });
15954 
        aX.push(x);
15955 
        aY.push(y);
15956 
      }
15957 
 
15958 
      var minX = min(aX),
15959 
          minY = min(aY),
15960 
          maxX = max(aX),
15961 
          maxY = max(aY),
15962 
          deltaX = maxX - minX,
15963 
          deltaY = maxY - minY,
15964 
 
15965 
          o = {
15966 
            left: minX,
15967 
            top: minY,
15968 
            width: deltaX,
15969 
            height: deltaY
15970 
          };
15971 
 
15972 
      return o;
15973 
    }
15974 
  });
15975 
 
15976 
  /**
15977 
   * Creates an instance of fabric.Path from an object
15978 
   * @static
15979 
   * @memberOf fabric.Path
15980 
   * @param {Object} object
15981 
   * @param {Function} callback Callback to invoke when an fabric.Path instance is created
15982 
   */
15983 
  fabric.Path.fromObject = function(object, callback) {
15984 
    if (typeof object.path === 'string') {
15985 
      fabric.loadSVGFromURL(object.path, function (elements) {
15986 
        var path = elements[0],
15987 
            pathUrl = object.path;
15988 
 
15989 
        delete object.path;
15990 
 
15991 
        fabric.util.object.extend(path, object);
15992 
        path.setSourcePath(pathUrl);
15993 
 
15994 
        callback(path);
15995 
      });
15996 
    }
15997 
    else {
15998 
      callback(new fabric.Path(object.path, object));
15999 
    }
16000 
  };
16001 
 
16002 
  /* _FROM_SVG_START_ */
16003 
  /**
16004 
   * List of attribute names to account for when parsing SVG element (used by `fabric.Path.fromElement`)
16005 
   * @static
16006 
   * @memberOf fabric.Path
16007 
   * @see http://www.w3.org/TR/SVG/paths.html#PathElement
16008 
   */
16009 
  fabric.Path.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat(['d']);
16010 
 
16011 
  /**
16012 
   * Creates an instance of fabric.Path from an SVG <path> element
16013 
   * @static
16014 
   * @memberOf fabric.Path
16015 
   * @param {SVGElement} element to parse
16016 
   * @param {Function} callback Callback to invoke when an fabric.Path instance is created
16017 
   * @param {Object} [options] Options object
16018 
   */
16019 
  fabric.Path.fromElement = function(element, callback, options) {
16020 
    var parsedAttributes = fabric.parseAttributes(element, fabric.Path.ATTRIBUTE_NAMES);
16021 
    callback && callback(new fabric.Path(parsedAttributes.d, extend(parsedAttributes, options)));
16022 
  };
16023 
  /* _FROM_SVG_END_ */
16024 
 
16025 
  /**
16026 
   * Indicates that instances of this type are async
16027 
   * @static
16028 
   * @memberOf fabric.Path
16029 
   * @type Boolean
16030 
   * @default
16031 
   */
16032 
  fabric.Path.async = true;
16033 
 
16034 
})(typeof exports !== 'undefined' ? exports : this);
16035 
 
16036 
 
16037 
(function(global) {
16038 
 
16039 
  'use strict';
16040 
 
16041 
  var fabric = global.fabric || (global.fabric = { }),
16042 
      extend = fabric.util.object.extend,
16043 
      invoke = fabric.util.array.invoke,
16044 
      parentToObject = fabric.Object.prototype.toObject;
16045 
 
16046 
  if (fabric.PathGroup) {
16047 
    fabric.warn('fabric.PathGroup is already defined');
16048 
    return;
16049 
  }
16050 
 
16051 
  /**
16052 
   * Path group class
16053 
   * @class fabric.PathGroup
16054 
   * @extends fabric.Path
16055 
   * @tutorial {@link http://fabricjs.com/fabric-intro-part-1/#path_and_pathgroup}
16056 
   * @see {@link fabric.PathGroup#initialize} for constructor definition
16057 
   */
16058 
  fabric.PathGroup = fabric.util.createClass(fabric.Path, /** @lends fabric.PathGroup.prototype */ {
16059 
 
16060 
    /**
16061 
     * Type of an object
16062 
     * @type String
16063 
     * @default
16064 
     */
16065 
    type: 'path-group',
16066 
 
16067 
    /**
16068 
     * Fill value
16069 
     * @type String
16070 
     * @default
16071 
     */
16072 
    fill: '',
16073 
 
16074 
    /**
16075 
     * Constructor
16076 
     * @param {Array} paths
16077 
     * @param {Object} [options] Options object
16078 
     * @return {fabric.PathGroup} thisArg
16079 
     */
16080 
    initialize: function(paths, options) {
16081 
 
16082 
      options = options || { };
16083 
      this.paths = paths || [ ];
16084 
 
16085 
      for (var i = this.paths.length; i--;) {
16086 
        this.paths[i].group = this;
16087 
      }
16088 
 
16089 
      if (options.toBeParsed) {
16090 
        this.parseDimensionsFromPaths(options);
16091 
        delete options.toBeParsed;
16092 
      }
16093 
      this.setOptions(options);
16094 
      this.setCoords();
16095 
 
16096 
      if (options.sourcePath) {
16097 
        this.setSourcePath(options.sourcePath);
16098 
      }
16099 
    },
16100 
 
16101 
    /**
16102 
     * Calculate width and height based on paths contained
16103 
     */
16104 
    parseDimensionsFromPaths: function(options) {
16105 
      var points, p, xC = [ ], yC = [ ], path, height, width,
16106 
          m = this.transformMatrix;
16107 
      for (var j = this.paths.length; j--;) {
16108 
        path = this.paths[j];
16109 
        height = path.height + path.strokeWidth;
16110 
        width = path.width + path.strokeWidth;
16111 
        points = [
16112 
          { x: path.left, y: path.top },
16113 
          { x: path.left + width, y: path.top },
16114 
          { x: path.left, y: path.top + height },
16115 
          { x: path.left + width, y: path.top + height }
16116 
        ];
16117 
        for (var i = 0; i < points.length; i++) {
16118 
          p = points[i];
16119 
          if (m) {
16120 
            p = fabric.util.transformPoint(p, m, false);
16121 
          }
16122 
          xC.push(p.x);
16123 
          yC.push(p.y);
16124 
        }
16125 
      }
16126 
      options.width = Math.max.apply(null, xC);
16127 
      options.height = Math.max.apply(null, yC);
16128 
    },
16129 
 
16130 
    /**
16131 
     * Renders this group on a specified context
16132 
     * @param {CanvasRenderingContext2D} ctx Context to render this instance on
16133 
     */
16134 
    render: function(ctx) {
16135 
      // do not render if object is not visible
16136 
      if (!this.visible) {
16137 
        return;
16138 
      }
16139 
 
16140 
      ctx.save();
16141 
 
16142 
      if (this.transformMatrix) {
16143 
        ctx.transform.apply(ctx, this.transformMatrix);
16144 
      }
16145 
      this.transform(ctx);
16146 
 
16147 
      this._setShadow(ctx);
16148 
      this.clipTo && fabric.util.clipContext(this, ctx);
16149 
      ctx.translate(-this.width/2, -this.height/2);
16150 
      for (var i = 0, l = this.paths.length; i < l; ++i) {
16151 
        this.paths[i].render(ctx, true);
16152 
      }
16153 
      this.clipTo && ctx.restore();
16154 
      this._removeShadow(ctx);
16155 
      ctx.restore();
16156 
    },
16157 
 
16158 
    /**
16159 
     * Sets certain property to a certain value
16160 
     * @param {String} prop
16161 
     * @param {Any} value
16162 
     * @return {fabric.PathGroup} thisArg
16163 
     */
16164 
    _set: function(prop, value) {
16165 
 
16166 
      if (prop === 'fill' && value && this.isSameColor()) {
16167 
        var i = this.paths.length;
16168 
        while (i--) {
16169 
          this.paths[i]._set(prop, value);
16170 
        }
16171 
      }
16172 
 
16173 
      return this.callSuper('_set', prop, value);
16174 
    },
16175 
 
16176 
    /**
16177 
     * Returns object representation of this path group
16178 
     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
16179 
     * @return {Object} object representation of an instance
16180 
     */
16181 
    toObject: function(propertiesToInclude) {
16182 
      var o = extend(parentToObject.call(this, propertiesToInclude), {
16183 
        paths: invoke(this.getObjects(), 'toObject', propertiesToInclude)
16184 
      });
16185 
      if (this.sourcePath) {
16186 
        o.sourcePath = this.sourcePath;
16187 
      }
16188 
      return o;
16189 
    },
16190 
 
16191 
    /**
16192 
     * Returns dataless object representation of this path group
16193 
     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
16194 
     * @return {Object} dataless object representation of an instance
16195 
     */
16196 
    toDatalessObject: function(propertiesToInclude) {
16197 
      var o = this.toObject(propertiesToInclude);
16198 
      if (this.sourcePath) {
16199 
        o.paths = this.sourcePath;
16200 
      }
16201 
      return o;
16202 
    },
16203 
 
16204 
    /* _TO_SVG_START_ */
16205 
    /**
16206 
     * Returns svg representation of an instance
16207 
     * @param {Function} [reviver] Method for further parsing of svg representation.
16208 
     * @return {String} svg representation of an instance
16209 
     */
16210 
    toSVG: function(reviver) {
16211 
      var objects = this.getObjects(),
16212 
          p = this.getPointByOrigin('left', 'top'),
16213 
          translatePart = 'translate(' + p.x + ' ' + p.y + ')',
16214 
          markup = [
16215 
            //jscs:disable validateIndentation
16216 
            '<g ',
16217 
              'style="', this.getSvgStyles(), '" ',
16218 
              'transform="', this.getSvgTransformMatrix(), translatePart, this.getSvgTransform(), '" ',
16219 
            '>\n'
16220 
            //jscs:enable validateIndentation
16221 
          ];
16222 
 
16223 
      for (var i = 0, len = objects.length; i < len; i++) {
16224 
        markup.push(objects[i].toSVG(reviver));
16225 
      }
16226 
      markup.push('</g>\n');
16227 
 
16228 
      return reviver ? reviver(markup.join('')) : markup.join('');
16229 
    },
16230 
    /* _TO_SVG_END_ */
16231 
 
16232 
    /**
16233 
     * Returns a string representation of this path group
16234 
     * @return {String} string representation of an object
16235 
     */
16236 
    toString: function() {
16237 
      return '#<fabric.PathGroup (' + this.complexity() +
16238 
        '): { top: ' + this.top + ', left: ' + this.left + ' }>';
16239 
    },
16240 
 
16241 
    /**
16242 
     * Returns true if all paths in this group are of same color
16243 
     * @return {Boolean} true if all paths are of the same color (`fill`)
16244 
     */
16245 
    isSameColor: function() {
16246 
      var firstPathFill = (this.getObjects()[0].get('fill') || '').toLowerCase();
16247 
      return this.getObjects().every(function(path) {
16248 
        return (path.get('fill') || '').toLowerCase() === firstPathFill;
16249 
      });
16250 
    },
16251 
 
16252 
    /**
16253 
     * Returns number representation of object's complexity
16254 
     * @return {Number} complexity
16255 
     */
16256 
    complexity: function() {
16257 
      return this.paths.reduce(function(total, path) {
16258 
        return total + ((path && path.complexity) ? path.complexity() : 0);
16259 
      }, 0);
16260 
    },
16261 
 
16262 
    /**
16263 
     * Returns all paths in this path group
16264 
     * @return {Array} array of path objects included in this path group
16265 
     */
16266 
    getObjects: function() {
16267 
      return this.paths;
16268 
    }
16269 
  });
16270 
 
16271 
  /**
16272 
   * Creates fabric.PathGroup instance from an object representation
16273 
   * @static
16274 
   * @memberOf fabric.PathGroup
16275 
   * @param {Object} object Object to create an instance from
16276 
   * @param {Function} callback Callback to invoke when an fabric.PathGroup instance is created
16277 
   */
16278 
  fabric.PathGroup.fromObject = function(object, callback) {
16279 
    if (typeof object.paths === 'string') {
16280 
      fabric.loadSVGFromURL(object.paths, function (elements) {
16281 
 
16282 
        var pathUrl = object.paths;
16283 
        delete object.paths;
16284 
 
16285 
        var pathGroup = fabric.util.groupSVGElements(elements, object, pathUrl);
16286 
 
16287 
        callback(pathGroup);
16288 
      });
16289 
    }
16290 
    else {
16291 
      fabric.util.enlivenObjects(object.paths, function(enlivenedObjects) {
16292 
        delete object.paths;
16293 
        callback(new fabric.PathGroup(enlivenedObjects, object));
16294 
      });
16295 
    }
16296 
  };
16297 
 
16298 
  /**
16299 
   * Indicates that instances of this type are async
16300 
   * @static
16301 
   * @memberOf fabric.PathGroup
16302 
   * @type Boolean
16303 
   * @default
16304 
   */
16305 
  fabric.PathGroup.async = true;
16306 
 
16307 
})(typeof exports !== 'undefined' ? exports : this);
16308 
 
16309 
 
16310 
(function(global) {
16311 
 
16312 
  'use strict';
16313 
 
16314 
  var fabric = global.fabric || (global.fabric = { }),
16315 
      extend = fabric.util.object.extend,
16316 
      min = fabric.util.array.min,
16317 
      max = fabric.util.array.max,
16318 
      invoke = fabric.util.array.invoke;
16319 
 
16320 
  if (fabric.Group) {
16321 
    return;
16322 
  }
16323 
 
16324 
  // lock-related properties, for use in fabric.Group#get
16325 
  // to enable locking behavior on group
16326 
  // when one of its objects has lock-related properties set
16327 
  var _lockProperties = {
16328 
    lockMovementX:  true,
16329 
    lockMovementY:  true,
16330 
    lockRotation:   true,
16331 
    lockScalingX:   true,
16332 
    lockScalingY:   true,
16333 
    lockUniScaling: true
16334 
  };
16335 
 
16336 
  /**
16337 
   * Group class
16338 
   * @class fabric.Group
16339 
   * @extends fabric.Object
16340 
   * @mixes fabric.Collection
16341 
   * @tutorial {@link http://fabricjs.com/fabric-intro-part-3/#groups}
16342 
   * @see {@link fabric.Group#initialize} for constructor definition
16343 
   */
16344 
  fabric.Group = fabric.util.createClass(fabric.Object, fabric.Collection, /** @lends fabric.Group.prototype */ {
16345 
 
16346 
    /**
16347 
     * Type of an object
16348 
     * @type String
16349 
     * @default
16350 
     */
16351 
    type: 'group',
16352 
 
16353 
    /**
16354 
     * Constructor
16355 
     * @param {Object} objects Group objects
16356 
     * @param {Object} [options] Options object
16357 
     * @return {Object} thisArg
16358 
     */
16359 
    initialize: function(objects, options) {
16360 
      options = options || { };
16361 
 
16362 
      this._objects = objects || [];
16363 
      for (var i = this._objects.length; i--; ) {
16364 
        this._objects[i].group = this;
16365 
      }
16366 
 
16367 
      this.originalState = { };
16368 
      this.callSuper('initialize');
16369 
 
16370 
      if (options.originX) {
16371 
        this.originX = options.originX;
16372 
      }
16373 
 
16374 
      if (options.originY) {
16375 
        this.originY = options.originY;
16376 
      }
16377 
 
16378 
      this._calcBounds();
16379 
      this._updateObjectsCoords();
16380 
 
16381 
      this.callSuper('initialize', options);
16382 
 
16383 
      this.setCoords();
16384 
      this.saveCoords();
16385 
    },
16386 
 
16387 
    /**
16388 
     * @private
16389 
     */
16390 
    _updateObjectsCoords: function() {
16391 
      this.forEachObject(this._updateObjectCoords, this);
16392 
    },
16393 
 
16394 
    /**
16395 
     * @private
16396 
     */
16397 
    _updateObjectCoords: function(object) {
16398 
      var objectLeft = object.getLeft(),
16399 
          objectTop = object.getTop(),
16400 
          center = this.getCenterPoint();
16401 
 
16402 
      object.set({
16403 
        originalLeft: objectLeft,
16404 
        originalTop: objectTop,
16405 
        left: objectLeft - center.x,
16406 
        top: objectTop - center.y
16407 
      });
16408 
 
16409 
      object.setCoords();
16410 
 
16411 
      // do not display corners of objects enclosed in a group
16412 
      object.__origHasControls = object.hasControls;
16413 
      object.hasControls = false;
16414 
    },
16415 
 
16416 
    /**
16417 
     * Returns string represenation of a group
16418 
     * @return {String}
16419 
     */
16420 
    toString: function() {
16421 
      return '#<fabric.Group: (' + this.complexity() + ')>';
16422 
    },
16423 
 
16424 
    /**
16425 
     * Adds an object to a group; Then recalculates group's dimension, position.
16426 
     * @param {Object} object
16427 
     * @return {fabric.Group} thisArg
16428 
     * @chainable
16429 
     */
16430 
    addWithUpdate: function(object) {
16431 
      this._restoreObjectsState();
16432 
      if (object) {
16433 
        this._objects.push(object);
16434 
        object.group = this;
16435 
      }
16436 
      // since _restoreObjectsState set objects inactive
16437 
      this.forEachObject(this._setObjectActive, this);
16438 
      this._calcBounds();
16439 
      this._updateObjectsCoords();
16440 
      return this;
16441 
    },
16442 
 
16443 
    /**
16444 
     * @private
16445 
     */
16446 
    _setObjectActive: function(object) {
16447 
      object.set('active', true);
16448 
      object.group = this;
16449 
    },
16450 
 
16451 
    /**
16452 
     * Removes an object from a group; Then recalculates group's dimension, position.
16453 
     * @param {Object} object
16454 
     * @return {fabric.Group} thisArg
16455 
     * @chainable
16456 
     */
16457 
    removeWithUpdate: function(object) {
16458 
      this._moveFlippedObject(object);
16459 
      this._restoreObjectsState();
16460 
 
16461 
      // since _restoreObjectsState set objects inactive
16462 
      this.forEachObject(this._setObjectActive, this);
16463 
 
16464 
      this.remove(object);
16465 
      this._calcBounds();
16466 
      this._updateObjectsCoords();
16467 
 
16468 
      return this;
16469 
    },
16470 
 
16471 
    /**
16472 
     * @private
16473 
     */
16474 
    _onObjectAdded: function(object) {
16475 
      object.group = this;
16476 
    },
16477 
 
16478 
    /**
16479 
     * @private
16480 
     */
16481 
    _onObjectRemoved: function(object) {
16482 
      delete object.group;
16483 
      object.set('active', false);
16484 
    },
16485 
 
16486 
    /**
16487 
     * Properties that are delegated to group objects when reading/writing
16488 
     * @param {Object} delegatedProperties
16489 
     */
16490 
    delegatedProperties: {
16491 
      fill:             true,
16492 
      opacity:          true,
16493 
      fontFamily:       true,
16494 
      fontWeight:       true,
16495 
      fontSize:         true,
16496 
      fontStyle:        true,
16497 
      lineHeight:       true,
16498 
      textDecoration:   true,
16499 
      textAlign:        true,
16500 
      backgroundColor:  true
16501 
    },
16502 
 
16503 
    /**
16504 
     * @private
16505 
     */
16506 
    _set: function(key, value) {
16507 
      if (key in this.delegatedProperties) {
16508 
        var i = this._objects.length;
16509 
        while (i--) {
16510 
          this._objects[i].set(key, value);
16511 
        }
16512 
      }
16513 
      this.callSuper('_set', key, value);
16514 
    },
16515 
 
16516 
    /**
16517 
     * Returns object representation of an instance
16518 
     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
16519 
     * @return {Object} object representation of an instance
16520 
     */
16521 
    toObject: function(propertiesToInclude) {
16522 
      return extend(this.callSuper('toObject', propertiesToInclude), {
16523 
        objects: invoke(this._objects, 'toObject', propertiesToInclude)
16524 
      });
16525 
    },
16526 
 
16527 
    /**
16528 
     * Renders instance on a given context
16529 
     * @param {CanvasRenderingContext2D} ctx context to render instance on
16530 
     */
16531 
    render: function(ctx) {
16532 
      // do not render if object is not visible
16533 
      if (!this.visible) {
16534 
        return;
16535 
      }
16536 
 
16537 
      ctx.save();
16538 
      this.clipTo && fabric.util.clipContext(this, ctx);
16539 
      this.transform(ctx);
16540 
      // the array is now sorted in order of highest first, so start from end
16541 
      for (var i = 0, len = this._objects.length; i < len; i++) {
16542 
        this._renderObject(this._objects[i], ctx);
16543 
      }
16544 
 
16545 
      this.clipTo && ctx.restore();
16546 
 
16547 
      ctx.restore();
16548 
    },
16549 
 
16550 
    /**
16551 
     * Renders controls and borders for the object
16552 
     * @param {CanvasRenderingContext2D} ctx Context to render on
16553 
     * @param {Boolean} [noTransform] When true, context is not transformed
16554 
     */
16555 
    _renderControls: function(ctx, noTransform) {
16556 
      this.callSuper('_renderControls', ctx, noTransform);
16557 
      for (var i = 0, len = this._objects.length; i < len; i++) {
16558 
        this._objects[i]._renderControls(ctx);
16559 
      }
16560 
    },
16561 
 
16562 
    /**
16563 
     * @private
16564 
     */
16565 
    _renderObject: function(object, ctx) {
16566 
      var originalHasRotatingPoint = object.hasRotatingPoint;
16567 
 
16568 
      // do not render if object is not visible
16569 
      if (!object.visible) {
16570 
        return;
16571 
      }
16572 
 
16573 
      object.hasRotatingPoint = false;
16574 
 
16575 
      object.render(ctx);
16576 
 
16577 
      object.hasRotatingPoint = originalHasRotatingPoint;
16578 
    },
16579 
 
16580 
    /**
16581 
     * Retores original state of each of group objects (original state is that which was before group was created).
16582 
     * @private
16583 
     * @return {fabric.Group} thisArg
16584 
     * @chainable
16585 
     */
16586 
    _restoreObjectsState: function() {
16587 
      this._objects.forEach(this._restoreObjectState, this);
16588 
      return this;
16589 
    },
16590 
 
16591 
    /**
16592 
     * Realises the transform from this group onto the supplied object
16593 
     * i.e. it tells you what would happen if the supplied object was in
16594 
     * the group, and then the group was destroyed. It mutates the supplied
16595 
     * object.
16596 
     * @param {fabric.Object} object
16597 
     * @return {fabric.Object} transformedObject
16598 
    */
16599 
    realizeTransform: function(object) {
16600 
      this._moveFlippedObject(object);
16601 
      this._setObjectPosition(object);
16602 
      return object;
16603 
    },
16604 
    /**
16605 
     * Moves a flipped object to the position where it's displayed
16606 
     * @private
16607 
     * @param {fabric.Object} object
16608 
     * @return {fabric.Group} thisArg
16609 
     */
16610 
    _moveFlippedObject: function(object) {
16611 
      var oldOriginX = object.get('originX'),
16612 
          oldOriginY = object.get('originY'),
16613 
          center = object.getCenterPoint();
16614 
 
16615 
      object.set({
16616 
        originX: 'center',
16617 
        originY: 'center',
16618 
        left: center.x,
16619 
        top: center.y
16620 
      });
16621 
 
16622 
      this._toggleFlipping(object);
16623 
 
16624 
      var newOrigin = object.getPointByOrigin(oldOriginX, oldOriginY);
16625 
 
16626 
      object.set({
16627 
        originX: oldOriginX,
16628 
        originY: oldOriginY,
16629 
        left: newOrigin.x,
16630 
        top: newOrigin.y
16631 
      });
16632 
 
16633 
      return this;
16634 
    },
16635 
 
16636 
    /**
16637 
     * @private
16638 
     */
16639 
    _toggleFlipping: function(object) {
16640 
      if (this.flipX) {
16641 
        object.toggle('flipX');
16642 
        object.set('left', -object.get('left'));
16643 
        object.setAngle(-object.getAngle());
16644 
      }
16645 
      if (this.flipY) {
16646 
        object.toggle('flipY');
16647 
        object.set('top', -object.get('top'));
16648 
        object.setAngle(-object.getAngle());
16649 
      }
16650 
    },
16651 
 
16652 
    /**
16653 
     * Restores original state of a specified object in group
16654 
     * @private
16655 
     * @param {fabric.Object} object
16656 
     * @return {fabric.Group} thisArg
16657 
     */
16658 
    _restoreObjectState: function(object) {
16659 
      this._setObjectPosition(object);
16660 
 
16661 
      object.setCoords();
16662 
      object.hasControls = object.__origHasControls;
16663 
      delete object.__origHasControls;
16664 
      object.set('active', false);
16665 
      object.setCoords();
16666 
      delete object.group;
16667 
 
16668 
      return this;
16669 
    },
16670 
 
16671 
    /**
16672 
     * @private
16673 
     */
16674 
    _setObjectPosition: function(object) {
16675 
      var center = this.getCenterPoint(),
16676 
          rotated = this._getRotatedLeftTop(object);
16677 
 
16678 
      object.set({
16679 
        angle: object.getAngle() + this.getAngle(),
16680 
        left: center.x + rotated.left,
16681 
        top: center.y + rotated.top,
16682 
        scaleX: object.get('scaleX') * this.get('scaleX'),
16683 
        scaleY: object.get('scaleY') * this.get('scaleY')
16684 
      });
16685 
    },
16686 
 
16687 
    /**
16688 
     * @private
16689 
     */
16690 
    _getRotatedLeftTop: function(object) {
16691 
      var groupAngle = this.getAngle() * (Math.PI / 180);
16692 
      return {
16693 
        left: (-Math.sin(groupAngle) * object.getTop() * this.get('scaleY') +
16694 
                Math.cos(groupAngle) * object.getLeft() * this.get('scaleX')),
16695 
 
16696 
        top:  (Math.cos(groupAngle) * object.getTop() * this.get('scaleY') +
16697 
               Math.sin(groupAngle) * object.getLeft() * this.get('scaleX'))
16698 
      };
16699 
    },
16700 
 
16701 
    /**
16702 
     * Destroys a group (restoring state of its objects)
16703 
     * @return {fabric.Group} thisArg
16704 
     * @chainable
16705 
     */
16706 
    destroy: function() {
16707 
      this._objects.forEach(this._moveFlippedObject, this);
16708 
      return this._restoreObjectsState();
16709 
    },
16710 
 
16711 
    /**
16712 
     * Saves coordinates of this instance (to be used together with `hasMoved`)
16713 
     * @saveCoords
16714 
     * @return {fabric.Group} thisArg
16715 
     * @chainable
16716 
     */
16717 
    saveCoords: function() {
16718 
      this._originalLeft = this.get('left');
16719 
      this._originalTop = this.get('top');
16720 
      return this;
16721 
    },
16722 
 
16723 
    /**
16724 
     * Checks whether this group was moved (since `saveCoords` was called last)
16725 
     * @return {Boolean} true if an object was moved (since fabric.Group#saveCoords was called)
16726 
     */
16727 
    hasMoved: function() {
16728 
      return this._originalLeft !== this.get('left') ||
16729 
             this._originalTop !== this.get('top');
16730 
    },
16731 
 
16732 
    /**
16733 
     * Sets coordinates of all group objects
16734 
     * @return {fabric.Group} thisArg
16735 
     * @chainable
16736 
     */
16737 
    setObjectsCoords: function() {
16738 
      this.forEachObject(function(object) {
16739 
        object.setCoords();
16740 
      });
16741 
      return this;
16742 
    },
16743 
 
16744 
    /**
16745 
     * @private
16746 
     */
16747 
    _calcBounds: function(onlyWidthHeight) {
16748 
      var aX = [],
16749 
          aY = [],
16750 
          o, prop,
16751 
          props = ['tr', 'br', 'bl', 'tl'];
16752 
 
16753 
      for (var i = 0, len = this._objects.length; i < len; ++i) {
16754 
        o = this._objects[i];
16755 
        o.setCoords();
16756 
        for (var j = 0; j < props.length; j++) {
16757 
          prop = props[j];
16758 
          aX.push(o.oCoords[prop].x);
16759 
          aY.push(o.oCoords[prop].y);
16760 
        }
16761 
      }
16762 
 
16763 
      this.set(this._getBounds(aX, aY, onlyWidthHeight));
16764 
    },
16765 
 
16766 
    /**
16767 
     * @private
16768 
     */
16769 
    _getBounds: function(aX, aY, onlyWidthHeight) {
16770 
      var ivt = fabric.util.invertTransform(this.getViewportTransform()),
16771 
          minXY = fabric.util.transformPoint(new fabric.Point(min(aX), min(aY)), ivt),
16772 
          maxXY = fabric.util.transformPoint(new fabric.Point(max(aX), max(aY)), ivt),
16773 
          obj = {
16774 
            width: (maxXY.x - minXY.x) || 0,
16775 
            height: (maxXY.y - minXY.y) || 0
16776 
          };
16777 
 
16778 
      if (!onlyWidthHeight) {
16779 
        obj.left = minXY.x || 0;
16780 
        obj.top = minXY.y || 0;
16781 
        if (this.originX === 'center') {
16782 
          obj.left += obj.width / 2;
16783 
        }
16784 
        if (this.originX === 'right') {
16785 
          obj.left += obj.width;
16786 
        }
16787 
        if (this.originY === 'center') {
16788 
          obj.top += obj.height / 2;
16789 
        }
16790 
        if (this.originY === 'bottom') {
16791 
          obj.top += obj.height;
16792 
        }
16793 
      }
16794 
      return obj;
16795 
    },
16796 
 
16797 
    /* _TO_SVG_START_ */
16798 
    /**
16799 
     * Returns svg representation of an instance
16800 
     * @param {Function} [reviver] Method for further parsing of svg representation.
16801 
     * @return {String} svg representation of an instance
16802 
     */
16803 
    toSVG: function(reviver) {
16804 
      var markup = [
16805 
        //jscs:disable validateIndentation
16806 
        '<g ',
16807 
          'transform="', this.getSvgTransform(),
16808 
        '">\n'
16809 
        //jscs:enable validateIndentation
16810 
      ];
16811 
 
16812 
      for (var i = 0, len = this._objects.length; i < len; i++) {
16813 
        markup.push(this._objects[i].toSVG(reviver));
16814 
      }
16815 
 
16816 
      markup.push('</g>\n');
16817 
 
16818 
      return reviver ? reviver(markup.join('')) : markup.join('');
16819 
    },
16820 
    /* _TO_SVG_END_ */
16821 
 
16822 
    /**
16823 
     * Returns requested property
16824 
     * @param {String} prop Property to get
16825 
     * @return {Any}
16826 
     */
16827 
    get: function(prop) {
16828 
      if (prop in _lockProperties) {
16829 
        if (this[prop]) {
16830 
          return this[prop];
16831 
        }
16832 
        else {
16833 
          for (var i = 0, len = this._objects.length; i < len; i++) {
16834 
            if (this._objects[i][prop]) {
16835 
              return true;
16836 
            }
16837 
          }
16838 
          return false;
16839 
        }
16840 
      }
16841 
      else {
16842 
        if (prop in this.delegatedProperties) {
16843 
          return this._objects[0] && this._objects[0].get(prop);
16844 
        }
16845 
        return this[prop];
16846 
      }
16847 
    }
16848 
  });
16849 
 
16850 
  /**
16851 
   * Returns {@link fabric.Group} instance from an object representation
16852 
   * @static
16853 
   * @memberOf fabric.Group
16854 
   * @param {Object} object Object to create a group from
16855 
   * @param {Function} [callback] Callback to invoke when an group instance is created
16856 
   * @return {fabric.Group} An instance of fabric.Group
16857 
   */
16858 
  fabric.Group.fromObject = function(object, callback) {
16859 
    fabric.util.enlivenObjects(object.objects, function(enlivenedObjects) {
16860 
      delete object.objects;
16861 
      callback && callback(new fabric.Group(enlivenedObjects, object));
16862 
    });
16863 
  };
16864 
 
16865 
  /**
16866 
   * Indicates that instances of this type are async
16867 
   * @static
16868 
   * @memberOf fabric.Group
16869 
   * @type Boolean
16870 
   * @default
16871 
   */
16872 
  fabric.Group.async = true;
16873 
 
16874 
})(typeof exports !== 'undefined' ? exports : this);
16875 
 
16876 
 
16877 
(function(global) {
16878 
 
16879 
  'use strict';
16880 
 
16881 
  var extend = fabric.util.object.extend;
16882 
 
16883 
  if (!global.fabric) {
16884 
    global.fabric = { };
16885 
  }
16886 
 
16887 
  if (global.fabric.Image) {
16888 
    fabric.warn('fabric.Image is already defined.');
16889 
    return;
16890 
  }
16891 
 
16892 
  /**
16893 
   * Image class
16894 
   * @class fabric.Image
16895 
   * @extends fabric.Object
16896 
   * @tutorial {@link http://fabricjs.com/fabric-intro-part-1/#images}
16897 
   * @see {@link fabric.Image#initialize} for constructor definition
16898 
   */
16899 
  fabric.Image = fabric.util.createClass(fabric.Object, /** @lends fabric.Image.prototype */ {
16900 
 
16901 
    /**
16902 
     * Type of an object
16903 
     * @type String
16904 
     * @default
16905 
     */
16906 
    type: 'image',
16907 
 
16908 
    /**
16909 
     * crossOrigin value (one of "", "anonymous", "allow-credentials")
16910 
     * @see https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes
16911 
     * @type String
16912 
     * @default
16913 
     */
16914 
    crossOrigin: '',
16915 
 
16916 
    /**
16917 
     * AlignX value, part of preserveAspectRatio (one of "none", "mid", "min", "max")
16918 
     * @see http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute
16919 
     * This parameter defines how the picture is aligned to its viewport when image element width differs from image width.
16920 
     * @type String
16921 
     * @default
16922 
     */
16923 
    alignX: 'none',
16924 
 
16925 
    /**
16926 
     * AlignY value, part of preserveAspectRatio (one of "none", "mid", "min", "max")
16927 
     * @see http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute
16928 
     * This parameter defines how the picture is aligned to its viewport when image element height differs from image height.
16929 
     * @type String
16930 
     * @default
16931 
     */
16932 
    alignY: 'none',
16933 
 
16934 
    /**
16935 
     * meetOrSlice value, part of preserveAspectRatio  (one of "meet", "slice").
16936 
     * if meet the image is always fully visibile, if slice the viewport is always filled with image.
16937 
     * @see http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute
16938 
     * @type String
16939 
     * @default
16940 
     */
16941 
    meetOrSlice: 'meet',
16942 
 
16943 
    /**
16944 
     * private
16945 
     * contains last value of scaleX to detect
16946 
     * if the Image got resized after the last Render
16947 
     * @type Number
16948 
     */
16949 
    _lastScaleX: 1,
16950 
 
16951 
    /**
16952 
     * private
16953 
     * contains last value of scaleY to detect
16954 
     * if the Image got resized after the last Render
16955 
     * @type Number
16956 
     */
16957 
    _lastScaleY: 1,
16958 
 
16959 
    /**
16960 
     * Constructor
16961 
     * @param {HTMLImageElement | String} element Image element
16962 
     * @param {Object} [options] Options object
16963 
     * @return {fabric.Image} thisArg
16964 
     */
16965 
    initialize: function(element, options) {
16966 
      options || (options = { });
16967 
 
16968 
      this.filters = [ ];
16969 
      this.resizeFilters = [ ];
16970 
      this.callSuper('initialize', options);
16971 
 
16972 
      this._initElement(element, options);
16973 
      this._initConfig(options);
16974 
 
16975 
      if (options.filters) {
16976 
        this.filters = options.filters;
16977 
        this.applyFilters();
16978 
      }
16979 
    },
16980 
 
16981 
    /**
16982 
     * Returns image element which this instance if based on
16983 
     * @return {HTMLImageElement} Image element
16984 
     */
16985 
    getElement: function() {
16986 
      return this._element;
16987 
    },
16988 
 
16989 
    /**
16990 
     * Sets image element for this instance to a specified one.
16991 
     * If filters defined they are applied to new image.
16992 
     * You might need to call `canvas.renderAll` and `object.setCoords` after replacing, to render new image and update controls area.
16993 
     * @param {HTMLImageElement} element
16994 
     * @param {Function} [callback] Callback is invoked when all filters have been applied and new image is generated
16995 
     * @param {Object} [options] Options object
16996 
     * @return {fabric.Image} thisArg
16997 
     * @chainable
16998 
     */
16999 
    setElement: function(element, callback, options) {
17000 
      this._element = element;
17001 
      this._originalElement = element;
17002 
      this._initConfig(options);
17003 
 
17004 
      if (this.filters.length !== 0) {
17005 
        this.applyFilters(callback);
17006 
      }
17007 
      else if (callback) {
17008 
        callback();
17009 
      }
17010 
 
17011 
      return this;
17012 
    },
17013 
 
17014 
    /**
17015 
     * Sets crossOrigin value (on an instance and corresponding image element)
17016 
     * @return {fabric.Image} thisArg
17017 
     * @chainable
17018 
     */
17019 
    setCrossOrigin: function(value) {
17020 
      this.crossOrigin = value;
17021 
      this._element.crossOrigin = value;
17022 
 
17023 
      return this;
17024 
    },
17025 
 
17026 
    /**
17027 
     * Returns original size of an image
17028 
     * @return {Object} Object with "width" and "height" properties
17029 
     */
17030 
    getOriginalSize: function() {
17031 
      var element = this.getElement();
17032 
      return {
17033 
        width: element.width,
17034 
        height: element.height
17035 
      };
17036 
    },
17037 
 
17038 
    /**
17039 
     * @private
17040 
     * @param {CanvasRenderingContext2D} ctx Context to render on
17041 
     */
17042 
    _stroke: function(ctx) {
17043 
      ctx.save();
17044 
      this._setStrokeStyles(ctx);
17045 
      ctx.beginPath();
17046 
      ctx.strokeRect(-this.width / 2, -this.height / 2, this.width, this.height);
17047 
      ctx.closePath();
17048 
      ctx.restore();
17049 
    },
17050 
 
17051 
    /**
17052 
     * @private
17053 
     * @param {CanvasRenderingContext2D} ctx Context to render on
17054 
     */
17055 
    _renderDashedStroke: function(ctx) {
17056 
      var x = -this.width / 2,
17057 
          y = -this.height / 2,
17058 
          w = this.width,
17059 
          h = this.height;
17060 
 
17061 
      ctx.save();
17062 
      this._setStrokeStyles(ctx);
17063 
 
17064 
      ctx.beginPath();
17065 
      fabric.util.drawDashedLine(ctx, x, y, x + w, y, this.strokeDashArray);
17066 
      fabric.util.drawDashedLine(ctx, x + w, y, x + w, y + h, this.strokeDashArray);
17067 
      fabric.util.drawDashedLine(ctx, x + w, y + h, x, y + h, this.strokeDashArray);
17068 
      fabric.util.drawDashedLine(ctx, x, y + h, x, y, this.strokeDashArray);
17069 
      ctx.closePath();
17070 
      ctx.restore();
17071 
    },
17072 
 
17073 
    /**
17074 
     * Returns object representation of an instance
17075 
     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
17076 
     * @return {Object} Object representation of an instance
17077 
     */
17078 
    toObject: function(propertiesToInclude) {
17079 
      return extend(this.callSuper('toObject', propertiesToInclude), {
17080 
        src: this._originalElement.src || this._originalElement._src,
17081 
        filters: this.filters.map(function(filterObj) {
17082 
          return filterObj && filterObj.toObject();
17083 
        }),
17084 
        crossOrigin: this.crossOrigin,
17085 
        alignX: this.alignX,
17086 
        alignY: this.alignY,
17087 
        meetOrSlice: this.meetOrSlice
17088 
      });
17089 
    },
17090 
 
17091 
    /* _TO_SVG_START_ */
17092 
    /**
17093 
     * Returns SVG representation of an instance
17094 
     * @param {Function} [reviver] Method for further parsing of svg representation.
17095 
     * @return {String} svg representation of an instance
17096 
     */
17097 
    toSVG: function(reviver) {
17098 
      var markup = [], x = -this.width / 2, y = -this.height / 2,
17099 
          preserveAspectRatio = 'none';
17100 
      if (this.group && this.group.type === 'path-group') {
17101 
        x = this.left;
17102 
        y = this.top;
17103 
      }
17104 
      if (this.alignX !== 'none' && this.alignY !== 'none') {
17105 
        preserveAspectRatio = 'x' + this.alignX + 'Y' + this.alignY + ' ' + this.meetOrSlice;
17106 
      }
17107 
      markup.push(
17108 
        '<g transform="', this.getSvgTransform(), this.getSvgTransformMatrix(), '">\n',
17109 
          '<image xlink:href="', this.getSvgSrc(),
17110 
            '" x="', x, '" y="', y,
17111 
            '" style="', this.getSvgStyles(),
17112 
            // we're essentially moving origin of transformation from top/left corner to the center of the shape
17113 
            // by wrapping it in container <g> element with actual transformation, then offsetting object to the top/left
17114 
            // so that object's center aligns with container's left/top
17115 
            '" width="', this.width,
17116 
            '" height="', this.height,
17117 
            '" preserveAspectRatio="', preserveAspectRatio, '"',
17118 
          '></image>\n'
17119 
      );
17120 
 
17121 
      if (this.stroke || this.strokeDashArray) {
17122 
        var origFill = this.fill;
17123 
        this.fill = null;
17124 
        markup.push(
17125 
          '<rect ',
17126 
            'x="', x, '" y="', y,
17127 
            '" width="', this.width, '" height="', this.height,
17128 
            '" style="', this.getSvgStyles(),
17129 
          '"/>\n'
17130 
        );
17131 
        this.fill = origFill;
17132 
      }
17133 
 
17134 
      markup.push('</g>\n');
17135 
 
17136 
      return reviver ? reviver(markup.join('')) : markup.join('');
17137 
    },
17138 
    /* _TO_SVG_END_ */
17139 
 
17140 
    /**
17141 
     * Returns source of an image
17142 
     * @return {String} Source of an image
17143 
     */
17144 
    getSrc: function() {
17145 
      if (this.getElement()) {
17146 
        return this.getElement().src || this.getElement()._src;
17147 
      }
17148 
    },
17149 
 
17150 
    /**
17151 
     * Sets source of an image
17152 
     * @param {String} src Source string (URL)
17153 
     * @param {Function} [callback] Callback is invoked when image has been loaded (and all filters have been applied)
17154 
     * @param {Object} [options] Options object
17155 
     * @return {fabric.Image} thisArg
17156 
     * @chainable
17157 
     */
17158 
    setSrc: function(src, callback, options) {
17159 
      fabric.util.loadImage(src, function(img) {
17160 
        return this.setElement(img, callback, options);
17161 
      }, this, options && options.crossOrigin);
17162 
    },
17163 
 
17164 
    /**
17165 
     * Returns string representation of an instance
17166 
     * @return {String} String representation of an instance
17167 
     */
17168 
    toString: function() {
17169 
      return '#<fabric.Image: { src: "' + this.getSrc() + '" }>';
17170 
    },
17171 
 
17172 
    /**
17173 
     * Returns a clone of an instance
17174 
     * @param {Function} callback Callback is invoked with a clone as a first argument
17175 
     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
17176 
     */
17177 
    clone: function(callback, propertiesToInclude) {
17178 
      this.constructor.fromObject(this.toObject(propertiesToInclude), callback);
17179 
    },
17180 
 
17181 
    /**
17182 
     * Applies filters assigned to this image (from "filters" array)
17183 
     * @method applyFilters
17184 
     * @param {Function} callback Callback is invoked when all filters have been applied and new image is generated
17185 
     * @return {fabric.Image} thisArg
17186 
     * @chainable
17187 
     */
17188 
    applyFilters: function(callback, filters, imgElement, forResizing) {
17189 
 
17190 
      filters = filters || this.filters;
17191 
      imgElement = imgElement || this._originalElement;
17192 
 
17193 
      if (!imgElement) {
17194 
        return;
17195 
      }
17196 
 
17197 
      var imgEl = imgElement,
17198 
          canvasEl = fabric.util.createCanvasElement(),
17199 
          replacement = fabric.util.createImage(),
17200 
          _this = this;
17201 
 
17202 
      canvasEl.width = imgEl.width;
17203 
      canvasEl.height = imgEl.height;
17204 
      canvasEl.getContext('2d').drawImage(imgEl, 0, 0, imgEl.width, imgEl.height);
17205 
 
17206 
      if (filters.length === 0) {
17207 
        this._element = imgElement;
17208 
        callback && callback();
17209 
        return canvasEl;
17210 
      }
17211 
      filters.forEach(function(filter) {
17212 
        filter && filter.applyTo(canvasEl, filter.scaleX || _this.scaleX, filter.scaleY || _this.scaleY);
17213 
        if (!forResizing && filter && filter.type === 'Resize') {
17214 
          _this.width *= filter.scaleX;
17215 
          _this.height *= filter.scaleY;
17216 
        }
17217 
      });
17218 
 
17219 
      /** @ignore */
17220 
      replacement.width = canvasEl.width;
17221 
      replacement.height = canvasEl.height;
17222 
 
17223 
      if (fabric.isLikelyNode) {
17224 
        replacement.src = canvasEl.toBuffer(undefined, fabric.Image.pngCompression);
17225 
        // onload doesn't fire in some node versions, so we invoke callback manually
17226 
        _this._element = replacement;
17227 
        !forResizing && (_this._filteredEl = replacement);
17228 
        callback && callback();
17229 
      }
17230 
      else {
17231 
        replacement.onload = function() {
17232 
          _this._element = replacement;
17233 
          !forResizing && (_this._filteredEl = replacement);
17234 
          callback && callback();
17235 
          replacement.onload = canvasEl = imgEl = null;
17236 
        };
17237 
        replacement.src = canvasEl.toDataURL('image/png');
17238 
      }
17239 
      return canvasEl;
17240 
    },
17241 
    /**
17242 
     * @private
17243 
     * @param {CanvasRenderingContext2D} ctx Context to render on
17244 
     */
17245 
    _render: function(ctx, noTransform) {
17246 
      var x, y, imageMargins = this._findMargins(), elementToDraw;
17247 
 
17248 
      x = (noTransform ? this.left : -this.width / 2);
17249 
      y = (noTransform ? this.top : -this.height / 2);
17250 
 
17251 
      if (this.meetOrSlice === 'slice') {
17252 
        ctx.beginPath();
17253 
        ctx.rect(x, y, this.width, this.height);
17254 
        ctx.clip();
17255 
      }
17256 
 
17257 
      if (this.isMoving === false && this.resizeFilters.length && this._needsResize()) {
17258 
        this._lastScaleX = this.scaleX;
17259 
        this._lastScaleY = this.scaleY;
17260 
        elementToDraw = this.applyFilters(null, this.resizeFilters, this._filteredEl || this._originalElement, true);
17261 
      }
17262 
      else {
17263 
        elementToDraw = this._element;
17264 
      }
17265 
      elementToDraw && ctx.drawImage(elementToDraw,
17266 
                                     x + imageMargins.marginX,
17267 
                                     y + imageMargins.marginY,
17268 
                                     imageMargins.width,
17269 
                                     imageMargins.height
17270 
                                    );
17271 
 
17272 
      this._renderStroke(ctx);
17273 
    },
17274 
    /**
17275 
     * @private, needed to check if image needs resize
17276 
     */
17277 
    _needsResize: function() {
17278 
      return (this.scaleX !== this._lastScaleX || this.scaleY !== this._lastScaleY);
17279 
    },
17280 
 
17281 
    /**
17282 
     * @private
17283 
     */
17284 
    _findMargins: function() {
17285 
      var width = this.width, height = this.height, scales,
17286 
          scale, marginX = 0, marginY = 0;
17287 
 
17288 
      if (this.alignX !== 'none' || this.alignY !== 'none') {
17289 
        scales = [this.width / this._element.width, this.height / this._element.height];
17290 
        scale = this.meetOrSlice === 'meet'
17291 
                ? Math.min.apply(null, scales) : Math.max.apply(null, scales);
17292 
        width = this._element.width * scale;
17293 
        height = this._element.height * scale;
17294 
        if (this.alignX === 'Mid') {
17295 
          marginX = (this.width - width) / 2;
17296 
        }
17297 
        if (this.alignX === 'Max') {
17298 
          marginX = this.width - width;
17299 
        }
17300 
        if (this.alignY === 'Mid') {
17301 
          marginY = (this.height - height) / 2;
17302 
        }
17303 
        if (this.alignY === 'Max') {
17304 
          marginY = this.height - height;
17305 
        }
17306 
      }
17307 
      return {
17308 
        width:  width,
17309 
        height: height,
17310 
        marginX: marginX,
17311 
        marginY: marginY
17312 
      };
17313 
    },
17314 
 
17315 
    /**
17316 
     * @private
17317 
     */
17318 
    _resetWidthHeight: function() {
17319 
      var element = this.getElement();
17320 
 
17321 
      this.set('width', element.width);
17322 
      this.set('height', element.height);
17323 
    },
17324 
 
17325 
    /**
17326 
     * The Image class's initialization method. This method is automatically
17327 
     * called by the constructor.
17328 
     * @private
17329 
     * @param {HTMLImageElement|String} element The element representing the image
17330 
     */
17331 
    _initElement: function(element) {
17332 
      this.setElement(fabric.util.getById(element));
17333 
      fabric.util.addClass(this.getElement(), fabric.Image.CSS_CANVAS);
17334 
    },
17335 
 
17336 
    /**
17337 
     * @private
17338 
     * @param {Object} [options] Options object
17339 
     */
17340 
    _initConfig: function(options) {
17341 
      options || (options = { });
17342 
      this.setOptions(options);
17343 
      this._setWidthHeight(options);
17344 
      if (this._element && this.crossOrigin) {
17345 
        this._element.crossOrigin = this.crossOrigin;
17346 
      }
17347 
    },
17348 
 
17349 
    /**
17350 
     * @private
17351 
     * @param {Object} object Object with filters property
17352 
     * @param {Function} callback Callback to invoke when all fabric.Image.filters instances are created
17353 
     */
17354 
    _initFilters: function(object, callback) {
17355 
      if (object.filters && object.filters.length) {
17356 
        fabric.util.enlivenObjects(object.filters, function(enlivenedObjects) {
17357 
          callback && callback(enlivenedObjects);
17358 
        }, 'fabric.Image.filters');
17359 
      }
17360 
      else {
17361 
        callback && callback();
17362 
      }
17363 
    },
17364 
 
17365 
    /**
17366 
     * @private
17367 
     * @param {Object} [options] Object with width/height properties
17368 
     */
17369 
    _setWidthHeight: function(options) {
17370 
      this.width = 'width' in options
17371 
        ? options.width
17372 
        : (this.getElement()
17373 
            ? this.getElement().width || 0
17374 
            : 0);
17375 
 
17376 
      this.height = 'height' in options
17377 
        ? options.height
17378 
        : (this.getElement()
17379 
            ? this.getElement().height || 0
17380 
            : 0);
17381 
    },
17382 
 
17383 
    /**
17384 
     * Returns complexity of an instance
17385 
     * @return {Number} complexity of this instance
17386 
     */
17387 
    complexity: function() {
17388 
      return 1;
17389 
    }
17390 
  });
17391 
 
17392 
  /**
17393 
   * Default CSS class name for canvas
17394 
   * @static
17395 
   * @type String
17396 
   * @default
17397 
   */
17398 
  fabric.Image.CSS_CANVAS = 'canvas-img';
17399 
 
17400 
  /**
17401 
   * Alias for getSrc
17402 
   * @static
17403 
   */
17404 
  fabric.Image.prototype.getSvgSrc = fabric.Image.prototype.getSrc;
17405 
 
17406 
  /**
17407 
   * Creates an instance of fabric.Image from its object representation
17408 
   * @static
17409 
   * @param {Object} object Object to create an instance from
17410 
   * @param {Function} [callback] Callback to invoke when an image instance is created
17411 
   */
17412 
  fabric.Image.fromObject = function(object, callback) {
17413 
    fabric.util.loadImage(object.src, function(img) {
17414 
      fabric.Image.prototype._initFilters.call(object, object, function(filters) {
17415 
        object.filters = filters || [ ];
17416 
        var instance = new fabric.Image(img, object);
17417 
        callback && callback(instance);
17418 
      });
17419 
    }, null, object.crossOrigin);
17420 
  };
17421 
 
17422 
  /**
17423 
   * Creates an instance of fabric.Image from an URL string
17424 
   * @static
17425 
   * @param {String} url URL to create an image from
17426 
   * @param {Function} [callback] Callback to invoke when image is created (newly created image is passed as a first argument)
17427 
   * @param {Object} [imgOptions] Options object
17428 
   */
17429 
  fabric.Image.fromURL = function(url, callback, imgOptions) {
17430 
    fabric.util.loadImage(url, function(img) {
17431 
      callback && callback(new fabric.Image(img, imgOptions));
17432 
    }, null, imgOptions && imgOptions.crossOrigin);
17433 
  };
17434 
 
17435 
  /* _FROM_SVG_START_ */
17436 
  /**
17437 
   * List of attribute names to account for when parsing SVG element (used by {@link fabric.Image.fromElement})
17438 
   * @static
17439 
   * @see {@link http://www.w3.org/TR/SVG/struct.html#ImageElement}
17440 
   */
17441 
  fabric.Image.ATTRIBUTE_NAMES =
17442 
    fabric.SHARED_ATTRIBUTES.concat('x y width height preserveAspectRatio xlink:href'.split(' '));
17443 
 
17444 
  /**
17445 
   * Returns {@link fabric.Image} instance from an SVG element
17446 
   * @static
17447 
   * @param {SVGElement} element Element to parse
17448 
   * @param {Function} callback Callback to execute when fabric.Image object is created
17449 
   * @param {Object} [options] Options object
17450 
   * @return {fabric.Image} Instance of fabric.Image
17451 
   */
17452 
  fabric.Image.fromElement = function(element, callback, options) {
17453 
    var parsedAttributes = fabric.parseAttributes(element, fabric.Image.ATTRIBUTE_NAMES),
17454 
        align = 'xMidYMid', meetOrSlice = 'meet', alignX, alignY, aspectRatioAttrs;
17455 
 
17456 
    if (parsedAttributes.preserveAspectRatio) {
17457 
      aspectRatioAttrs = parsedAttributes.preserveAspectRatio.split(' ');
17458 
    }
17459 
 
17460 
    if (aspectRatioAttrs && aspectRatioAttrs.length) {
17461 
      meetOrSlice = aspectRatioAttrs.pop();
17462 
      if (meetOrSlice !== 'meet' && meetOrSlice !== 'slice') {
17463 
        align = meetOrSlice;
17464 
        meetOrSlice = 'meet';
17465 
      }
17466 
      else if (aspectRatioAttrs.length) {
17467 
        align = aspectRatioAttrs.pop();
17468 
      }
17469 
    }
17470 
    //divide align in alignX and alignY
17471 
    alignX = align !== 'none' ? align.slice(1, 4) : 'none';
17472 
    alignY = align !== 'none' ? align.slice(5, 8) : 'none';
17473 
    parsedAttributes.alignX = alignX;
17474 
    parsedAttributes.alignY = alignY;
17475 
    parsedAttributes.meetOrSlice = meetOrSlice;
17476 
    fabric.Image.fromURL(parsedAttributes['xlink:href'], callback,
17477 
      extend((options ? fabric.util.object.clone(options) : { }), parsedAttributes));
17478 
  };
17479 
  /* _FROM_SVG_END_ */
17480 
 
17481 
  /**
17482 
   * Indicates that instances of this type are async
17483 
   * @static
17484 
   * @type Boolean
17485 
   * @default
17486 
   */
17487 
  fabric.Image.async = true;
17488 
 
17489 
  /**
17490 
   * Indicates compression level used when generating PNG under Node (in applyFilters). Any of 0-9
17491 
   * @static
17492 
   * @type Number
17493 
   * @default
17494 
   */
17495 
  fabric.Image.pngCompression = 1;
17496 
 
17497 
})(typeof exports !== 'undefined' ? exports : this);
17498 
 
17499 
 
17500 
fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ {
17501 
 
17502 
  /**
17503 
   * @private
17504 
   * @return {Number} angle value
17505 
   */
17506 
  _getAngleValueForStraighten: function() {
17507 
    var angle = this.getAngle() % 360;
17508 
    if (angle > 0) {
17509 
      return Math.round((angle - 1) / 90) * 90;
17510 
    }
17511 
    return Math.round(angle / 90) * 90;
17512 
  },
17513 
 
17514 
  /**
17515 
   * Straightens an object (rotating it from current angle to one of 0, 90, 180, 270, etc. depending on which is closer)
17516 
   * @return {fabric.Object} thisArg
17517 
   * @chainable
17518 
   */
17519 
  straighten: function() {
17520 
    this.setAngle(this._getAngleValueForStraighten());
17521 
    return this;
17522 
  },
17523 
 
17524 
  /**
17525 
   * Same as {@link fabric.Object.prototype.straighten} but with animation
17526 
   * @param {Object} callbacks Object with callback functions
17527 
   * @param {Function} [callbacks.onComplete] Invoked on completion
17528 
   * @param {Function} [callbacks.onChange] Invoked on every step of animation
17529 
   * @return {fabric.Object} thisArg
17530 
   * @chainable
17531 
   */
17532 
  fxStraighten: function(callbacks) {
17533 
    callbacks = callbacks || { };
17534 
 
17535 
    var empty = function() { },
17536 
        onComplete = callbacks.onComplete || empty,
17537 
        onChange = callbacks.onChange || empty,
17538 
        _this = this;
17539 
 
17540 
    fabric.util.animate({
17541 
      startValue: this.get('angle'),
17542 
      endValue: this._getAngleValueForStraighten(),
17543 
      duration: this.FX_DURATION,
17544 
      onChange: function(value) {
17545 
        _this.setAngle(value);
17546 
        onChange();
17547 
      },
17548 
      onComplete: function() {
17549 
        _this.setCoords();
17550 
        onComplete();
17551 
      },
17552 
      onStart: function() {
17553 
        _this.set('active', false);
17554 
      }
17555 
    });
17556 
 
17557 
    return this;
17558 
  }
17559 
});
17560 
 
17561 
fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ {
17562 
 
17563 
  /**
17564 
   * Straightens object, then rerenders canvas
17565 
   * @param {fabric.Object} object Object to straighten
17566 
   * @return {fabric.Canvas} thisArg
17567 
   * @chainable
17568 
   */
17569 
  straightenObject: function (object) {
17570 
    object.straighten();
17571 
    this.renderAll();
17572 
    return this;
17573 
  },
17574 
 
17575 
  /**
17576 
   * Same as {@link fabric.Canvas.prototype.straightenObject}, but animated
17577 
   * @param {fabric.Object} object Object to straighten
17578 
   * @return {fabric.Canvas} thisArg
17579 
   * @chainable
17580 
   */
17581 
  fxStraightenObject: function (object) {
17582 
    object.fxStraighten({
17583 
      onChange: this.renderAll.bind(this)
17584 
    });
17585 
    return this;
17586 
  }
17587 
});
17588 
 
17589 
 
17590 
/**
17591 
 * @namespace fabric.Image.filters
17592 
 * @memberOf fabric.Image
17593 
 * @tutorial {@link http://fabricjs.com/fabric-intro-part-2/#image_filters}
17594 
 * @see {@link http://fabricjs.com/image-filters/|ImageFilters demo}
17595 
 */
17596 
fabric.Image.filters = fabric.Image.filters || { };
17597 
 
17598 
/**
17599 
 * Root filter class from which all filter classes inherit from
17600 
 * @class fabric.Image.filters.BaseFilter
17601 
 * @memberOf fabric.Image.filters
17602 
 */
17603 
fabric.Image.filters.BaseFilter = fabric.util.createClass(/** @lends fabric.Image.filters.BaseFilter.prototype */ {
17604 
 
17605 
  /**
17606 
   * Filter type
17607 
   * @param {String} type
17608 
   * @default
17609 
   */
17610 
  type: 'BaseFilter',
17611 
 
17612 
  /**
17613 
   * Constructor
17614 
   * @param {Object} [options] Options object
17615 
   */
17616 
  initialize: function(options) {
17617 
    if (options) {
17618 
      this.setOptions(options);
17619 
    }
17620 
  },
17621 
 
17622 
  /**
17623 
   * Sets filter's properties from options
17624 
   * @param {Object} [options] Options object
17625 
   */
17626 
  setOptions: function(options) {
17627 
    for (var prop in options) {
17628 
      this[prop] = options[prop];
17629 
    }
17630 
  },
17631 
 
17632 
  /**
17633 
   * Returns object representation of an instance
17634 
   * @return {Object} Object representation of an instance
17635 
   */
17636 
  toObject: function() {
17637 
    return { type: this.type };
17638 
  },
17639 
 
17640 
  /**
17641 
   * Returns a JSON representation of an instance
17642 
   * @return {Object} JSON
17643 
   */
17644 
  toJSON: function() {
17645 
    // delegate, not alias
17646 
    return this.toObject();
17647 
  }
17648 
});
17649 
 
17650 
 
17651 
(function(global) {
17652 
 
17653 
  'use strict';
17654 
 
17655 
  var fabric  = global.fabric || (global.fabric = { }),
17656 
      extend = fabric.util.object.extend;
17657 
 
17658 
  /**
17659 
   * Brightness filter class
17660 
   * @class fabric.Image.filters.Brightness
17661 
   * @memberOf fabric.Image.filters
17662 
   * @extends fabric.Image.filters.BaseFilter
17663 
   * @see {@link fabric.Image.filters.Brightness#initialize} for constructor definition
17664 
   * @see {@link http://fabricjs.com/image-filters/|ImageFilters demo}
17665 
   * @example
17666 
   * var filter = new fabric.Image.filters.Brightness({
17667 
   *   brightness: 200
17668 
   * });
17669 
   * object.filters.push(filter);
17670 
   * object.applyFilters(canvas.renderAll.bind(canvas));
17671 
   */
17672 
  fabric.Image.filters.Brightness = fabric.util.createClass(fabric.Image.filters.BaseFilter, /** @lends fabric.Image.filters.Brightness.prototype */ {
17673 
 
17674 
    /**
17675 
     * Filter type
17676 
     * @param {String} type
17677 
     * @default
17678 
     */
17679 
    type: 'Brightness',
17680 
 
17681 
    /**
17682 
     * Constructor
17683 
     * @memberOf fabric.Image.filters.Brightness.prototype
17684 
     * @param {Object} [options] Options object
17685 
     * @param {Number} [options.brightness=0] Value to brighten the image up (0..255)
17686 
     */
17687 
    initialize: function(options) {
17688 
      options = options || { };
17689 
      this.brightness = options.brightness || 0;
17690 
    },
17691 
 
17692 
    /**
17693 
     * Applies filter to canvas element
17694 
     * @param {Object} canvasEl Canvas element to apply filter to
17695 
     */
17696 
    applyTo: function(canvasEl) {
17697 
      var context = canvasEl.getContext('2d'),
17698 
          imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
17699 
          data = imageData.data,
17700 
          brightness = this.brightness;
17701 
 
17702 
      for (var i = 0, len = data.length; i < len; i += 4) {
17703 
        data[i] += brightness;
17704 
        data[i + 1] += brightness;
17705 
        data[i + 2] += brightness;
17706 
      }
17707 
 
17708 
      context.putImageData(imageData, 0, 0);
17709 
    },
17710 
 
17711 
    /**
17712 
     * Returns object representation of an instance
17713 
     * @return {Object} Object representation of an instance
17714 
     */
17715 
    toObject: function() {
17716 
      return extend(this.callSuper('toObject'), {
17717 
        brightness: this.brightness
17718 
      });
17719 
    }
17720 
  });
17721 
 
17722 
  /**
17723 
   * Returns filter instance from an object representation
17724 
   * @static
17725 
   * @param {Object} object Object to create an instance from
17726 
   * @return {fabric.Image.filters.Brightness} Instance of fabric.Image.filters.Brightness
17727 
   */
17728 
  fabric.Image.filters.Brightness.fromObject = function(object) {
17729 
    return new fabric.Image.filters.Brightness(object);
17730 
  };
17731 
 
17732 
})(typeof exports !== 'undefined' ? exports : this);
17733 
 
17734 
 
17735 
(function(global) {
17736 
 
17737 
  'use strict';
17738 
 
17739 
  var fabric  = global.fabric || (global.fabric = { }),
17740 
      extend = fabric.util.object.extend;
17741 
 
17742 
  /**
17743 
   * Adapted from <a href="http://www.html5rocks.com/en/tutorials/canvas/imagefilters/">html5rocks article</a>
17744 
   * @class fabric.Image.filters.Convolute
17745 
   * @memberOf fabric.Image.filters
17746 
   * @extends fabric.Image.filters.BaseFilter
17747 
   * @see {@link fabric.Image.filters.Convolute#initialize} for constructor definition
17748 
   * @see {@link http://fabricjs.com/image-filters/|ImageFilters demo}
17749 
   * @example <caption>Sharpen filter</caption>
17750 
   * var filter = new fabric.Image.filters.Convolute({
17751 
   *   matrix: [ 0, -1,  0,
17752 
   *            -1,  5, -1,
17753 
   *             0, -1,  0 ]
17754 
   * });
17755 
   * object.filters.push(filter);
17756 
   * object.applyFilters(canvas.renderAll.bind(canvas));
17757 
   * @example <caption>Blur filter</caption>
17758 
   * var filter = new fabric.Image.filters.Convolute({
17759 
   *   matrix: [ 1/9, 1/9, 1/9,
17760 
   *             1/9, 1/9, 1/9,
17761 
   *             1/9, 1/9, 1/9 ]
17762 
   * });
17763 
   * object.filters.push(filter);
17764 
   * object.applyFilters(canvas.renderAll.bind(canvas));
17765 
   * @example <caption>Emboss filter</caption>
17766 
   * var filter = new fabric.Image.filters.Convolute({
17767 
   *   matrix: [ 1,   1,  1,
17768 
   *             1, 0.7, -1,
17769 
   *            -1,  -1, -1 ]
17770 
   * });
17771 
   * object.filters.push(filter);
17772 
   * object.applyFilters(canvas.renderAll.bind(canvas));
17773 
   * @example <caption>Emboss filter with opaqueness</caption>
17774 
   * var filter = new fabric.Image.filters.Convolute({
17775 
   *   opaque: true,
17776 
   *   matrix: [ 1,   1,  1,
17777 
   *             1, 0.7, -1,
17778 
   *            -1,  -1, -1 ]
17779 
   * });
17780 
   * object.filters.push(filter);
17781 
   * object.applyFilters(canvas.renderAll.bind(canvas));
17782 
   */
17783 
  fabric.Image.filters.Convolute = fabric.util.createClass(fabric.Image.filters.BaseFilter, /** @lends fabric.Image.filters.Convolute.prototype */ {
17784 
 
17785 
    /**
17786 
     * Filter type
17787 
     * @param {String} type
17788 
     * @default
17789 
     */
17790 
    type: 'Convolute',
17791 
 
17792 
    /**
17793 
     * Constructor
17794 
     * @memberOf fabric.Image.filters.Convolute.prototype
17795 
     * @param {Object} [options] Options object
17796 
     * @param {Boolean} [options.opaque=false] Opaque value (true/false)
17797 
     * @param {Array} [options.matrix] Filter matrix
17798 
     */
17799 
    initialize: function(options) {
17800 
      options = options || { };
17801 
 
17802 
      this.opaque = options.opaque;
17803 
      this.matrix = options.matrix || [
17804 
        0, 0, 0,
17805 
        0, 1, 0,
17806 
        0, 0, 0
17807 
      ];
17808 
 
17809 
      var canvasEl = fabric.util.createCanvasElement();
17810 
      this.tmpCtx = canvasEl.getContext('2d');
17811 
    },
17812 
 
17813 
    /**
17814 
     * @private
17815 
     */
17816 
    _createImageData: function(w, h) {
17817 
      return this.tmpCtx.createImageData(w, h);
17818 
    },
17819 
 
17820 
    /**
17821 
     * Applies filter to canvas element
17822 
     * @param {Object} canvasEl Canvas element to apply filter to
17823 
     */
17824 
    applyTo: function(canvasEl) {
17825 
 
17826 
      var weights = this.matrix,
17827 
          context = canvasEl.getContext('2d'),
17828 
          pixels = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
17829 
 
17830 
          side = Math.round(Math.sqrt(weights.length)),
17831 
          halfSide = Math.floor(side/2),
17832 
          src = pixels.data,
17833 
          sw = pixels.width,
17834 
          sh = pixels.height,
17835 
 
17836 
          // pad output by the convolution matrix
17837 
          w = sw,
17838 
          h = sh,
17839 
          output = this._createImageData(w, h),
17840 
 
17841 
          dst = output.data,
17842 
 
17843 
          // go through the destination image pixels
17844 
          alphaFac = this.opaque ? 1 : 0;
17845 
 
17846 
      for (var y = 0; y < h; y++) {
17847 
        for (var x = 0; x < w; x++) {
17848 
          var sy = y,
17849 
              sx = x,
17850 
              dstOff = (y * w + x) * 4,
17851 
              // calculate the weighed sum of the source image pixels that
17852 
              // fall under the convolution matrix
17853 
              r = 0, g = 0, b = 0, a = 0;
17854 
 
17855 
          for (var cy = 0; cy < side; cy++) {
17856 
            for (var cx = 0; cx < side; cx++) {
17857 
 
17858 
              var scy = sy + cy - halfSide,
17859 
                  scx = sx + cx - halfSide;
17860 
 
17861 
              /* jshint maxdepth:5 */
17862 
              if (scy < 0 || scy > sh || scx < 0 || scx > sw) {
17863 
                continue;
17864 
              }
17865 
 
17866 
              var srcOff = (scy * sw + scx) * 4,
17867 
                  wt = weights[cy * side + cx];
17868 
 
17869 
              r += src[srcOff] * wt;
17870 
              g += src[srcOff + 1] * wt;
17871 
              b += src[srcOff + 2] * wt;
17872 
              a += src[srcOff + 3] * wt;
17873 
            }
17874 
          }
17875 
          dst[dstOff] = r;
17876 
          dst[dstOff + 1] = g;
17877 
          dst[dstOff + 2] = b;
17878 
          dst[dstOff + 3] = a + alphaFac * (255 - a);
17879 
        }
17880 
      }
17881 
 
17882 
      context.putImageData(output, 0, 0);
17883 
    },
17884 
 
17885 
    /**
17886 
     * Returns object representation of an instance
17887 
     * @return {Object} Object representation of an instance
17888 
     */
17889 
    toObject: function() {
17890 
      return extend(this.callSuper('toObject'), {
17891 
        opaque: this.opaque,
17892 
        matrix: this.matrix
17893 
      });
17894 
    }
17895 
  });
17896 
 
17897 
  /**
17898 
   * Returns filter instance from an object representation
17899 
   * @static
17900 
   * @param {Object} object Object to create an instance from
17901 
   * @return {fabric.Image.filters.Convolute} Instance of fabric.Image.filters.Convolute
17902 
   */
17903 
  fabric.Image.filters.Convolute.fromObject = function(object) {
17904 
    return new fabric.Image.filters.Convolute(object);
17905 
  };
17906 
 
17907 
})(typeof exports !== 'undefined' ? exports : this);
17908 
 
17909 
 
17910 
(function(global) {
17911 
 
17912 
  'use strict';
17913 
 
17914 
  var fabric  = global.fabric || (global.fabric = { }),
17915 
      extend = fabric.util.object.extend;
17916 
 
17917 
  /**
17918 
   * GradientTransparency filter class
17919 
   * @class fabric.Image.filters.GradientTransparency
17920 
   * @memberOf fabric.Image.filters
17921 
   * @extends fabric.Image.filters.BaseFilter
17922 
   * @see {@link fabric.Image.filters.GradientTransparency#initialize} for constructor definition
17923 
   * @see {@link http://fabricjs.com/image-filters/|ImageFilters demo}
17924 
   * @example
17925 
   * var filter = new fabric.Image.filters.GradientTransparency({
17926 
   *   threshold: 200
17927 
   * });
17928 
   * object.filters.push(filter);
17929 
   * object.applyFilters(canvas.renderAll.bind(canvas));
17930 
   */
17931 
  fabric.Image.filters.GradientTransparency = fabric.util.createClass(fabric.Image.filters.BaseFilter, /** @lends fabric.Image.filters.GradientTransparency.prototype */ {
17932 
 
17933 
    /**
17934 
     * Filter type
17935 
     * @param {String} type
17936 
     * @default
17937 
     */
17938 
    type: 'GradientTransparency',
17939 
 
17940 
    /**
17941 
     * Constructor
17942 
     * @memberOf fabric.Image.filters.GradientTransparency.prototype
17943 
     * @param {Object} [options] Options object
17944 
     * @param {Number} [options.threshold=100] Threshold value
17945 
     */
17946 
    initialize: function(options) {
17947 
      options = options || { };
17948 
      this.threshold = options.threshold || 100;
17949 
    },
17950 
 
17951 
    /**
17952 
     * Applies filter to canvas element
17953 
     * @param {Object} canvasEl Canvas element to apply filter to
17954 
     */
17955 
    applyTo: function(canvasEl) {
17956 
      var context = canvasEl.getContext('2d'),
17957 
          imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
17958 
          data = imageData.data,
17959 
          threshold = this.threshold,
17960 
          total = data.length;
17961 
 
17962 
      for (var i = 0, len = data.length; i < len; i += 4) {
17963 
        data[i + 3] = threshold + 255 * (total - i) / total;
17964 
      }
17965 
 
17966 
      context.putImageData(imageData, 0, 0);
17967 
    },
17968 
 
17969 
    /**
17970 
     * Returns object representation of an instance
17971 
     * @return {Object} Object representation of an instance
17972 
     */
17973 
    toObject: function() {
17974 
      return extend(this.callSuper('toObject'), {
17975 
        threshold: this.threshold
17976 
      });
17977 
    }
17978 
  });
17979 
 
17980 
  /**
17981 
   * Returns filter instance from an object representation
17982 
   * @static
17983 
   * @param {Object} object Object to create an instance from
17984 
   * @return {fabric.Image.filters.GradientTransparency} Instance of fabric.Image.filters.GradientTransparency
17985 
   */
17986 
  fabric.Image.filters.GradientTransparency.fromObject = function(object) {
17987 
    return new fabric.Image.filters.GradientTransparency(object);
17988 
  };
17989 
 
17990 
})(typeof exports !== 'undefined' ? exports : this);
17991 
 
17992 
 
17993 
(function(global) {
17994 
 
17995 
  'use strict';
17996 
 
17997 
  var fabric  = global.fabric || (global.fabric = { });
17998 
 
17999 
  /**
18000 
   * Grayscale image filter class
18001 
   * @class fabric.Image.filters.Grayscale
18002 
   * @memberOf fabric.Image.filters
18003 
   * @extends fabric.Image.filters.BaseFilter
18004 
   * @see {@link http://fabricjs.com/image-filters/|ImageFilters demo}
18005 
   * @example
18006 
   * var filter = new fabric.Image.filters.Grayscale();
18007 
   * object.filters.push(filter);
18008 
   * object.applyFilters(canvas.renderAll.bind(canvas));
18009 
   */
18010 
  fabric.Image.filters.Grayscale = fabric.util.createClass(fabric.Image.filters.BaseFilter, /** @lends fabric.Image.filters.Grayscale.prototype */ {
18011 
 
18012 
    /**
18013 
     * Filter type
18014 
     * @param {String} type
18015 
     * @default
18016 
     */
18017 
    type: 'Grayscale',
18018 
 
18019 
    /**
18020 
     * Applies filter to canvas element
18021 
     * @memberOf fabric.Image.filters.Grayscale.prototype
18022 
     * @param {Object} canvasEl Canvas element to apply filter to
18023 
     */
18024 
    applyTo: function(canvasEl) {
18025 
      var context = canvasEl.getContext('2d'),
18026 
          imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
18027 
          data = imageData.data,
18028 
          len = imageData.width * imageData.height * 4,
18029 
          index = 0,
18030 
          average;
18031 
 
18032 
      while (index < len) {
18033 
        average = (data[index] + data[index + 1] + data[index + 2]) / 3;
18034 
        data[index]     = average;
18035 
        data[index + 1] = average;
18036 
        data[index + 2] = average;
18037 
        index += 4;
18038 
      }
18039 
 
18040 
      context.putImageData(imageData, 0, 0);
18041 
    }
18042 
  });
18043 
 
18044 
  /**
18045 
   * Returns filter instance from an object representation
18046 
   * @static
18047 
   * @return {fabric.Image.filters.Grayscale} Instance of fabric.Image.filters.Grayscale
18048 
   */
18049 
  fabric.Image.filters.Grayscale.fromObject = function() {
18050 
    return new fabric.Image.filters.Grayscale();
18051 
  };
18052 
 
18053 
})(typeof exports !== 'undefined' ? exports : this);
18054 
 
18055 
 
18056 
(function(global) {
18057 
 
18058 
  'use strict';
18059 
 
18060 
  var fabric  = global.fabric || (global.fabric = { });
18061 
 
18062 
  /**
18063 
   * Invert filter class
18064 
   * @class fabric.Image.filters.Invert
18065 
   * @memberOf fabric.Image.filters
18066 
   * @extends fabric.Image.filters.BaseFilter
18067 
   * @see {@link http://fabricjs.com/image-filters/|ImageFilters demo}
18068 
   * @example
18069 
   * var filter = new fabric.Image.filters.Invert();
18070 
   * object.filters.push(filter);
18071 
   * object.applyFilters(canvas.renderAll.bind(canvas));
18072 
   */
18073 
  fabric.Image.filters.Invert = fabric.util.createClass(fabric.Image.filters.BaseFilter, /** @lends fabric.Image.filters.Invert.prototype */ {
18074 
 
18075 
    /**
18076 
     * Filter type
18077 
     * @param {String} type
18078 
     * @default
18079 
     */
18080 
    type: 'Invert',
18081 
 
18082 
    /**
18083 
     * Applies filter to canvas element
18084 
     * @memberOf fabric.Image.filters.Invert.prototype
18085 
     * @param {Object} canvasEl Canvas element to apply filter to
18086 
     */
18087 
    applyTo: function(canvasEl) {
18088 
      var context = canvasEl.getContext('2d'),
18089 
          imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
18090 
          data = imageData.data,
18091 
          iLen = data.length, i;
18092 
 
18093 
      for (i = 0; i < iLen; i+=4) {
18094 
        data[i] = 255 - data[i];
18095 
        data[i + 1] = 255 - data[i + 1];
18096 
        data[i + 2] = 255 - data[i + 2];
18097 
      }
18098 
 
18099 
      context.putImageData(imageData, 0, 0);
18100 
    }
18101 
  });
18102 
 
18103 
  /**
18104 
   * Returns filter instance from an object representation
18105 
   * @static
18106 
   * @return {fabric.Image.filters.Invert} Instance of fabric.Image.filters.Invert
18107 
   */
18108 
  fabric.Image.filters.Invert.fromObject = function() {
18109 
    return new fabric.Image.filters.Invert();
18110 
  };
18111 
 
18112 
})(typeof exports !== 'undefined' ? exports : this);
18113 
 
18114 
 
18115 
(function(global) {
18116 
 
18117 
  'use strict';
18118 
 
18119 
  var fabric  = global.fabric || (global.fabric = { }),
18120 
      extend = fabric.util.object.extend;
18121 
 
18122 
  /**
18123 
   * Mask filter class
18124 
   * See http://resources.aleph-1.com/mask/
18125 
   * @class fabric.Image.filters.Mask
18126 
   * @memberOf fabric.Image.filters
18127 
   * @extends fabric.Image.filters.BaseFilter
18128 
   * @see {@link fabric.Image.filters.Mask#initialize} for constructor definition
18129 
   */
18130 
  fabric.Image.filters.Mask = fabric.util.createClass(fabric.Image.filters.BaseFilter, /** @lends fabric.Image.filters.Mask.prototype */ {
18131 
 
18132 
    /**
18133 
     * Filter type
18134 
     * @param {String} type
18135 
     * @default
18136 
     */
18137 
    type: 'Mask',
18138 
 
18139 
    /**
18140 
     * Constructor
18141 
     * @memberOf fabric.Image.filters.Mask.prototype
18142 
     * @param {Object} [options] Options object
18143 
     * @param {fabric.Image} [options.mask] Mask image object
18144 
     * @param {Number} [options.channel=0] Rgb channel (0, 1, 2 or 3)
18145 
     */
18146 
    initialize: function(options) {
18147 
      options = options || { };
18148 
 
18149 
      this.mask = options.mask;
18150 
      this.channel = [ 0, 1, 2, 3 ].indexOf(options.channel) > -1 ? options.channel : 0;
18151 
    },
18152 
 
18153 
    /**
18154 
     * Applies filter to canvas element
18155 
     * @param {Object} canvasEl Canvas element to apply filter to
18156 
     */
18157 
    applyTo: function(canvasEl) {
18158 
      if (!this.mask) {
18159 
        return;
18160 
      }
18161 
 
18162 
      var context = canvasEl.getContext('2d'),
18163 
          imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
18164 
          data = imageData.data,
18165 
          maskEl = this.mask.getElement(),
18166 
          maskCanvasEl = fabric.util.createCanvasElement(),
18167 
          channel = this.channel,
18168 
          i,
18169 
          iLen = imageData.width * imageData.height * 4;
18170 
 
18171 
      maskCanvasEl.width = maskEl.width;
18172 
      maskCanvasEl.height = maskEl.height;
18173 
 
18174 
      maskCanvasEl.getContext('2d').drawImage(maskEl, 0, 0, maskEl.width, maskEl.height);
18175 
 
18176 
      var maskImageData = maskCanvasEl.getContext('2d').getImageData(0, 0, maskEl.width, maskEl.height),
18177 
          maskData = maskImageData.data;
18178 
 
18179 
      for (i = 0; i < iLen; i += 4) {
18180 
        data[i + 3] = maskData[i + channel];
18181 
      }
18182 
 
18183 
      context.putImageData(imageData, 0, 0);
18184 
    },
18185 
 
18186 
    /**
18187 
     * Returns object representation of an instance
18188 
     * @return {Object} Object representation of an instance
18189 
     */
18190 
    toObject: function() {
18191 
      return extend(this.callSuper('toObject'), {
18192 
        mask: this.mask.toObject(),
18193 
        channel: this.channel
18194 
      });
18195 
    }
18196 
  });
18197 
 
18198 
  /**
18199 
   * Returns filter instance from an object representation
18200 
   * @static
18201 
   * @param {Object} object Object to create an instance from
18202 
   * @param {Function} [callback] Callback to invoke when a mask filter instance is created
18203 
   */
18204 
  fabric.Image.filters.Mask.fromObject = function(object, callback) {
18205 
    fabric.util.loadImage(object.mask.src, function(img) {
18206 
      object.mask = new fabric.Image(img, object.mask);
18207 
      callback && callback(new fabric.Image.filters.Mask(object));
18208 
    });
18209 
  };
18210 
 
18211 
  /**
18212 
   * Indicates that instances of this type are async
18213 
   * @static
18214 
   * @type Boolean
18215 
   * @default
18216 
   */
18217 
  fabric.Image.filters.Mask.async = true;
18218 
 
18219 
})(typeof exports !== 'undefined' ? exports : this);
18220 
 
18221 
 
18222 
(function(global) {
18223 
 
18224 
  'use strict';
18225 
 
18226 
  var fabric  = global.fabric || (global.fabric = { }),
18227 
      extend = fabric.util.object.extend;
18228 
 
18229 
  /**
18230 
   * Noise filter class
18231 
   * @class fabric.Image.filters.Noise
18232 
   * @memberOf fabric.Image.filters
18233 
   * @extends fabric.Image.filters.BaseFilter
18234 
   * @see {@link fabric.Image.filters.Noise#initialize} for constructor definition
18235 
   * @see {@link http://fabricjs.com/image-filters/|ImageFilters demo}
18236 
   * @example
18237 
   * var filter = new fabric.Image.filters.Noise({
18238 
   *   noise: 700
18239 
   * });
18240 
   * object.filters.push(filter);
18241 
   * object.applyFilters(canvas.renderAll.bind(canvas));
18242 
   */
18243 
  fabric.Image.filters.Noise = fabric.util.createClass(fabric.Image.filters.BaseFilter, /** @lends fabric.Image.filters.Noise.prototype */ {
18244 
 
18245 
    /**
18246 
     * Filter type
18247 
     * @param {String} type
18248 
     * @default
18249 
     */
18250 
    type: 'Noise',
18251 
 
18252 
    /**
18253 
     * Constructor
18254 
     * @memberOf fabric.Image.filters.Noise.prototype
18255 
     * @param {Object} [options] Options object
18256 
     * @param {Number} [options.noise=0] Noise value
18257 
     */
18258 
    initialize: function(options) {
18259 
      options = options || { };
18260 
      this.noise = options.noise || 0;
18261 
    },
18262 
 
18263 
    /**
18264 
     * Applies filter to canvas element
18265 
     * @param {Object} canvasEl Canvas element to apply filter to
18266 
     */
18267 
    applyTo: function(canvasEl) {
18268 
      var context = canvasEl.getContext('2d'),
18269 
          imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
18270 
          data = imageData.data,
18271 
          noise = this.noise, rand;
18272 
 
18273 
      for (var i = 0, len = data.length; i < len; i += 4) {
18274 
 
18275 
        rand = (0.5 - Math.random()) * noise;
18276 
 
18277 
        data[i] += rand;
18278 
        data[i + 1] += rand;
18279 
        data[i + 2] += rand;
18280 
      }
18281 
 
18282 
      context.putImageData(imageData, 0, 0);
18283 
    },
18284 
 
18285 
    /**
18286 
     * Returns object representation of an instance
18287 
     * @return {Object} Object representation of an instance
18288 
     */
18289 
    toObject: function() {
18290 
      return extend(this.callSuper('toObject'), {
18291 
        noise: this.noise
18292 
      });
18293 
    }
18294 
  });
18295 
 
18296 
  /**
18297 
   * Returns filter instance from an object representation
18298 
   * @static
18299 
   * @param {Object} object Object to create an instance from
18300 
   * @return {fabric.Image.filters.Noise} Instance of fabric.Image.filters.Noise
18301 
   */
18302 
  fabric.Image.filters.Noise.fromObject = function(object) {
18303 
    return new fabric.Image.filters.Noise(object);
18304 
  };
18305 
 
18306 
})(typeof exports !== 'undefined' ? exports : this);
18307 
 
18308 
 
18309 
(function(global) {
18310 
 
18311 
  'use strict';
18312 
 
18313 
  var fabric  = global.fabric || (global.fabric = { }),
18314 
      extend = fabric.util.object.extend;
18315 
 
18316 
  /**
18317 
   * Pixelate filter class
18318 
   * @class fabric.Image.filters.Pixelate
18319 
   * @memberOf fabric.Image.filters
18320 
   * @extends fabric.Image.filters.BaseFilter
18321 
   * @see {@link fabric.Image.filters.Pixelate#initialize} for constructor definition
18322 
   * @see {@link http://fabricjs.com/image-filters/|ImageFilters demo}
18323 
   * @example
18324 
   * var filter = new fabric.Image.filters.Pixelate({
18325 
   *   blocksize: 8
18326 
   * });
18327 
   * object.filters.push(filter);
18328 
   * object.applyFilters(canvas.renderAll.bind(canvas));
18329 
   */
18330 
  fabric.Image.filters.Pixelate = fabric.util.createClass(fabric.Image.filters.BaseFilter, /** @lends fabric.Image.filters.Pixelate.prototype */ {
18331 
 
18332 
    /**
18333 
     * Filter type
18334 
     * @param {String} type
18335 
     * @default
18336 
     */
18337 
    type: 'Pixelate',
18338 
 
18339 
    /**
18340 
     * Constructor
18341 
     * @memberOf fabric.Image.filters.Pixelate.prototype
18342 
     * @param {Object} [options] Options object
18343 
     * @param {Number} [options.blocksize=4] Blocksize for pixelate
18344 
     */
18345 
    initialize: function(options) {
18346 
      options = options || { };
18347 
      this.blocksize = options.blocksize || 4;
18348 
    },
18349 
 
18350 
    /**
18351 
     * Applies filter to canvas element
18352 
     * @param {Object} canvasEl Canvas element to apply filter to
18353 
     */
18354 
    applyTo: function(canvasEl) {
18355 
      var context = canvasEl.getContext('2d'),
18356 
          imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
18357 
          data = imageData.data,
18358 
          iLen = imageData.height,
18359 
          jLen = imageData.width,
18360 
          index, i, j, r, g, b, a;
18361 
 
18362 
      for (i = 0; i < iLen; i += this.blocksize) {
18363 
        for (j = 0; j < jLen; j += this.blocksize) {
18364 
 
18365 
          index = (i * 4) * jLen + (j * 4);
18366 
 
18367 
          r = data[index];
18368 
          g = data[index + 1];
18369 
          b = data[index + 2];
18370 
          a = data[index + 3];
18371 
 
18372 
          /*
18373 
           blocksize: 4
18374 
 
18375 
           [1,x,x,x,1]
18376 
           [x,x,x,x,1]
18377 
           [x,x,x,x,1]
18378 
           [x,x,x,x,1]
18379 
           [1,1,1,1,1]
18380 
           */
18381 
 
18382 
          for (var _i = i, _ilen = i + this.blocksize; _i < _ilen; _i++) {
18383 
            for (var _j = j, _jlen = j + this.blocksize; _j < _jlen; _j++) {
18384 
              index = (_i * 4) * jLen + (_j * 4);
18385 
              data[index] = r;
18386 
              data[index + 1] = g;
18387 
              data[index + 2] = b;
18388 
              data[index + 3] = a;
18389 
            }
18390 
          }
18391 
        }
18392 
      }
18393 
 
18394 
      context.putImageData(imageData, 0, 0);
18395 
    },
18396 
 
18397 
    /**
18398 
     * Returns object representation of an instance
18399 
     * @return {Object} Object representation of an instance
18400 
     */
18401 
    toObject: function() {
18402 
      return extend(this.callSuper('toObject'), {
18403 
        blocksize: this.blocksize
18404 
      });
18405 
    }
18406 
  });
18407 
 
18408 
  /**
18409 
   * Returns filter instance from an object representation
18410 
   * @static
18411 
   * @param {Object} object Object to create an instance from
18412 
   * @return {fabric.Image.filters.Pixelate} Instance of fabric.Image.filters.Pixelate
18413 
   */
18414 
  fabric.Image.filters.Pixelate.fromObject = function(object) {
18415 
    return new fabric.Image.filters.Pixelate(object);
18416 
  };
18417 
 
18418 
})(typeof exports !== 'undefined' ? exports : this);
18419 
 
18420 
 
18421 
(function(global) {
18422 
 
18423 
  'use strict';
18424 
 
18425 
  var fabric  = global.fabric || (global.fabric = { }),
18426 
      extend = fabric.util.object.extend;
18427 
 
18428 
  /**
18429 
   * Remove white filter class
18430 
   * @class fabric.Image.filters.RemoveWhite
18431 
   * @memberOf fabric.Image.filters
18432 
   * @extends fabric.Image.filters.BaseFilter
18433 
   * @see {@link fabric.Image.filters.RemoveWhite#initialize} for constructor definition
18434 
   * @see {@link http://fabricjs.com/image-filters/|ImageFilters demo}
18435 
   * @example
18436 
   * var filter = new fabric.Image.filters.RemoveWhite({
18437 
   *   threshold: 40,
18438 
   *   distance: 140
18439 
   * });
18440 
   * object.filters.push(filter);
18441 
   * object.applyFilters(canvas.renderAll.bind(canvas));
18442 
   */
18443 
  fabric.Image.filters.RemoveWhite = fabric.util.createClass(fabric.Image.filters.BaseFilter, /** @lends fabric.Image.filters.RemoveWhite.prototype */ {
18444 
 
18445 
    /**
18446 
     * Filter type
18447 
     * @param {String} type
18448 
     * @default
18449 
     */
18450 
    type: 'RemoveWhite',
18451 
 
18452 
    /**
18453 
     * Constructor
18454 
     * @memberOf fabric.Image.filters.RemoveWhite.prototype
18455 
     * @param {Object} [options] Options object
18456 
     * @param {Number} [options.threshold=30] Threshold value
18457 
     * @param {Number} [options.distance=20] Distance value
18458 
     */
18459 
    initialize: function(options) {
18460 
      options = options || { };
18461 
      this.threshold = options.threshold || 30;
18462 
      this.distance = options.distance || 20;
18463 
    },
18464 
 
18465 
    /**
18466 
     * Applies filter to canvas element
18467 
     * @param {Object} canvasEl Canvas element to apply filter to
18468 
     */
18469 
    applyTo: function(canvasEl) {
18470 
      var context = canvasEl.getContext('2d'),
18471 
          imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
18472 
          data = imageData.data,
18473 
          threshold = this.threshold,
18474 
          distance = this.distance,
18475 
          limit = 255 - threshold,
18476 
          abs = Math.abs,
18477 
          r, g, b;
18478 
 
18479 
      for (var i = 0, len = data.length; i < len; i += 4) {
18480 
        r = data[i];
18481 
        g = data[i + 1];
18482 
        b = data[i + 2];
18483 
 
18484 
        if (r > limit &&
18485 
            g > limit &&
18486 
            b > limit &&
18487 
            abs(r - g) < distance &&
18488 
            abs(r - b) < distance &&
18489 
            abs(g - b) < distance
18490 
        ) {
18491 
          data[i + 3] = 1;
18492 
        }
18493 
      }
18494 
 
18495 
      context.putImageData(imageData, 0, 0);
18496 
    },
18497 
 
18498 
    /**
18499 
     * Returns object representation of an instance
18500 
     * @return {Object} Object representation of an instance
18501 
     */
18502 
    toObject: function() {
18503 
      return extend(this.callSuper('toObject'), {
18504 
        threshold: this.threshold,
18505 
        distance: this.distance
18506 
      });
18507 
    }
18508 
  });
18509 
 
18510 
  /**
18511 
   * Returns filter instance from an object representation
18512 
   * @static
18513 
   * @param {Object} object Object to create an instance from
18514 
   * @return {fabric.Image.filters.RemoveWhite} Instance of fabric.Image.filters.RemoveWhite
18515 
   */
18516 
  fabric.Image.filters.RemoveWhite.fromObject = function(object) {
18517 
    return new fabric.Image.filters.RemoveWhite(object);
18518 
  };
18519 
 
18520 
})(typeof exports !== 'undefined' ? exports : this);
18521 
 
18522 
 
18523 
(function(global) {
18524 
 
18525 
  'use strict';
18526 
 
18527 
  var fabric  = global.fabric || (global.fabric = { });
18528 
 
18529 
  /**
18530 
   * Sepia filter class
18531 
   * @class fabric.Image.filters.Sepia
18532 
   * @memberOf fabric.Image.filters
18533 
   * @extends fabric.Image.filters.BaseFilter
18534 
   * @see {@link http://fabricjs.com/image-filters/|ImageFilters demo}
18535 
   * @example
18536 
   * var filter = new fabric.Image.filters.Sepia();
18537 
   * object.filters.push(filter);
18538 
   * object.applyFilters(canvas.renderAll.bind(canvas));
18539 
   */
18540 
  fabric.Image.filters.Sepia = fabric.util.createClass(fabric.Image.filters.BaseFilter, /** @lends fabric.Image.filters.Sepia.prototype */ {
18541 
 
18542 
    /**
18543 
     * Filter type
18544 
     * @param {String} type
18545 
     * @default
18546 
     */
18547 
    type: 'Sepia',
18548 
 
18549 
    /**
18550 
     * Applies filter to canvas element
18551 
     * @memberOf fabric.Image.filters.Sepia.prototype
18552 
     * @param {Object} canvasEl Canvas element to apply filter to
18553 
     */
18554 
    applyTo: function(canvasEl) {
18555 
      var context = canvasEl.getContext('2d'),
18556 
          imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
18557 
          data = imageData.data,
18558 
          iLen = data.length, i, avg;
18559 
 
18560 
      for (i = 0; i < iLen; i+=4) {
18561 
        avg = 0.3  * data[i] + 0.59 * data[i + 1] + 0.11 * data[i + 2];
18562 
        data[i] = avg + 100;
18563 
        data[i + 1] = avg + 50;
18564 
        data[i + 2] = avg + 255;
18565 
      }
18566 
 
18567 
      context.putImageData(imageData, 0, 0);
18568 
    }
18569 
  });
18570 
 
18571 
  /**
18572 
   * Returns filter instance from an object representation
18573 
   * @static
18574 
   * @return {fabric.Image.filters.Sepia} Instance of fabric.Image.filters.Sepia
18575 
   */
18576 
  fabric.Image.filters.Sepia.fromObject = function() {
18577 
    return new fabric.Image.filters.Sepia();
18578 
  };
18579 
 
18580 
})(typeof exports !== 'undefined' ? exports : this);
18581 
 
18582 
 
18583 
(function(global) {
18584 
 
18585 
  'use strict';
18586 
 
18587 
  var fabric  = global.fabric || (global.fabric = { });
18588 
 
18589 
  /**
18590 
   * Sepia2 filter class
18591 
   * @class fabric.Image.filters.Sepia2
18592 
   * @memberOf fabric.Image.filters
18593 
   * @extends fabric.Image.filters.BaseFilter
18594 
   * @see {@link http://fabricjs.com/image-filters/|ImageFilters demo}
18595 
   * @example
18596 
   * var filter = new fabric.Image.filters.Sepia2();
18597 
   * object.filters.push(filter);
18598 
   * object.applyFilters(canvas.renderAll.bind(canvas));
18599 
   */
18600 
  fabric.Image.filters.Sepia2 = fabric.util.createClass(fabric.Image.filters.BaseFilter, /** @lends fabric.Image.filters.Sepia2.prototype */ {
18601 
 
18602 
    /**
18603 
     * Filter type
18604 
     * @param {String} type
18605 
     * @default
18606 
     */
18607 
    type: 'Sepia2',
18608 
 
18609 
    /**
18610 
     * Applies filter to canvas element
18611 
     * @memberOf fabric.Image.filters.Sepia.prototype
18612 
     * @param {Object} canvasEl Canvas element to apply filter to
18613 
     */
18614 
    applyTo: function(canvasEl) {
18615 
      var context = canvasEl.getContext('2d'),
18616 
          imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
18617 
          data = imageData.data,
18618 
          iLen = data.length, i, r, g, b;
18619 
 
18620 
      for (i = 0; i < iLen; i+=4) {
18621 
        r = data[i];
18622 
        g = data[i + 1];
18623 
        b = data[i + 2];
18624 
 
18625 
        data[i] = (r * 0.393 + g * 0.769 + b * 0.189 ) / 1.351;
18626 
        data[i + 1] = (r * 0.349 + g * 0.686 + b * 0.168 ) / 1.203;
18627 
        data[i + 2] = (r * 0.272 + g * 0.534 + b * 0.131 ) / 2.140;
18628 
      }
18629 
 
18630 
      context.putImageData(imageData, 0, 0);
18631 
    }
18632 
  });
18633 
 
18634 
  /**
18635 
   * Returns filter instance from an object representation
18636 
   * @static
18637 
   * @return {fabric.Image.filters.Sepia2} Instance of fabric.Image.filters.Sepia2
18638 
   */
18639 
  fabric.Image.filters.Sepia2.fromObject = function() {
18640 
    return new fabric.Image.filters.Sepia2();
18641 
  };
18642 
 
18643 
})(typeof exports !== 'undefined' ? exports : this);
18644 
 
18645 
 
18646 
(function(global) {
18647 
 
18648 
  'use strict';
18649 
 
18650 
  var fabric  = global.fabric || (global.fabric = { }),
18651 
      extend = fabric.util.object.extend;
18652 
 
18653 
  /**
18654 
   * Tint filter class
18655 
   * Adapted from <a href="https://github.com/mezzoblue/PaintbrushJS">https://github.com/mezzoblue/PaintbrushJS</a>
18656 
   * @class fabric.Image.filters.Tint
18657 
   * @memberOf fabric.Image.filters
18658 
   * @extends fabric.Image.filters.BaseFilter
18659 
   * @see {@link fabric.Image.filters.Tint#initialize} for constructor definition
18660 
   * @see {@link http://fabricjs.com/image-filters/|ImageFilters demo}
18661 
   * @example <caption>Tint filter with hex color and opacity</caption>
18662 
   * var filter = new fabric.Image.filters.Tint({
18663 
   *   color: '#3513B0',
18664 
   *   opacity: 0.5
18665 
   * });
18666 
   * object.filters.push(filter);
18667 
   * object.applyFilters(canvas.renderAll.bind(canvas));
18668 
   * @example <caption>Tint filter with rgba color</caption>
18669 
   * var filter = new fabric.Image.filters.Tint({
18670 
   *   color: 'rgba(53, 21, 176, 0.5)'
18671 
   * });
18672 
   * object.filters.push(filter);
18673 
   * object.applyFilters(canvas.renderAll.bind(canvas));
18674 
   */
18675 
  fabric.Image.filters.Tint = fabric.util.createClass(fabric.Image.filters.BaseFilter, /** @lends fabric.Image.filters.Tint.prototype */ {
18676 
 
18677 
    /**
18678 
     * Filter type
18679 
     * @param {String} type
18680 
     * @default
18681 
     */
18682 
    type: 'Tint',
18683 
 
18684 
    /**
18685 
     * Constructor
18686 
     * @memberOf fabric.Image.filters.Tint.prototype
18687 
     * @param {Object} [options] Options object
18688 
     * @param {String} [options.color=#000000] Color to tint the image with
18689 
     * @param {Number} [options.opacity] Opacity value that controls the tint effect's transparency (0..1)
18690 
     */
18691 
    initialize: function(options) {
18692 
      options = options || { };
18693 
 
18694 
      this.color = options.color || '#000000';
18695 
      this.opacity = typeof options.opacity !== 'undefined'
18696 
                      ? options.opacity
18697 
                      : new fabric.Color(this.color).getAlpha();
18698 
    },
18699 
 
18700 
    /**
18701 
     * Applies filter to canvas element
18702 
     * @param {Object} canvasEl Canvas element to apply filter to
18703 
     */
18704 
    applyTo: function(canvasEl) {
18705 
      var context = canvasEl.getContext('2d'),
18706 
          imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
18707 
          data = imageData.data,
18708 
          iLen = data.length, i,
18709 
          tintR, tintG, tintB,
18710 
          r, g, b, alpha1,
18711 
          source;
18712 
 
18713 
      source = new fabric.Color(this.color).getSource();
18714 
 
18715 
      tintR = source[0] * this.opacity;
18716 
      tintG = source[1] * this.opacity;
18717 
      tintB = source[2] * this.opacity;
18718 
 
18719 
      alpha1 = 1 - this.opacity;
18720 
 
18721 
      for (i = 0; i < iLen; i+=4) {
18722 
        r = data[i];
18723 
        g = data[i + 1];
18724 
        b = data[i + 2];
18725 
 
18726 
        // alpha compositing
18727 
        data[i] = tintR + r * alpha1;
18728 
        data[i + 1] = tintG + g * alpha1;
18729 
        data[i + 2] = tintB + b * alpha1;
18730 
      }
18731 
 
18732 
      context.putImageData(imageData, 0, 0);
18733 
    },
18734 
 
18735 
    /**
18736 
     * Returns object representation of an instance
18737 
     * @return {Object} Object representation of an instance
18738 
     */
18739 
    toObject: function() {
18740 
      return extend(this.callSuper('toObject'), {
18741 
        color: this.color,
18742 
        opacity: this.opacity
18743 
      });
18744 
    }
18745 
  });
18746 
 
18747 
  /**
18748 
   * Returns filter instance from an object representation
18749 
   * @static
18750 
   * @param {Object} object Object to create an instance from
18751 
   * @return {fabric.Image.filters.Tint} Instance of fabric.Image.filters.Tint
18752 
   */
18753 
  fabric.Image.filters.Tint.fromObject = function(object) {
18754 
    return new fabric.Image.filters.Tint(object);
18755 
  };
18756 
 
18757 
})(typeof exports !== 'undefined' ? exports : this);
18758 
 
18759 
 
18760 
(function(global) {
18761 
 
18762 
  'use strict';
18763 
 
18764 
  var fabric  = global.fabric || (global.fabric = { }),
18765 
      extend = fabric.util.object.extend;
18766 
 
18767 
  /**
18768 
   * Multiply filter class
18769 
   * Adapted from <a href="http://www.laurenscorijn.com/articles/colormath-basics">http://www.laurenscorijn.com/articles/colormath-basics</a>
18770 
   * @class fabric.Image.filters.Multiply
18771 
   * @memberOf fabric.Image.filters
18772 
   * @extends fabric.Image.filters.BaseFilter
18773 
   * @example <caption>Multiply filter with hex color</caption>
18774 
   * var filter = new fabric.Image.filters.Multiply({
18775 
   *   color: '#F0F'
18776 
   * });
18777 
   * object.filters.push(filter);
18778 
   * object.applyFilters(canvas.renderAll.bind(canvas));
18779 
   * @example <caption>Multiply filter with rgb color</caption>
18780 
   * var filter = new fabric.Image.filters.Multiply({
18781 
   *   color: 'rgb(53, 21, 176)'
18782 
   * });
18783 
   * object.filters.push(filter);
18784 
   * object.applyFilters(canvas.renderAll.bind(canvas));
18785 
   */
18786 
  fabric.Image.filters.Multiply = fabric.util.createClass(fabric.Image.filters.BaseFilter, /** @lends fabric.Image.filters.Multiply.prototype */ {
18787 
 
18788 
    /**
18789 
     * Filter type
18790 
     * @param {String} type
18791 
     * @default
18792 
     */
18793 
    type: 'Multiply',
18794 
 
18795 
    /**
18796 
     * Constructor
18797 
     * @memberOf fabric.Image.filters.Multiply.prototype
18798 
     * @param {Object} [options] Options object
18799 
     * @param {String} [options.color=#000000] Color to multiply the image pixels with
18800 
     */
18801 
    initialize: function(options) {
18802 
      options = options || { };
18803 
 
18804 
      this.color = options.color || '#000000';
18805 
    },
18806 
 
18807 
    /**
18808 
     * Applies filter to canvas element
18809 
     * @param {Object} canvasEl Canvas element to apply filter to
18810 
     */
18811 
    applyTo: function(canvasEl) {
18812 
      var context = canvasEl.getContext('2d'),
18813 
          imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
18814 
          data = imageData.data,
18815 
          iLen = data.length, i,
18816 
          source;
18817 
 
18818 
      source = new fabric.Color(this.color).getSource();
18819 
 
18820 
      for (i = 0; i < iLen; i+=4) {
18821 
        data[i] *= source[0] / 255;
18822 
        data[i + 1] *= source[1] / 255;
18823 
        data[i + 2] *= source[2] / 255;
18824 
      }
18825 
 
18826 
      context.putImageData(imageData, 0, 0);
18827 
    },
18828 
 
18829 
    /**
18830 
     * Returns object representation of an instance
18831 
     * @return {Object} Object representation of an instance
18832 
     */
18833 
    toObject: function() {
18834 
      return extend(this.callSuper('toObject'), {
18835 
        color: this.color
18836 
      });
18837 
    }
18838 
  });
18839 
 
18840 
  /**
18841 
   * Returns filter instance from an object representation
18842 
   * @static
18843 
   * @param {Object} object Object to create an instance from
18844 
   * @return {fabric.Image.filters.Multiply} Instance of fabric.Image.filters.Multiply
18845 
   */
18846 
  fabric.Image.filters.Multiply.fromObject = function(object) {
18847 
    return new fabric.Image.filters.Multiply(object);
18848 
  };
18849 
 
18850 
})(typeof exports !== 'undefined' ? exports : this);
18851 
 
18852 
 
18853 
(function(global) {
18854 
  'use strict';
18855 
 
18856 
  var fabric = global.fabric;
18857 
 
18858 
  /**
18859 
   * Color Blend filter class
18860 
   * @class fabric.Image.filter.Blend
18861 
   * @memberOf fabric.Image.filters
18862 
   * @extends fabric.Image.filters.BaseFilter
18863 
   * @example
18864 
   * var filter = new fabric.Image.filters.Blend({
18865 
   *  color: '#000',
18866 
   *  mode: 'multiply'
18867 
   * });
18868 
   *
18869 
   * var filter = new fabric.Image.filters.Blend({
18870 
   *  image: fabricImageObject,
18871 
   *  mode: 'multiply',
18872 
   *  alpha: 0.5
18873 
   * });
18874 
 
18875 
   * object.filters.push(filter);
18876 
   * object.applyFilters(canvas.renderAll.bind(canvas));
18877 
   */
18878 
  fabric.Image.filters.Blend = fabric.util.createClass({
18879 
    type: 'Blend',
18880 
 
18881 
    initialize: function(options) {
18882 
      options = options || {};
18883 
      this.color = options.color || '#000';
18884 
      this.image = options.image || false;
18885 
      this.mode = options.mode || 'multiply';
18886 
      this.alpha = options.alpha || 1;
18887 
    },
18888 
 
18889 
    applyTo: function(canvasEl) {
18890 
      var context = canvasEl.getContext('2d'),
18891 
          imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
18892 
          data = imageData.data,
18893 
          tr, tg, tb,
18894 
          r, g, b,
18895 
          _r, _g, _b,
18896 
          source,
18897 
          isImage = false;
18898 
 
18899 
      if (this.image) {
18900 
        // Blend images
18901 
        isImage = true;
18902 
 
18903 
        var _el = fabric.util.createCanvasElement();
18904 
        _el.width = this.image.width;
18905 
        _el.height = this.image.height;
18906 
 
18907 
        var tmpCanvas = new fabric.StaticCanvas(_el);
18908 
        tmpCanvas.add(this.image);
18909 
        var context2 =  tmpCanvas.getContext('2d');
18910 
        source = context2.getImageData(0, 0, tmpCanvas.width, tmpCanvas.height).data;
18911 
      }
18912 
      else {
18913 
        // Blend color
18914 
        source = new fabric.Color(this.color).getSource();
18915 
 
18916 
        tr = source[0] * this.alpha;
18917 
        tg = source[1] * this.alpha;
18918 
        tb = source[2] * this.alpha;
18919 
      }
18920 
 
18921 
      for (var i = 0, len = data.length; i < len; i += 4) {
18922 
 
18923 
        r = data[i];
18924 
        g = data[i + 1];
18925 
        b = data[i + 2];
18926 
 
18927 
        if (isImage) {
18928 
          tr = source[i] * this.alpha;
18929 
          tg = source[i + 1] * this.alpha;
18930 
          tb = source[i + 2] * this.alpha;
18931 
        }
18932 
 
18933 
        switch (this.mode) {
18934 
          case 'multiply':
18935 
            data[i] = r * tr / 255;
18936 
            data[i + 1] = g * tg / 255;
18937 
            data[i + 2] = b * tb / 255;
18938 
            break;
18939 
          case 'screen':
18940 
            data[i] = 1 - (1 - r) * (1 - tr);
18941 
            data[i + 1] = 1 - (1 - g) * (1 - tg);
18942 
            data[i + 2] = 1 - (1 - b) * (1 - tb);
18943 
            break;
18944 
          case 'add':
18945 
            data[i] = Math.min(255, r + tr);
18946 
            data[i + 1] = Math.min(255, g + tg);
18947 
            data[i + 2] = Math.min(255, b + tb);
18948 
            break;
18949 
          case 'diff':
18950 
          case 'difference':
18951 
            data[i] = Math.abs(r - tr);
18952 
            data[i + 1] = Math.abs(g - tg);
18953 
            data[i + 2] = Math.abs(b - tb);
18954 
            break;
18955 
          case 'subtract':
18956 
            _r = r - tr;
18957 
            _g = g - tg;
18958 
            _b = b - tb;
18959 
 
18960 
            data[i] = (_r < 0) ? 0 : _r;
18961 
            data[i + 1] = (_g < 0) ? 0 : _g;
18962 
            data[i + 2] = (_b < 0) ? 0 : _b;
18963 
            break;
18964 
          case 'darken':
18965 
            data[i] = Math.min(r, tr);
18966 
            data[i + 1] = Math.min(g, tg);
18967 
            data[i + 2] = Math.min(b, tb);
18968 
            break;
18969 
          case 'lighten':
18970 
            data[i] = Math.max(r, tr);
18971 
            data[i + 1] = Math.max(g, tg);
18972 
            data[i + 2] = Math.max(b, tb);
18973 
            break;
18974 
        }
18975 
      }
18976 
 
18977 
      context.putImageData(imageData, 0, 0);
18978 
    },
18979 
 
18980 
    /**
18981 
     * Returns object representation of an instance
18982 
     * @return {Object} Object representation of an instance
18983 
     */
18984 
    toObject: function() {
18985 
      return {
18986 
        color: this.color,
18987 
        image: this.image,
18988 
        mode: this.mode,
18989 
        alpha: this.alpha
18990 
      };
18991 
    }
18992 
  });
18993 
 
18994 
  fabric.Image.filters.Blend.fromObject = function(object) {
18995 
    return new fabric.Image.filters.Blend(object);
18996 
  };
18997 
})(typeof exports !== 'undefined' ? exports : this);
18998 
 
18999 
 
19000 
(function(global) {
19001 
 
19002 
  'use strict';
19003 
 
19004 
  var fabric  = global.fabric || (global.fabric = { }), pow = Math.pow, floor = Math.floor,
19005 
      sqrt = Math.sqrt, abs = Math.abs, max = Math.max, round = Math.round, sin = Math.sin,
19006 
      ceil = Math.ceil;
19007 
 
19008 
  /**
19009 
   * Resize image filter class
19010 
   * @class fabric.Image.filters.Resize
19011 
   * @memberOf fabric.Image.filters
19012 
   * @extends fabric.Image.filters.BaseFilter
19013 
   * @see {@link http://fabricjs.com/image-filters/|ImageFilters demo}
19014 
   * @example
19015 
   * var filter = new fabric.Image.filters.Resize();
19016 
   * object.filters.push(filter);
19017 
   * object.applyFilters(canvas.renderAll.bind(canvas));
19018 
   */
19019 
  fabric.Image.filters.Resize = fabric.util.createClass(fabric.Image.filters.BaseFilter, /** @lends fabric.Image.filters.Resize.prototype */ {
19020 
 
19021 
    /**
19022 
     * Filter type
19023 
     * @param {String} type
19024 
     * @default
19025 
     */
19026 
    type: 'Resize',
19027 
 
19028 
    /**
19029 
     * Resize type
19030 
     * @param {String} resizeType
19031 
     * @default
19032 
     */
19033 
    resizeType: 'hermite',
19034 
 
19035 
    /**
19036 
     * Scale factor for resizing, x axis
19037 
     * @param {Number} scaleX
19038 
     * @default
19039 
     */
19040 
    scaleX: 0,
19041 
 
19042 
    /**
19043 
     * Scale factor for resizing, y axis
19044 
     * @param {Number} scaleY
19045 
     * @default
19046 
     */
19047 
    scaleY: 0,
19048 
 
19049 
    /**
19050 
     * LanczosLobes parameter for lanczos filter
19051 
     * @param {Number} lanczosLobes
19052 
     * @default
19053 
     */
19054 
    lanczosLobes: 3,
19055 
 
19056 
    /**
19057 
     * Applies filter to canvas element
19058 
     * @memberOf fabric.Image.filters.Resize.prototype
19059 
     * @param {Object} canvasEl Canvas element to apply filter to
19060 
     */
19061 
    applyTo: function(canvasEl, scaleX, scaleY) {
19062 
 
19063 
      this.rcpScaleX = 1 / scaleX;
19064 
      this.rcpScaleY = 1 / scaleY;
19065 
 
19066 
      var oW = canvasEl.width, oH = canvasEl.height,
19067 
          dW = round(oW * scaleX), dH = round(oH * scaleY),
19068 
          imageData;
19069 
 
19070 
      if (this.resizeType === 'sliceHack') {
19071 
        imageData = this.sliceByTwo(canvasEl, oW, oH, dW, dH);
19072 
      }
19073 
      if (this.resizeType === 'hermite') {
19074 
        imageData = this.hermiteFastResize(canvasEl, oW, oH, dW, dH);
19075 
      }
19076 
      if (this.resizeType === 'bilinear') {
19077 
        imageData = this.bilinearFiltering(canvasEl, oW, oH, dW, dH);
19078 
      }
19079 
      if (this.resizeType === 'lanczos') {
19080 
        imageData = this.lanczosResize(canvasEl, oW, oH, dW, dH);
19081 
      }
19082 
      canvasEl.width = dW;
19083 
      canvasEl.height = dH;
19084 
      canvasEl.getContext('2d').putImageData(imageData, 0, 0);
19085 
    },
19086 
 
19087 
    sliceByTwo: function(canvasEl, width, height, newWidth, newHeight) {
19088 
      var context = canvasEl.getContext('2d'), imageData,
19089 
          multW = 0.5, multH = 0.5, signW = 1, signH = 1,
19090 
          doneW = false, doneH = false, stepW = width, stepH = height,
19091 
          tmpCanvas = fabric.util.createCanvasElement(),
19092 
          tmpCtx = tmpCanvas.getContext('2d');
19093 
      newWidth = floor(newWidth);
19094 
      newHeight = floor(newHeight);
19095 
      tmpCanvas.width = max(newWidth, width);
19096 
      tmpCanvas.height = max(newHeight, height);
19097 
 
19098 
      if (newWidth > width) {
19099 
        multW = 2;
19100 
        signW = -1;
19101 
      }
19102 
      if (newHeight > height) {
19103 
        multH = 2;
19104 
        signH = -1;
19105 
      }
19106 
      imageData = context.getImageData(0, 0, width, height);
19107 
      canvasEl.width = max(newWidth, width);
19108 
      canvasEl.height = max(newHeight, height);
19109 
      context.putImageData(imageData, 0, 0);
19110 
 
19111 
      while (!doneW || !doneH) {
19112 
        width = stepW;
19113 
        height = stepH;
19114 
        if (newWidth * signW < floor(stepW * multW * signW)) {
19115 
          stepW = floor(stepW * multW);
19116 
        }
19117 
        else {
19118 
          stepW = newWidth;
19119 
          doneW = true;
19120 
        }
19121 
        if (newHeight * signH < floor(stepH * multH * signH)) {
19122 
          stepH = floor(stepH * multH);
19123 
        }
19124 
        else {
19125 
          stepH = newHeight;
19126 
          doneH = true;
19127 
        }
19128 
        imageData = context.getImageData(0, 0, width, height);
19129 
        tmpCtx.putImageData(imageData, 0, 0);
19130 
        context.clearRect(0, 0, stepW, stepH);
19131 
        context.drawImage(tmpCanvas, 0, 0, width, height, 0, 0, stepW, stepH);
19132 
      }
19133 
      return context.getImageData(0, 0, newWidth, newHeight);
19134 
    },
19135 
 
19136 
    lanczosResize: function(canvasEl, oW, oH, dW, dH) {
19137 
 
19138 
      function lanczosCreate(lobes) {
19139 
        return function(x) {
19140 
          if (x > lobes) {
19141 
            return 0;
19142 
          }
19143 
          x *= Math.PI;
19144 
          if (abs(x) < 1e-16) {
19145 
            return 1;
19146 
          }
19147 
          var xx = x / lobes;
19148 
          return sin(x) * sin(xx) / x / xx;
19149 
        };
19150 
      }
19151 
 
19152 
      function process(u) {
19153 
        var v, i, weight, idx, a, red, green,
19154 
            blue, alpha, fX, fY;
19155 
        center.x = (u + 0.5) * ratioX;
19156 
        icenter.x = floor(center.x);
19157 
        for (v = 0; v < dH; v++) {
19158 
          center.y = (v + 0.5) * ratioY;
19159 
          icenter.y = floor(center.y);
19160 
          a = 0, red = 0, green = 0, blue = 0, alpha = 0;
19161 
          for (i = icenter.x - range2X; i <= icenter.x + range2X; i++) {
19162 
            if (i < 0 || i >= oW) {
19163 
              continue;
19164 
            }
19165 
            fX = floor(1000 * abs(i - center.x));
19166 
            if (!cacheLanc[fX]) {
19167 
              cacheLanc[fX] = { };
19168 
            }
19169 
            for (var j = icenter.y - range2Y; j <= icenter.y + range2Y; j++) {
19170 
              if (j < 0 || j >= oH) {
19171 
                continue;
19172 
              }
19173 
              fY = floor(1000 * abs(j - center.y));
19174 
              if (!cacheLanc[fX][fY]) {
19175 
                cacheLanc[fX][fY] = lanczos(sqrt(pow(fX * rcpRatioX, 2) + pow(fY * rcpRatioY, 2)) / 1000);
19176 
              }
19177 
              weight = cacheLanc[fX][fY];
19178 
              if (weight > 0) {
19179 
                idx = (j * oW + i) * 4;
19180 
                a += weight;
19181 
                red += weight * srcData[idx];
19182 
                green += weight * srcData[idx + 1];
19183 
                blue += weight * srcData[idx + 2];
19184 
                alpha += weight * srcData[idx + 3];
19185 
              }
19186 
            }
19187 
          }
19188 
          idx = (v * dW + u) * 4;
19189 
          destData[idx] = red / a;
19190 
          destData[idx + 1] = green / a;
19191 
          destData[idx + 2] = blue / a;
19192 
          destData[idx + 3] = alpha / a;
19193 
        }
19194 
 
19195 
        if (++u < dW) {
19196 
          return process(u);
19197 
        }
19198 
        else {
19199 
          return destImg;
19200 
        }
19201 
      }
19202 
 
19203 
      var context = canvasEl.getContext('2d'),
19204 
          srcImg = context.getImageData(0, 0, oW, oH),
19205 
          destImg = context.getImageData(0, 0, dW, dH),
19206 
          srcData = srcImg.data, destData = destImg.data,
19207 
          lanczos = lanczosCreate(this.lanczosLobes),
19208 
          ratioX = this.rcpScaleX, ratioY = this.rcpScaleY,
19209 
          rcpRatioX = 2 / this.rcpScaleX, rcpRatioY = 2 / this.rcpScaleY,
19210 
          range2X = ceil(ratioX * this.lanczosLobes / 2),
19211 
          range2Y = ceil(ratioY * this.lanczosLobes / 2),
19212 
          cacheLanc = { }, center = { }, icenter = { };
19213 
 
19214 
      return process(0);
19215 
    },
19216 
 
19217 
    bilinearFiltering: function(canvasEl, w, h, w2, h2) {
19218 
      var a, b, c, d, x, y, i, j, xDiff, yDiff, chnl,
19219 
          color, offset = 0, origPix, ratioX = this.rcpScaleX,
19220 
          ratioY = this.rcpScaleY, context = canvasEl.getContext('2d'),
19221 
          w4 = 4 * (w - 1), img = context.getImageData(0, 0, w, h),
19222 
          pixels = img.data, destImage = context.getImageData(0, 0, w2, h2),
19223 
          destPixels = destImage.data;
19224 
      for (i = 0; i < h2; i++) {
19225 
        for (j = 0; j < w2; j++) {
19226 
          x = floor(ratioX * j);
19227 
          y = floor(ratioY * i);
19228 
          xDiff = ratioX * j - x;
19229 
          yDiff = ratioY * i - y;
19230 
          origPix = 4 * (y * w + x);
19231 
 
19232 
          for (chnl = 0; chnl < 4; chnl++) {
19233 
            a = pixels[origPix + chnl];
19234 
            b = pixels[origPix + 4 + chnl];
19235 
            c = pixels[origPix + w4 + chnl];
19236 
            d = pixels[origPix + w4 + 4 + chnl];
19237 
            color = a * (1 - xDiff) * (1 - yDiff) + b * xDiff * (1 - yDiff) +
19238 
                    c * yDiff * (1 - xDiff) + d * xDiff * yDiff;
19239 
            destPixels[offset++] = color;
19240 
          }
19241 
        }
19242 
      }
19243 
      return destImage;
19244 
    },
19245 
 
19246 
    hermiteFastResize: function(canvasEl, oW, oH, dW, dH) {
19247 
      var ratioW = this.rcpScaleX, ratioH = this.rcpScaleY,
19248 
          ratioWHalf = ceil(ratioW / 2),
19249 
          ratioHHalf = ceil(ratioH / 2),
19250 
          context = canvasEl.getContext('2d'),
19251 
          img = context.getImageData(0, 0, oW, oH), data = img.data,
19252 
          img2 = context.getImageData(0, 0, dW, dH), data2 = img2.data;
19253 
      for (var j = 0; j < dH; j++) {
19254 
        for (var i = 0; i < dW; i++) {
19255 
          var x2 = (i + j * dW) * 4, weight = 0, weights = 0, weightsAlpha = 0,
19256 
              gxR = 0, gxG = 0, gxB = 0, gxA = 0, centerY = (j + 0.5) * ratioH;
19257 
          for (var yy = floor(j * ratioH); yy < (j + 1) * ratioH; yy++) {
19258 
            var dy = abs(centerY - (yy + 0.5)) / ratioHHalf,
19259 
                centerX = (i + 0.5) * ratioW, w0 = dy * dy;
19260 
            for (var xx = floor(i * ratioW); xx < (i + 1) * ratioW; xx++) {
19261 
              var dx = abs(centerX - (xx + 0.5)) / ratioWHalf,
19262 
                  w = sqrt(w0 + dx * dx);
19263 
              /*jshint maxdepth:5 */
19264 
              if (w > 1 && w < -1) {
19265 
                continue;
19266 
              }
19267 
              //hermite filter
19268 
              weight = 2 * w * w * w - 3 * w * w + 1;
19269 
              if (weight > 0) {
19270 
                dx = 4 * (xx + yy * oW);
19271 
                //alpha
19272 
                gxA += weight * data[dx + 3];
19273 
                weightsAlpha += weight;
19274 
                //colors
19275 
                /*jshint maxdepth:6 */
19276 
                if (data[dx + 3] < 255) {
19277 
                  weight = weight * data[dx + 3] / 250;
19278 
                }
19279 
                /*jshint maxdepth:5 */
19280 
                gxR += weight * data[dx];
19281 
                gxG += weight * data[dx + 1];
19282 
                gxB += weight * data[dx + 2];
19283 
                weights += weight;
19284 
              }
19285 
              /*jshint maxdepth:4 */
19286 
            }
19287 
          }
19288 
          data2[x2] = gxR / weights;
19289 
          data2[x2 + 1] = gxG / weights;
19290 
          data2[x2 + 2] = gxB / weights;
19291 
          data2[x2 + 3] = gxA / weightsAlpha;
19292 
        }
19293 
      }
19294 
      return img2;
19295 
    },
19296 
 
19297 
    /**
19298 
     * Returns object representation of an instance
19299 
     * @return {Object} Object representation of an instance
19300 
     */
19301 
    toObject: function() {
19302 
      return {
19303 
        type: this.type,
19304 
        scaleX: this.scaleX,
19305 
        scaley: this.scaleY,
19306 
        resizeType: this.resizeType,
19307 
        lanczosLobes: this.lanczosLobes
19308 
      };
19309 
    }
19310 
  });
19311 
 
19312 
  /**
19313 
   * Returns filter instance from an object representation
19314 
   * @static
19315 
   * @return {fabric.Image.filters.Resize} Instance of fabric.Image.filters.Resize
19316 
   */
19317 
  fabric.Image.filters.Resize.fromObject = function() {
19318 
    return new fabric.Image.filters.Resize();
19319 
  };
19320 
 
19321 
})(typeof exports !== 'undefined' ? exports : this);
19322 
 
19323 
 
19324 
(function(global) {
19325 
 
19326 
  'use strict';
19327 
 
19328 
  var fabric = global.fabric || (global.fabric = { }),
19329 
      extend = fabric.util.object.extend,
19330 
      clone = fabric.util.object.clone,
19331 
      toFixed = fabric.util.toFixed,
19332 
      supportsLineDash = fabric.StaticCanvas.supports('setLineDash');
19333 
 
19334 
  if (fabric.Text) {
19335 
    fabric.warn('fabric.Text is already defined');
19336 
    return;
19337 
  }
19338 
 
19339 
  var stateProperties = fabric.Object.prototype.stateProperties.concat();
19340 
  stateProperties.push(
19341 
    'fontFamily',
19342 
    'fontWeight',
19343 
    'fontSize',
19344 
    'text',
19345 
    'textDecoration',
19346 
    'textAlign',
19347 
    'fontStyle',
19348 
    'lineHeight',
19349 
    'textBackgroundColor'
19350 
  );
19351 
 
19352 
  /**
19353 
   * Text class
19354 
   * @class fabric.Text
19355 
   * @extends fabric.Object
19356 
   * @return {fabric.Text} thisArg
19357 
   * @tutorial {@link http://fabricjs.com/fabric-intro-part-2/#text}
19358 
   * @see {@link fabric.Text#initialize} for constructor definition
19359 
   */
19360 
  fabric.Text = fabric.util.createClass(fabric.Object, /** @lends fabric.Text.prototype */ {
19361 
 
19362 
    /**
19363 
     * Properties which when set cause object to change dimensions
19364 
     * @type Object
19365 
     * @private
19366 
     */
19367 
    _dimensionAffectingProps: {
19368 
      fontSize: true,
19369 
      fontWeight: true,
19370 
      fontFamily: true,
19371 
      fontStyle: true,
19372 
      lineHeight: true,
19373 
      stroke: true,
19374 
      strokeWidth: true,
19375 
      text: true,
19376 
      textAlign: true
19377 
    },
19378 
 
19379 
    /**
19380 
     * @private
19381 
     */
19382 
    _reNewline: /\r?\n/,
19383 
 
19384 
    /**
19385 
     * Retrieves object's fontSize
19386 
     * @method getFontSize
19387 
     * @memberOf fabric.Text.prototype
19388 
     * @return {String} Font size (in pixels)
19389 
     */
19390 
 
19391 
    /**
19392 
     * Sets object's fontSize
19393 
     * @method setFontSize
19394 
     * @memberOf fabric.Text.prototype
19395 
     * @param {Number} fontSize Font size (in pixels)
19396 
     * @return {fabric.Text}
19397 
     * @chainable
19398 
     */
19399 
 
19400 
    /**
19401 
     * Retrieves object's fontWeight
19402 
     * @method getFontWeight
19403 
     * @memberOf fabric.Text.prototype
19404 
     * @return {(String|Number)} Font weight
19405 
     */
19406 
 
19407 
    /**
19408 
     * Sets object's fontWeight
19409 
     * @method setFontWeight
19410 
     * @memberOf fabric.Text.prototype
19411 
     * @param {(Number|String)} fontWeight Font weight
19412 
     * @return {fabric.Text}
19413 
     * @chainable
19414 
     */
19415 
 
19416 
    /**
19417 
     * Retrieves object's fontFamily
19418 
     * @method getFontFamily
19419 
     * @memberOf fabric.Text.prototype
19420 
     * @return {String} Font family
19421 
     */
19422 
 
19423 
    /**
19424 
     * Sets object's fontFamily
19425 
     * @method setFontFamily
19426 
     * @memberOf fabric.Text.prototype
19427 
     * @param {String} fontFamily Font family
19428 
     * @return {fabric.Text}
19429 
     * @chainable
19430 
     */
19431 
 
19432 
    /**
19433 
     * Retrieves object's text
19434 
     * @method getText
19435 
     * @memberOf fabric.Text.prototype
19436 
     * @return {String} text
19437 
     */
19438 
 
19439 
    /**
19440 
     * Sets object's text
19441 
     * @method setText
19442 
     * @memberOf fabric.Text.prototype
19443 
     * @param {String} text Text
19444 
     * @return {fabric.Text}
19445 
     * @chainable
19446 
     */
19447 
 
19448 
    /**
19449 
     * Retrieves object's textDecoration
19450 
     * @method getTextDecoration
19451 
     * @memberOf fabric.Text.prototype
19452 
     * @return {String} Text decoration
19453 
     */
19454 
 
19455 
    /**
19456 
     * Sets object's textDecoration
19457 
     * @method setTextDecoration
19458 
     * @memberOf fabric.Text.prototype
19459 
     * @param {String} textDecoration Text decoration
19460 
     * @return {fabric.Text}
19461 
     * @chainable
19462 
     */
19463 
 
19464 
    /**
19465 
     * Retrieves object's fontStyle
19466 
     * @method getFontStyle
19467 
     * @memberOf fabric.Text.prototype
19468 
     * @return {String} Font style
19469 
     */
19470 
 
19471 
    /**
19472 
     * Sets object's fontStyle
19473 
     * @method setFontStyle
19474 
     * @memberOf fabric.Text.prototype
19475 
     * @param {String} fontStyle Font style
19476 
     * @return {fabric.Text}
19477 
     * @chainable
19478 
     */
19479 
 
19480 
    /**
19481 
     * Retrieves object's lineHeight
19482 
     * @method getLineHeight
19483 
     * @memberOf fabric.Text.prototype
19484 
     * @return {Number} Line height
19485 
     */
19486 
 
19487 
    /**
19488 
     * Sets object's lineHeight
19489 
     * @method setLineHeight
19490 
     * @memberOf fabric.Text.prototype
19491 
     * @param {Number} lineHeight Line height
19492 
     * @return {fabric.Text}
19493 
     * @chainable
19494 
     */
19495 
 
19496 
    /**
19497 
     * Retrieves object's textAlign
19498 
     * @method getTextAlign
19499 
     * @memberOf fabric.Text.prototype
19500 
     * @return {String} Text alignment
19501 
     */
19502 
 
19503 
    /**
19504 
     * Sets object's textAlign
19505 
     * @method setTextAlign
19506 
     * @memberOf fabric.Text.prototype
19507 
     * @param {String} textAlign Text alignment
19508 
     * @return {fabric.Text}
19509 
     * @chainable
19510 
     */
19511 
 
19512 
    /**
19513 
     * Retrieves object's textBackgroundColor
19514 
     * @method getTextBackgroundColor
19515 
     * @memberOf fabric.Text.prototype
19516 
     * @return {String} Text background color
19517 
     */
19518 
 
19519 
    /**
19520 
     * Sets object's textBackgroundColor
19521 
     * @method setTextBackgroundColor
19522 
     * @memberOf fabric.Text.prototype
19523 
     * @param {String} textBackgroundColor Text background color
19524 
     * @return {fabric.Text}
19525 
     * @chainable
19526 
     */
19527 
 
19528 
    /**
19529 
     * Type of an object
19530 
     * @type String
19531 
     * @default
19532 
     */
19533 
    type:                 'text',
19534 
 
19535 
    /**
19536 
     * Font size (in pixels)
19537 
     * @type Number
19538 
     * @default
19539 
     */
19540 
    fontSize:             40,
19541 
 
19542 
    /**
19543 
     * Font weight (e.g. bold, normal, 400, 600, 800)
19544 
     * @type {(Number|String)}
19545 
     * @default
19546 
     */
19547 
    fontWeight:           'normal',
19548 
 
19549 
    /**
19550 
     * Font family
19551 
     * @type String
19552 
     * @default
19553 
     */
19554 
    fontFamily:           'Times New Roman',
19555 
 
19556 
    /**
19557 
     * Text decoration Possible values: "", "underline", "overline" or "line-through".
19558 
     * @type String
19559 
     * @default
19560 
     */
19561 
    textDecoration:       '',
19562 
 
19563 
    /**
19564 
     * Text alignment. Possible values: "left", "center", or "right".
19565 
     * @type String
19566 
     * @default
19567 
     */
19568 
    textAlign:            'left',
19569 
 
19570 
    /**
19571 
     * Font style . Possible values: "", "normal", "italic" or "oblique".
19572 
     * @type String
19573 
     * @default
19574 
     */
19575 
    fontStyle:            '',
19576 
 
19577 
    /**
19578 
     * Line height
19579 
     * @type Number
19580 
     * @default
19581 
     */
19582 
    lineHeight:           1.16,
19583 
 
19584 
    /**
19585 
     * Background color of text lines
19586 
     * @type String
19587 
     * @default
19588 
     */
19589 
    textBackgroundColor:  '',
19590 
 
19591 
    /**
19592 
     * List of properties to consider when checking if
19593 
     * state of an object is changed ({@link fabric.Object#hasStateChanged})
19594 
     * as well as for history (undo/redo) purposes
19595 
     * @type Array
19596 
     */
19597 
    stateProperties:      stateProperties,
19598 
 
19599 
    /**
19600 
     * When defined, an object is rendered via stroke and this property specifies its color.
19601 
     * <b>Backwards incompatibility note:</b> This property was named "strokeStyle" until v1.1.6
19602 
     * @type String
19603 
     * @default
19604 
     */
19605 
    stroke:               null,
19606 
 
19607 
    /**
19608 
     * Shadow object representing shadow of this shape.
19609 
     * <b>Backwards incompatibility note:</b> This property was named "textShadow" (String) until v1.2.11
19610 
     * @type fabric.Shadow
19611 
     * @default
19612 
     */
19613 
    shadow:               null,
19614 
 
19615 
    /**
19616 
     * @private
19617 
     */
19618 
    _fontSizeFraction: 0.25,
19619 
 
19620 
    /**
19621 
     * Text Line proportion to font Size (in pixels)
19622 
     * @type Number
19623 
     * @default
19624 
     */
19625 
    _fontSizeMult:             1.13,
19626 
 
19627 
    /**
19628 
     * Constructor
19629 
     * @param {String} text Text string
19630 
     * @param {Object} [options] Options object
19631 
     * @return {fabric.Text} thisArg
19632 
     */
19633 
    initialize: function(text, options) {
19634 
      options = options || { };
19635 
      this.text = text;
19636 
      this.__skipDimension = true;
19637 
      this.setOptions(options);
19638 
      this.__skipDimension = false;
19639 
      this._initDimensions();
19640 
    },
19641 
 
19642 
    /**
19643 
     * Renders text object on offscreen canvas, so that it would get dimensions
19644 
     * @private
19645 
     */
19646 
    _initDimensions: function(ctx) {
19647 
      if (this.__skipDimension) {
19648 
        return;
19649 
      }
19650 
      if (!ctx) {
19651 
        ctx = fabric.util.createCanvasElement().getContext('2d');
19652 
        this._setTextStyles(ctx);
19653 
      }
19654 
      this._textLines = this.text.split(this._reNewline);
19655 
      this._clearCache();
19656 
      var currentTextAlign = this.textAlign;
19657 
      this.textAlign = 'left';
19658 
      this.width = this._getTextWidth(ctx);
19659 
      this.textAlign = currentTextAlign;
19660 
      this.height = this._getTextHeight(ctx);
19661 
    },
19662 
 
19663 
    /**
19664 
     * Returns string representation of an instance
19665 
     * @return {String} String representation of text object
19666 
     */
19667 
    toString: function() {
19668 
      return '#<fabric.Text (' + this.complexity() +
19669 
        '): { "text": "' + this.text + '", "fontFamily": "' + this.fontFamily + '" }>';
19670 
    },
19671 
 
19672 
    /**
19673 
     * @private
19674 
     * @param {CanvasRenderingContext2D} ctx Context to render on
19675 
     */
19676 
    _render: function(ctx) {
19677 
 
19678 
      this.clipTo && fabric.util.clipContext(this, ctx);
19679 
 
19680 
      this._renderTextBackground(ctx);
19681 
      this._renderText(ctx);
19682 
 
19683 
      this._renderTextDecoration(ctx);
19684 
      this.clipTo && ctx.restore();
19685 
    },
19686 
 
19687 
    /**
19688 
     * @private
19689 
     * @param {CanvasRenderingContext2D} ctx Context to render on
19690 
     */
19691 
    _renderText: function(ctx) {
19692 
      ctx.save();
19693 
      this._translateForTextAlign(ctx);
19694 
      this._setOpacity(ctx);
19695 
      this._setShadow(ctx);
19696 
      this._setupCompositeOperation(ctx);
19697 
      this._renderTextFill(ctx);
19698 
      this._renderTextStroke(ctx);
19699 
      this._restoreCompositeOperation(ctx);
19700 
      this._removeShadow(ctx);
19701 
      ctx.restore();
19702 
    },
19703 
 
19704 
    /**
19705 
     * @private
19706 
     * @param {CanvasRenderingContext2D} ctx Context to render on
19707 
     */
19708 
    _translateForTextAlign: function(ctx) {
19709 
      if (this.textAlign !== 'left' && this.textAlign !== 'justify') {
19710 
        ctx.translate(this.textAlign === 'center' ? (this.width / 2) : this.width, 0);
19711 
      }
19712 
    },
19713 
 
19714 
    /**
19715 
     * @private
19716 
     * @param {CanvasRenderingContext2D} ctx Context to render on
19717 
     */
19718 
    _setTextStyles: function(ctx) {
19719 
      ctx.textBaseline = 'alphabetic';
19720 
      if (!this.skipTextAlign) {
19721 
        ctx.textAlign = this.textAlign;
19722 
      }
19723 
      ctx.font = this._getFontDeclaration();
19724 
    },
19725 
 
19726 
    /**
19727 
     * @private
19728 
     * @param {CanvasRenderingContext2D} ctx Context to render on
19729 
     * @return {Number} Height of fabric.Text object
19730 
     */
19731 
    _getTextHeight: function() {
19732 
      return this._textLines.length * this._getHeightOfLine();
19733 
    },
19734 
 
19735 
    /**
19736 
     * @private
19737 
     * @param {CanvasRenderingContext2D} ctx Context to render on
19738 
     * @return {Number} Maximum width of fabric.Text object
19739 
     */
19740 
    _getTextWidth: function(ctx) {
19741 
      var maxWidth = this._getLineWidth(ctx, 0);
19742 
 
19743 
      for (var i = 1, len = this._textLines.length; i < len; i++) {
19744 
        var currentLineWidth = this._getLineWidth(ctx, i);
19745 
        if (currentLineWidth > maxWidth) {
19746 
          maxWidth = currentLineWidth;
19747 
        }
19748 
      }
19749 
      return maxWidth;
19750 
    },
19751 
 
19752 
    /**
19753 
     * @private
19754 
     * @param {String} method Method name ("fillText" or "strokeText")
19755 
     * @param {CanvasRenderingContext2D} ctx Context to render on
19756 
     * @param {String} chars Chars to render
19757 
     * @param {Number} left Left position of text
19758 
     * @param {Number} top Top position of text
19759 
     */
19760 
    _renderChars: function(method, ctx, chars, left, top) {
19761 
      ctx[method](chars, left, top);
19762 
    },
19763 
 
19764 
    /**
19765 
     * @private
19766 
     * @param {String} method Method name ("fillText" or "strokeText")
19767 
     * @param {CanvasRenderingContext2D} ctx Context to render on
19768 
     * @param {String} line Text to render
19769 
     * @param {Number} left Left position of text
19770 
     * @param {Number} top Top position of text
19771 
     * @param {Number} lineIndex Index of a line in a text
19772 
     */
19773 
    _renderTextLine: function(method, ctx, line, left, top, lineIndex) {
19774 
      // lift the line by quarter of fontSize
19775 
      top -= this.fontSize * this._fontSizeFraction;
19776 
 
19777 
      // short-circuit
19778 
      if (this.textAlign !== 'justify') {
19779 
        this._renderChars(method, ctx, line, left, top, lineIndex);
19780 
        return;
19781 
      }
19782 
 
19783 
      var lineWidth = this._getLineWidth(ctx, lineIndex),
19784 
          totalWidth = this.width;
19785 
      if (totalWidth >= lineWidth) {
19786 
        // stretch the line
19787 
        var words = line.split(/\s+/),
19788 
            wordsWidth = this._getWidthOfWords(ctx, line, lineIndex),
19789 
            widthDiff = totalWidth - wordsWidth,
19790 
            numSpaces = words.length - 1,
19791 
            spaceWidth = widthDiff / numSpaces,
19792 
            leftOffset = 0;
19793 
 
19794 
        for (var i = 0, len = words.length; i < len; i++) {
19795 
          this._renderChars(method, ctx, words[i], left + leftOffset, top, lineIndex);
19796 
          leftOffset += ctx.measureText(words[i]).width + spaceWidth;
19797 
        }
19798 
      }
19799 
      else {
19800 
        this._renderChars(method, ctx, line, left, top, lineIndex);
19801 
      }
19802 
    },
19803 
 
19804 
    /**
19805 
     * @private
19806 
     * @param {CanvasRenderingContext2D} ctx Context to render on
19807 
     * @param {Number} line
19808 
     */
19809 
    _getWidthOfWords: function (ctx, line) {
19810 
      return ctx.measureText(line.replace(/\s+/g, '')).width;
19811 
    },
19812 
 
19813 
    /**
19814 
     * @private
19815 
     * @return {Number} Left offset
19816 
     */
19817 
    _getLeftOffset: function() {
19818 
      return -this.width / 2;
19819 
    },
19820 
 
19821 
    /**
19822 
     * @private
19823 
     * @return {Number} Top offset
19824 
     */
19825 
    _getTopOffset: function() {
19826 
      return -this.height / 2;
19827 
    },
19828 
 
19829 
    /**
19830 
     * @private
19831 
     * @param {CanvasRenderingContext2D} ctx Context to render on
19832 
     */
19833 
    _renderTextFill: function(ctx) {
19834 
      if (!this.fill && !this._skipFillStrokeCheck) {
19835 
        return;
19836 
      }
19837 
 
19838 
      var lineHeights = 0;
19839 
 
19840 
      for (var i = 0, len = this._textLines.length; i < len; i++) {
19841 
        var heightOfLine = this._getHeightOfLine(ctx, i),
19842 
            maxHeight = heightOfLine / this.lineHeight;
19843 
 
19844 
        this._renderTextLine(
19845 
          'fillText',
19846 
          ctx,
19847 
          this._textLines[i],
19848 
          this._getLeftOffset(),
19849 
          this._getTopOffset() + lineHeights + maxHeight,
19850 
          i
19851 
        );
19852 
        lineHeights += heightOfLine;
19853 
      }
19854 
      if (this.shadow && !this.shadow.affectStroke) {
19855 
        this._removeShadow(ctx);
19856 
      }
19857 
    },
19858 
 
19859 
    /**
19860 
     * @private
19861 
     * @param {CanvasRenderingContext2D} ctx Context to render on
19862 
     */
19863 
    _renderTextStroke: function(ctx) {
19864 
      if ((!this.stroke || this.strokeWidth === 0) && !this._skipFillStrokeCheck) {
19865 
        return;
19866 
      }
19867 
 
19868 
      var lineHeights = 0;
19869 
 
19870 
      ctx.save();
19871 
 
19872 
      if (this.strokeDashArray) {
19873 
        // Spec requires the concatenation of two copies the dash list when the number of elements is odd
19874 
        if (1 & this.strokeDashArray.length) {
19875 
          this.strokeDashArray.push.apply(this.strokeDashArray, this.strokeDashArray);
19876 
        }
19877 
        supportsLineDash && ctx.setLineDash(this.strokeDashArray);
19878 
      }
19879 
 
19880 
      ctx.beginPath();
19881 
      for (var i = 0, len = this._textLines.length; i < len; i++) {
19882 
        var heightOfLine = this._getHeightOfLine(ctx, i),
19883 
            maxHeight = heightOfLine / this.lineHeight;
19884 
 
19885 
        this._renderTextLine(
19886 
          'strokeText',
19887 
          ctx,
19888 
          this._textLines[i],
19889 
          this._getLeftOffset(),
19890 
          this._getTopOffset() + lineHeights + maxHeight,
19891 
          i
19892 
        );
19893 
        lineHeights += heightOfLine;
19894 
      }
19895 
      ctx.closePath();
19896 
      ctx.restore();
19897 
    },
19898 
 
19899 
    _getHeightOfLine: function() {
19900 
      return this.fontSize * this._fontSizeMult * this.lineHeight;
19901 
    },
19902 
 
19903 
    /**
19904 
     * @private
19905 
     * @param {CanvasRenderingContext2D} ctx Context to render on
19906 
     * @param {Array} textLines Array of all text lines
19907 
     */
19908 
    _renderTextBackground: function(ctx) {
19909 
      this._renderTextBoxBackground(ctx);
19910 
      this._renderTextLinesBackground(ctx);
19911 
    },
19912 
 
19913 
    /**
19914 
     * @private
19915 
     * @param {CanvasRenderingContext2D} ctx Context to render on
19916 
     */
19917 
    _renderTextBoxBackground: function(ctx) {
19918 
      if (!this.backgroundColor) {
19919 
        return;
19920 
      }
19921 
 
19922 
      ctx.save();
19923 
      ctx.fillStyle = this.backgroundColor;
19924 
 
19925 
      ctx.fillRect(
19926 
        this._getLeftOffset(),
19927 
        this._getTopOffset(),
19928 
        this.width,
19929 
        this.height
19930 
      );
19931 
 
19932 
      ctx.restore();
19933 
    },
19934 
 
19935 
    /**
19936 
     * @private
19937 
     * @param {CanvasRenderingContext2D} ctx Context to render on
19938 
     */
19939 
    _renderTextLinesBackground: function(ctx) {
19940 
      var lineTopOffset = 0, heightOfLine = this._getHeightOfLine();
19941 
      if (!this.textBackgroundColor) {
19942 
        return;
19943 
      }
19944 
 
19945 
      ctx.save();
19946 
      ctx.fillStyle = this.textBackgroundColor;
19947 
 
19948 
      for (var i = 0, len = this._textLines.length; i < len; i++) {
19949 
 
19950 
        if (this._textLines[i] !== '') {
19951 
 
19952 
          var lineWidth = this._getLineWidth(ctx, i),
19953 
              lineLeftOffset = this._getLineLeftOffset(lineWidth);
19954 
 
19955 
          ctx.fillRect(
19956 
            this._getLeftOffset() + lineLeftOffset,
19957 
            this._getTopOffset() + lineTopOffset,
19958 
            lineWidth,
19959 
            this.fontSize * this._fontSizeMult
19960 
          );
19961 
        }
19962 
        lineTopOffset += heightOfLine;
19963 
      }
19964 
      ctx.restore();
19965 
    },
19966 
 
19967 
    /**
19968 
     * @private
19969 
     * @param {Number} lineWidth Width of text line
19970 
     * @return {Number} Line left offset
19971 
     */
19972 
    _getLineLeftOffset: function(lineWidth) {
19973 
      if (this.textAlign === 'center') {
19974 
        return (this.width - lineWidth) / 2;
19975 
      }
19976 
      if (this.textAlign === 'right') {
19977 
        return this.width - lineWidth;
19978 
      }
19979 
      return 0;
19980 
    },
19981 
 
19982 
    /**
19983 
     * @private
19984 
     */
19985 
    _clearCache: function() {
19986 
      this.__lineWidths = [ ];
19987 
      this.__lineHeights = [ ];
19988 
      this.__lineOffsets = [ ];
19989 
    },
19990 
 
19991 
    /**
19992 
     * @private
19993 
     */
19994 
    _shouldClearCache: function() {
19995 
      var shouldClear = false;
19996 
      for (var prop in this._dimensionAffectingProps) {
19997 
        if (this['__' + prop] !== this[prop]) {
19998 
          this['__' + prop] = this[prop];
19999 
          shouldClear = true;
20000 
        }
20001 
      }
20002 
      return shouldClear;
20003 
    },
20004 
 
20005 
    /**
20006 
     * @private
20007 
     * @param {CanvasRenderingContext2D} ctx Context to render on
20008 
     * @return {Number} Line width
20009 
     */
20010 
    _getLineWidth: function(ctx, lineIndex) {
20011 
      if (this.__lineWidths[lineIndex]) {
20012 
        return this.__lineWidths[lineIndex];
20013 
      }
20014 
      this.__lineWidths[lineIndex] = ctx.measureText(this._textLines[lineIndex]).width;
20015 
      return this.__lineWidths[lineIndex];
20016 
    },
20017 
 
20018 
    /**
20019 
     * @private
20020 
     * @param {CanvasRenderingContext2D} ctx Context to render on
20021 
     */
20022 
    _renderTextDecoration: function(ctx) {
20023 
      if (!this.textDecoration) {
20024 
        return;
20025 
      }
20026 
 
20027 
      var halfOfVerticalBox = this.height / 2,
20028 
          _this = this, offsets = [];
20029 
 
20030 
      /** @ignore */
20031 
      function renderLinesAtOffset(offsets) {
20032 
        var i, lineHeight = 0, len, j, oLen;
20033 
        for (i = 0, len = _this._textLines.length; i < len; i++) {
20034 
 
20035 
          var lineWidth = _this._getLineWidth(ctx, i),
20036 
              lineLeftOffset = _this._getLineLeftOffset(lineWidth),
20037 
              heightOfLine = _this._getHeightOfLine(ctx, i);
20038 
 
20039 
          for (j = 0, oLen = offsets.length; j < oLen; j++) {
20040 
            ctx.fillRect(
20041 
              _this._getLeftOffset() + lineLeftOffset,
20042 
              lineHeight + (_this._fontSizeMult - 1 + offsets[j] ) * _this.fontSize - halfOfVerticalBox,
20043 
              lineWidth,
20044 
              _this.fontSize / 15);
20045 
          }
20046 
          lineHeight += heightOfLine;
20047 
        }
20048 
      }
20049 
 
20050 
      if (this.textDecoration.indexOf('underline') > -1) {
20051 
        offsets.push(0.85); // 1 - 3/16
20052 
      }
20053 
      if (this.textDecoration.indexOf('line-through') > -1) {
20054 
        offsets.push(0.43);
20055 
      }
20056 
      if (this.textDecoration.indexOf('overline') > -1) {
20057 
        offsets.push(-0.12);
20058 
      }
20059 
 
20060 
      if (offsets.length > 0) {
20061 
        renderLinesAtOffset(offsets);
20062 
      }
20063 
    },
20064 
 
20065 
    /**
20066 
     * @private
20067 
     */
20068 
    _getFontDeclaration: function() {
20069 
      return [
20070 
        // node-canvas needs "weight style", while browsers need "style weight"
20071 
        (fabric.isLikelyNode ? this.fontWeight : this.fontStyle),
20072 
        (fabric.isLikelyNode ? this.fontStyle : this.fontWeight),
20073 
        this.fontSize + 'px',
20074 
        (fabric.isLikelyNode ? ('"' + this.fontFamily + '"') : this.fontFamily)
20075 
      ].join(' ');
20076 
    },
20077 
 
20078 
    /**
20079 
     * Renders text instance on a specified context
20080 
     * @param {CanvasRenderingContext2D} ctx Context to render on
20081 
     */
20082 
    render: function(ctx, noTransform) {
20083 
      // do not render if object is not visible
20084 
      if (!this.visible) {
20085 
        return;
20086 
      }
20087 
 
20088 
      ctx.save();
20089 
      this._setTextStyles(ctx);
20090 
 
20091 
      if (this._shouldClearCache()) {
20092 
        this._initDimensions(ctx);
20093 
      }
20094 
      if (!noTransform) {
20095 
        this.transform(ctx);
20096 
      }
20097 
      this._setStrokeStyles(ctx);
20098 
      this._setFillStyles(ctx);
20099 
      if (this.transformMatrix) {
20100 
        ctx.transform.apply(ctx, this.transformMatrix);
20101 
      }
20102 
      if (this.group && this.group.type === 'path-group') {
20103 
        ctx.translate(this.left, this.top);
20104 
      }
20105 
      this._render(ctx);
20106 
      ctx.restore();
20107 
    },
20108 
 
20109 
    /**
20110 
     * Returns object representation of an instance
20111 
     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
20112 
     * @return {Object} Object representation of an instance
20113 
     */
20114 
    toObject: function(propertiesToInclude) {
20115 
      var object = extend(this.callSuper('toObject', propertiesToInclude), {
20116 
        text:                 this.text,
20117 
        fontSize:             this.fontSize,
20118 
        fontWeight:           this.fontWeight,
20119 
        fontFamily:           this.fontFamily,
20120 
        fontStyle:            this.fontStyle,
20121 
        lineHeight:           this.lineHeight,
20122 
        textDecoration:       this.textDecoration,
20123 
        textAlign:            this.textAlign,
20124 
        textBackgroundColor:  this.textBackgroundColor
20125 
      });
20126 
      if (!this.includeDefaultValues) {
20127 
        this._removeDefaultValues(object);
20128 
      }
20129 
      return object;
20130 
    },
20131 
 
20132 
    /* _TO_SVG_START_ */
20133 
    /**
20134 
     * Returns SVG representation of an instance
20135 
     * @param {Function} [reviver] Method for further parsing of svg representation.
20136 
     * @return {String} svg representation of an instance
20137 
     */
20138 
    toSVG: function(reviver) {
20139 
      var markup = this._createBaseSVGMarkup(),
20140 
          offsets = this._getSVGLeftTopOffsets(this.ctx),
20141 
          textAndBg = this._getSVGTextAndBg(offsets.textTop, offsets.textLeft);
20142 
      this._wrapSVGTextAndBg(markup, textAndBg);
20143 
 
20144 
      return reviver ? reviver(markup.join('')) : markup.join('');
20145 
    },
20146 
 
20147 
    /**
20148 
     * @private
20149 
     */
20150 
    _getSVGLeftTopOffsets: function(ctx) {
20151 
      var lineTop = this._getHeightOfLine(ctx, 0),
20152 
          textLeft = -this.width / 2,
20153 
          textTop = 0;
20154 
 
20155 
      return {
20156 
        textLeft: textLeft + (this.group && this.group.type === 'path-group' ? this.left : 0),
20157 
        textTop: textTop + (this.group && this.group.type === 'path-group' ? -this.top : 0),
20158 
        lineTop: lineTop
20159 
      };
20160 
    },
20161 
 
20162 
    /**
20163 
     * @private
20164 
     */
20165 
    _wrapSVGTextAndBg: function(markup, textAndBg) {
20166 
      markup.push(
20167 
        '\t<g transform="', this.getSvgTransform(), this.getSvgTransformMatrix(), '">\n',
20168 
          textAndBg.textBgRects.join(''),
20169 
          '\t\t<text ',
20170 
            (this.fontFamily ? 'font-family="' + this.fontFamily.replace(/"/g, '\'') + '" ': ''),
20171 
            (this.fontSize ? 'font-size="' + this.fontSize + '" ': ''),
20172 
            (this.fontStyle ? 'font-style="' + this.fontStyle + '" ': ''),
20173 
            (this.fontWeight ? 'font-weight="' + this.fontWeight + '" ': ''),
20174 
            (this.textDecoration ? 'text-decoration="' + this.textDecoration + '" ': ''),
20175 
            'style="', this.getSvgStyles(), '" >',
20176 
            textAndBg.textSpans.join(''),
20177 
          '</text>\n',
20178 
        '\t</g>\n'
20179 
      );
20180 
    },
20181 
 
20182 
    /**
20183 
     * @private
20184 
     * @param {Number} textTopOffset Text top offset
20185 
     * @param {Number} textLeftOffset Text left offset
20186 
     * @return {Object}
20187 
     */
20188 
    _getSVGTextAndBg: function(textTopOffset, textLeftOffset) {
20189 
      var textSpans = [ ],
20190 
          textBgRects = [ ],
20191 
          height = 0;
20192 
      // bounding-box background
20193 
      this._setSVGBg(textBgRects);
20194 
 
20195 
      // text and text-background
20196 
      for (var i = 0, len = this._textLines.length; i < len; i++) {
20197 
        if (this.textBackgroundColor) {
20198 
          this._setSVGTextLineBg(textBgRects, i, textLeftOffset, textTopOffset, height);
20199 
        }
20200 
        this._setSVGTextLineText(i, textSpans, height, textLeftOffset, textTopOffset, textBgRects);
20201 
        height += this._getHeightOfLine(this.ctx, i);
20202 
      }
20203 
 
20204 
      return {
20205 
        textSpans: textSpans,
20206 
        textBgRects: textBgRects
20207 
      };
20208 
    },
20209 
 
20210 
    _setSVGTextLineText: function(i, textSpans, height, textLeftOffset, textTopOffset) {
20211 
      var yPos = this.fontSize * (this._fontSizeMult - this._fontSizeFraction)
20212 
        - textTopOffset + height - this.height / 2;
20213 
      textSpans.push(
20214 
        '<tspan x="',
20215 
          toFixed(textLeftOffset + this._getLineLeftOffset(this.__lineWidths[i]), 4), '" ',
20216 
          'y="',
20217 
          toFixed(yPos, 4),
20218 
          '" ',
20219 
          // doing this on <tspan> elements since setting opacity
20220 
          // on containing <text> one doesn't work in Illustrator
20221 
          this._getFillAttributes(this.fill), '>',
20222 
          fabric.util.string.escapeXml(this._textLines[i]),
20223 
        '</tspan>'
20224 
      );
20225 
    },
20226 
 
20227 
    _setSVGTextLineBg: function(textBgRects, i, textLeftOffset, textTopOffset, height) {
20228 
      textBgRects.push(
20229 
        '\t\t<rect ',
20230 
          this._getFillAttributes(this.textBackgroundColor),
20231 
          ' x="',
20232 
          toFixed(textLeftOffset + this._getLineLeftOffset(this.__lineWidths[i]), 4),
20233 
          '" y="',
20234 
          toFixed(height - this.height / 2, 4),
20235 
          '" width="',
20236 
          toFixed(this.__lineWidths[i], 4),
20237 
          '" height="',
20238 
          toFixed(this._getHeightOfLine(this.ctx, i) / this.lineHeight, 4),
20239 
        '"></rect>\n');
20240 
    },
20241 
 
20242 
    _setSVGBg: function(textBgRects) {
20243 
      if (this.backgroundColor) {
20244 
        textBgRects.push(
20245 
          '\t\t<rect ',
20246 
            this._getFillAttributes(this.backgroundColor),
20247 
            ' x="',
20248 
            toFixed(-this.width / 2, 4),
20249 
            '" y="',
20250 
            toFixed(-this.height / 2, 4),
20251 
            '" width="',
20252 
            toFixed(this.width, 4),
20253 
            '" height="',
20254 
            toFixed(this.height, 4),
20255 
          '"></rect>\n');
20256 
      }
20257 
    },
20258 
 
20259 
    /**
20260 
     * Adobe Illustrator (at least CS5) is unable to render rgba()-based fill values
20261 
     * we work around it by "moving" alpha channel into opacity attribute and setting fill's alpha to 1
20262 
     *
20263 
     * @private
20264 
     * @param {Any} value
20265 
     * @return {String}
20266 
     */
20267 
    _getFillAttributes: function(value) {
20268 
      var fillColor = (value && typeof value === 'string') ? new fabric.Color(value) : '';
20269 
      if (!fillColor || !fillColor.getSource() || fillColor.getAlpha() === 1) {
20270 
        return 'fill="' + value + '"';
20271 
      }
20272 
      return 'opacity="' + fillColor.getAlpha() + '" fill="' + fillColor.setAlpha(1).toRgb() + '"';
20273 
    },
20274 
    /* _TO_SVG_END_ */
20275 
 
20276 
    /**
20277 
     * Sets specified property to a specified value
20278 
     * @param {String} key
20279 
     * @param {Any} value
20280 
     * @return {fabric.Text} thisArg
20281 
     * @chainable
20282 
     */
20283 
    _set: function(key, value) {
20284 
      this.callSuper('_set', key, value);
20285 
 
20286 
      if (key in this._dimensionAffectingProps) {
20287 
        this._initDimensions();
20288 
        this.setCoords();
20289 
      }
20290 
    },
20291 
 
20292 
    /**
20293 
     * Returns complexity of an instance
20294 
     * @return {Number} complexity
20295 
     */
20296 
    complexity: function() {
20297 
      return 1;
20298 
    }
20299 
  });
20300 
 
20301 
  /* _FROM_SVG_START_ */
20302 
  /**
20303 
   * List of attribute names to account for when parsing SVG element (used by {@link fabric.Text.fromElement})
20304 
   * @static
20305 
   * @memberOf fabric.Text
20306 
   * @see: http://www.w3.org/TR/SVG/text.html#TextElement
20307 
   */
20308 
  fabric.Text.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat(
20309 
    'x y dx dy font-family font-style font-weight font-size text-decoration text-anchor'.split(' '));
20310 
 
20311 
  /**
20312 
   * Default SVG font size
20313 
   * @static
20314 
   * @memberOf fabric.Text
20315 
   */
20316 
  fabric.Text.DEFAULT_SVG_FONT_SIZE = 16;
20317 
 
20318 
  /**
20319 
   * Returns fabric.Text instance from an SVG element (<b>not yet implemented</b>)
20320 
   * @static
20321 
   * @memberOf fabric.Text
20322 
   * @param {SVGElement} element Element to parse
20323 
   * @param {Object} [options] Options object
20324 
   * @return {fabric.Text} Instance of fabric.Text
20325 
   */
20326 
  fabric.Text.fromElement = function(element, options) {
20327 
    if (!element) {
20328 
      return null;
20329 
    }
20330 
 
20331 
    var parsedAttributes = fabric.parseAttributes(element, fabric.Text.ATTRIBUTE_NAMES);
20332 
    options = fabric.util.object.extend((options ? fabric.util.object.clone(options) : { }), parsedAttributes);
20333 
 
20334 
    options.top = options.top || 0;
20335 
    options.left = options.left || 0;
20336 
    if ('dx' in parsedAttributes) {
20337 
      options.left += parsedAttributes.dx;
20338 
    }
20339 
    if ('dy' in parsedAttributes) {
20340 
      options.top += parsedAttributes.dy;
20341 
    }
20342 
    if (!('fontSize' in options)) {
20343 
      options.fontSize = fabric.Text.DEFAULT_SVG_FONT_SIZE;
20344 
    }
20345 
 
20346 
    if (!options.originX) {
20347 
      options.originX = 'left';
20348 
    }
20349 
    var textContent = element.textContent.replace(/^\s+|\s+$|\n+/g, '').replace(/\s+/g, ' '),
20350 
        text = new fabric.Text(textContent, options),
20351 
        /*
20352 
          Adjust positioning:
20353 
            x/y attributes in SVG correspond to the bottom-left corner of text bounding box
20354 
            top/left properties in Fabric correspond to center point of text bounding box
20355 
        */
20356 
        offX = 0;
20357 
 
20358 
    if (text.originX === 'left') {
20359 
      offX = text.getWidth() / 2;
20360 
    }
20361 
    if (text.originX === 'right') {
20362 
      offX = -text.getWidth() / 2;
20363 
    }
20364 
    text.set({
20365 
      left: text.getLeft() + offX,
20366 
      top: text.getTop() - text.getHeight() / 2 + text.fontSize * (0.18 + text._fontSizeFraction) /* 0.3 is the old lineHeight */
20367 
    });
20368 
 
20369 
    return text;
20370 
  };
20371 
  /* _FROM_SVG_END_ */
20372 
 
20373 
  /**
20374 
   * Returns fabric.Text instance from an object representation
20375 
   * @static
20376 
   * @memberOf fabric.Text
20377 
   * @param {Object} object Object to create an instance from
20378 
   * @return {fabric.Text} Instance of fabric.Text
20379 
   */
20380 
  fabric.Text.fromObject = function(object) {
20381 
    return new fabric.Text(object.text, clone(object));
20382 
  };
20383 
 
20384 
  fabric.util.createAccessors(fabric.Text);
20385 
 
20386 
})(typeof exports !== 'undefined' ? exports : this);
20387 
 
20388 
 
20389 
(function() {
20390 
 
20391 
  var clone = fabric.util.object.clone;
20392 
 
20393 
  /**
20394 
   * IText class (introduced in <b>v1.4</b>) Events are also fired with "text:"
20395 
   * prefix when observing canvas.
20396 
   * @class fabric.IText
20397 
   * @extends fabric.Text
20398 
   * @mixes fabric.Observable
20399 
   *
20400 
   * @fires changed
20401 
   * @fires selection:changed
20402 
   * @fires editing:entered
20403 
   * @fires editing:exited
20404 
   *
20405 
   * @return {fabric.IText} thisArg
20406 
   * @see {@link fabric.IText#initialize} for constructor definition
20407 
   *
20408 
   * <p>Supported key combinations:</p>
20409 
   * <pre>
20410 
   *   Move cursor:                    left, right, up, down
20411 
   *   Select character:               shift + left, shift + right
20412 
   *   Select text vertically:         shift + up, shift + down
20413 
   *   Move cursor by word:            alt + left, alt + right
20414 
   *   Select words:                   shift + alt + left, shift + alt + right
20415 
   *   Move cursor to line start/end:  cmd + left, cmd + right or home, end
20416 
   *   Select till start/end of line:  cmd + shift + left, cmd + shift + right or shift + home, shift + end
20417 
   *   Jump to start/end of text:      cmd + up, cmd + down
20418 
   *   Select till start/end of text:  cmd + shift + up, cmd + shift + down or shift + pgUp, shift + pgDown
20419 
   *   Delete character:               backspace
20420 
   *   Delete word:                    alt + backspace
20421 
   *   Delete line:                    cmd + backspace
20422 
   *   Forward delete:                 delete
20423 
   *   Copy text:                      ctrl/cmd + c
20424 
   *   Paste text:                     ctrl/cmd + v
20425 
   *   Cut text:                       ctrl/cmd + x
20426 
   *   Select entire text:             ctrl/cmd + a
20427 
   *   Quit editing                    tab or esc
20428 
   * </pre>
20429 
   *
20430 
   * <p>Supported mouse/touch combination</p>
20431 
   * <pre>
20432 
   *   Position cursor:                click/touch
20433 
   *   Create selection:               click/touch & drag
20434 
   *   Create selection:               click & shift + click
20435 
   *   Select word:                    double click
20436 
   *   Select line:                    triple click
20437 
   * </pre>
20438 
   */
20439 
  fabric.IText = fabric.util.createClass(fabric.Text, fabric.Observable, /** @lends fabric.IText.prototype */ {
20440 
 
20441 
    /**
20442 
     * Type of an object
20443 
     * @type String
20444 
     * @default
20445 
     */
20446 
    type: 'i-text',
20447 
 
20448 
    /**
20449 
     * Index where text selection starts (or where cursor is when there is no selection)
20450 
     * @type Nubmer
20451 
     * @default
20452 
     */
20453 
    selectionStart: 0,
20454 
 
20455 
    /**
20456 
     * Index where text selection ends
20457 
     * @type Nubmer
20458 
     * @default
20459 
     */
20460 
    selectionEnd: 0,
20461 
 
20462 
    /**
20463 
     * Color of text selection
20464 
     * @type String
20465 
     * @default
20466 
     */
20467 
    selectionColor: 'rgba(17,119,255,0.3)',
20468 
 
20469 
    /**
20470 
     * Indicates whether text is in editing mode
20471 
     * @type Boolean
20472 
     * @default
20473 
     */
20474 
    isEditing: false,
20475 
 
20476 
    /**
20477 
     * Indicates whether a text can be edited
20478 
     * @type Boolean
20479 
     * @default
20480 
     */
20481 
    editable: true,
20482 
 
20483 
    /**
20484 
     * Border color of text object while it's in editing mode
20485 
     * @type String
20486 
     * @default
20487 
     */
20488 
    editingBorderColor: 'rgba(102,153,255,0.25)',
20489 
 
20490 
    /**
20491 
     * Width of cursor (in px)
20492 
     * @type Number
20493 
     * @default
20494 
     */
20495 
    cursorWidth: 2,
20496 
 
20497 
    /**
20498 
     * Color of default cursor (when not overwritten by character style)
20499 
     * @type String
20500 
     * @default
20501 
     */
20502 
    cursorColor: '#333',
20503 
 
20504 
    /**
20505 
     * Delay between cursor blink (in ms)
20506 
     * @type Number
20507 
     * @default
20508 
     */
20509 
    cursorDelay: 1000,
20510 
 
20511 
    /**
20512 
     * Duration of cursor fadein (in ms)
20513 
     * @type Number
20514 
     * @default
20515 
     */
20516 
    cursorDuration: 600,
20517 
 
20518 
    /**
20519 
     * Object containing character styles
20520 
     * (where top-level properties corresponds to line number and 2nd-level properties -- to char number in a line)
20521 
     * @type Object
20522 
     * @default
20523 
     */
20524 
    styles: null,
20525 
 
20526 
    /**
20527 
     * Indicates whether internal text char widths can be cached
20528 
     * @type Boolean
20529 
     * @default
20530 
     */
20531 
    caching: true,
20532 
 
20533 
    /**
20534 
     * @private
20535 
     * @type Boolean
20536 
     * @default
20537 
     */
20538 
    _skipFillStrokeCheck: false,
20539 
 
20540 
    /**
20541 
     * @private
20542 
     */
20543 
    _reSpace: /\s|\n/,
20544 
 
20545 
    /**
20546 
     * @private
20547 
     */
20548 
    _currentCursorOpacity: 0,
20549 
 
20550 
    /**
20551 
     * @private
20552 
     */
20553 
    _selectionDirection: null,
20554 
 
20555 
    /**
20556 
     * @private
20557 
     */
20558 
    _abortCursorAnimation: false,
20559 
 
20560 
    /**
20561 
     * @private
20562 
     */
20563 
    _charWidthsCache: { },
20564 
 
20565 
    /**
20566 
     * Constructor
20567 
     * @param {String} text Text string
20568 
     * @param {Object} [options] Options object
20569 
     * @return {fabric.IText} thisArg
20570 
     */
20571 
    initialize: function(text, options) {
20572 
      this.styles = options ? (options.styles || { }) : { };
20573 
      this.callSuper('initialize', text, options);
20574 
      this.initBehavior();
20575 
    },
20576 
 
20577 
    /**
20578 
     * @private
20579 
     */
20580 
    _clearCache: function() {
20581 
      this.callSuper('_clearCache');
20582 
      this.__maxFontHeights = [ ];
20583 
      this.__widthOfSpace = [ ];
20584 
    },
20585 
 
20586 
    /**
20587 
     * Returns true if object has no styling
20588 
     */
20589 
    isEmptyStyles: function() {
20590 
      if (!this.styles) {
20591 
        return true;
20592 
      }
20593 
      var obj = this.styles;
20594 
 
20595 
      for (var p1 in obj) {
20596 
        for (var p2 in obj[p1]) {
20597 
          /*jshint unused:false */
20598 
          for (var p3 in obj[p1][p2]) {
20599 
            return false;
20600 
          }
20601 
        }
20602 
      }
20603 
      return true;
20604 
    },
20605 
 
20606 
    /**
20607 
     * Sets selection start (left boundary of a selection)
20608 
     * @param {Number} index Index to set selection start to
20609 
     */
20610 
    setSelectionStart: function(index) {
20611 
      index = Math.max(index, 0);
20612 
      if (this.selectionStart !== index) {
20613 
        this.fire('selection:changed');
20614 
        this.canvas && this.canvas.fire('text:selection:changed', { target: this });
20615 
        this.selectionStart = index;
20616 
      }
20617 
      this._updateTextarea();
20618 
    },
20619 
 
20620 
    /**
20621 
     * Sets selection end (right boundary of a selection)
20622 
     * @param {Number} index Index to set selection end to
20623 
     */
20624 
    setSelectionEnd: function(index) {
20625 
      index = Math.min(index, this.text.length);
20626 
      if (this.selectionEnd !== index) {
20627 
        this.fire('selection:changed');
20628 
        this.canvas && this.canvas.fire('text:selection:changed', { target: this });
20629 
        this.selectionEnd = index;
20630 
      }
20631 
      this._updateTextarea();
20632 
    },
20633 
 
20634 
    /**
20635 
     * Gets style of a current selection/cursor (at the start position)
20636 
     * @param {Number} [startIndex] Start index to get styles at
20637 
     * @param {Number} [endIndex] End index to get styles at
20638 
     * @return {Object} styles Style object at a specified (or current) index
20639 
     */
20640 
    getSelectionStyles: function(startIndex, endIndex) {
20641 
 
20642 
      if (arguments.length === 2) {
20643 
        var styles = [ ];
20644 
        for (var i = startIndex; i < endIndex; i++) {
20645 
          styles.push(this.getSelectionStyles(i));
20646 
        }
20647 
        return styles;
20648 
      }
20649 
 
20650 
      var loc = this.get2DCursorLocation(startIndex);
20651 
      if (this.styles[loc.lineIndex]) {
20652 
        return this.styles[loc.lineIndex][loc.charIndex] || { };
20653 
      }
20654 
 
20655 
      return { };
20656 
    },
20657 
 
20658 
    /**
20659 
     * Sets style of a current selection
20660 
     * @param {Object} [styles] Styles object
20661 
     * @return {fabric.IText} thisArg
20662 
     * @chainable
20663 
     */
20664 
    setSelectionStyles: function(styles) {
20665 
      if (this.selectionStart === this.selectionEnd) {
20666 
        this._extendStyles(this.selectionStart, styles);
20667 
      }
20668 
      else {
20669 
        for (var i = this.selectionStart; i < this.selectionEnd; i++) {
20670 
          this._extendStyles(i, styles);
20671 
        }
20672 
      }
20673 
      /* not included in _extendStyles to avoid clearing cache more than once */
20674 
      this._clearCache();
20675 
      return this;
20676 
    },
20677 
 
20678 
    /**
20679 
     * @private
20680 
     */
20681 
    _extendStyles: function(index, styles) {
20682 
      var loc = this.get2DCursorLocation(index);
20683 
 
20684 
      if (!this.styles[loc.lineIndex]) {
20685 
        this.styles[loc.lineIndex] = { };
20686 
      }
20687 
      if (!this.styles[loc.lineIndex][loc.charIndex]) {
20688 
        this.styles[loc.lineIndex][loc.charIndex] = { };
20689 
      }
20690 
      fabric.util.object.extend(this.styles[loc.lineIndex][loc.charIndex], styles);
20691 
    },
20692 
 
20693 
    /**
20694 
    * @private
20695 
    * @param {CanvasRenderingContext2D} ctx Context to render on
20696 
    */
20697 
    _render: function(ctx) {
20698 
      this.callSuper('_render', ctx);
20699 
      this.ctx = ctx;
20700 
      this.isEditing && this.renderCursorOrSelection();
20701 
    },
20702 
 
20703 
    /**
20704 
     * Renders cursor or selection (depending on what exists)
20705 
     */
20706 
    renderCursorOrSelection: function() {
20707 
      if (!this.active) {
20708 
        return;
20709 
      }
20710 
 
20711 
      var chars = this.text.split(''),
20712 
          boundaries, ctx;
20713 
 
20714 
      if (this.canvas.contextTop) {
20715 
        ctx = this.canvas.contextTop;
20716 
        ctx.save();
20717 
        ctx.transform.apply(ctx, this.canvas.viewportTransform);
20718 
        this.transform(ctx);
20719 
      }
20720 
      else {
20721 
        ctx = this.ctx;
20722 
        ctx.save();
20723 
      }
20724 
 
20725 
      if (this.selectionStart === this.selectionEnd) {
20726 
        boundaries = this._getCursorBoundaries(chars, 'cursor');
20727 
        this.renderCursor(boundaries, ctx);
20728 
      }
20729 
      else {
20730 
        boundaries = this._getCursorBoundaries(chars, 'selection');
20731 
        this.renderSelection(chars, boundaries, ctx);
20732 
      }
20733 
 
20734 
      ctx.restore();
20735 
    },
20736 
 
20737 
    /**
20738 
     * Returns 2d representation (lineIndex and charIndex) of cursor (or selection start)
20739 
     * @param {Number} [selectionStart] Optional index. When not given, current selectionStart is used.
20740 
     */
20741 
    get2DCursorLocation: function(selectionStart) {
20742 
      if (typeof selectionStart === 'undefined') {
20743 
        selectionStart = this.selectionStart;
20744 
      }
20745 
      var textBeforeCursor = this.text.slice(0, selectionStart),
20746 
          linesBeforeCursor = textBeforeCursor.split(this._reNewline);
20747 
 
20748 
      return {
20749 
        lineIndex: linesBeforeCursor.length - 1,
20750 
        charIndex: linesBeforeCursor[linesBeforeCursor.length - 1].length
20751 
      };
20752 
    },
20753 
 
20754 
    /**
20755 
     * Returns complete style of char at the current cursor
20756 
     * @param {Number} lineIndex Line index
20757 
     * @param {Number} charIndex Char index
20758 
    * @return {Object} Character style
20759 
     */
20760 
    getCurrentCharStyle: function(lineIndex, charIndex) {
20761 
      var style = this.styles[lineIndex] && this.styles[lineIndex][charIndex === 0 ? 0 : (charIndex - 1)];
20762 
 
20763 
      return {
20764 
        fontSize: style && style.fontSize || this.fontSize,
20765 
        fill: style && style.fill || this.fill,
20766 
        textBackgroundColor: style && style.textBackgroundColor || this.textBackgroundColor,
20767 
        textDecoration: style && style.textDecoration || this.textDecoration,
20768 
        fontFamily: style && style.fontFamily || this.fontFamily,
20769 
        fontWeight: style && style.fontWeight || this.fontWeight,
20770 
        fontStyle: style && style.fontStyle || this.fontStyle,
20771 
        stroke: style && style.stroke || this.stroke,
20772 
        strokeWidth: style && style.strokeWidth || this.strokeWidth
20773 
      };
20774 
    },
20775 
 
20776 
    /**
20777 
     * Returns fontSize of char at the current cursor
20778 
     * @param {Number} lineIndex Line index
20779 
     * @param {Number} charIndex Char index
20780 
     * @return {Number} Character font size
20781 
     */
20782 
    getCurrentCharFontSize: function(lineIndex, charIndex) {
20783 
      return (
20784 
        this.styles[lineIndex] &&
20785 
        this.styles[lineIndex][charIndex === 0 ? 0 : (charIndex - 1)] &&
20786 
        this.styles[lineIndex][charIndex === 0 ? 0 : (charIndex - 1)].fontSize) || this.fontSize;
20787 
    },
20788 
 
20789 
    /**
20790 
     * Returns color (fill) of char at the current cursor
20791 
     * @param {Number} lineIndex Line index
20792 
     * @param {Number} charIndex Char index
20793 
     * @return {String} Character color (fill)
20794 
     */
20795 
    getCurrentCharColor: function(lineIndex, charIndex) {
20796 
      return (
20797 
        this.styles[lineIndex] &&
20798 
        this.styles[lineIndex][charIndex === 0 ? 0 : (charIndex - 1)] &&
20799 
        this.styles[lineIndex][charIndex === 0 ? 0 : (charIndex - 1)].fill) || this.cursorColor;
20800 
    },
20801 
 
20802 
    /**
20803 
     * Returns cursor boundaries (left, top, leftOffset, topOffset)
20804 
     * @private
20805 
     * @param {Array} chars Array of characters
20806 
     * @param {String} typeOfBoundaries
20807 
     */
20808 
    _getCursorBoundaries: function(chars, typeOfBoundaries) {
20809 
 
20810 
      // left/top are left/top of entire text box
20811 
      // leftOffset/topOffset are offset from that left/top point of a text box
20812 
 
20813 
      var left = Math.round(this._getLeftOffset()),
20814 
          top = this._getTopOffset(),
20815 
 
20816 
          offsets = this._getCursorBoundariesOffsets(
20817 
                      chars, typeOfBoundaries);
20818 
 
20819 
      return {
20820 
        left: left,
20821 
        top: top,
20822 
        leftOffset: offsets.left + offsets.lineLeft,
20823 
        topOffset: offsets.top
20824 
      };
20825 
    },
20826 
 
20827 
    /**
20828 
     * @private
20829 
     */
20830 
    _getCursorBoundariesOffsets: function(chars, typeOfBoundaries) {
20831 
 
20832 
      var lineLeftOffset = 0,
20833 
 
20834 
          lineIndex = 0,
20835 
          charIndex = 0,
20836 
          topOffset = 0,
20837 
          leftOffset = 0;
20838 
 
20839 
      for (var i = 0; i < this.selectionStart; i++) {
20840 
        if (chars[i] === '\n') {
20841 
          leftOffset = 0;
20842 
          topOffset += this._getHeightOfLine(this.ctx, lineIndex);
20843 
 
20844 
          lineIndex++;
20845 
          charIndex = 0;
20846 
        }
20847 
        else {
20848 
          leftOffset += this._getWidthOfChar(this.ctx, chars[i], lineIndex, charIndex);
20849 
          charIndex++;
20850 
        }
20851 
 
20852 
        lineLeftOffset = this._getCachedLineOffset(lineIndex);
20853 
      }
20854 
      if (typeOfBoundaries === 'cursor') {
20855 
        topOffset += (1 - this._fontSizeFraction) * this._getHeightOfLine(this.ctx, lineIndex) / this.lineHeight
20856 
          - this.getCurrentCharFontSize(lineIndex, charIndex) * (1 - this._fontSizeFraction);
20857 
      }
20858 
 
20859 
      return {
20860 
        top: topOffset,
20861 
        left: leftOffset,
20862 
        lineLeft: lineLeftOffset
20863 
      };
20864 
    },
20865 
 
20866 
    /**
20867 
     * @private
20868 
     */
20869 
    _getCachedLineOffset: function(lineIndex) {
20870 
      var widthOfLine = this._getLineWidth(this.ctx, lineIndex);
20871 
 
20872 
      return this.__lineOffsets[lineIndex] ||
20873 
        (this.__lineOffsets[lineIndex] = this._getLineLeftOffset(widthOfLine));
20874 
    },
20875 
 
20876 
    /**
20877 
     * Renders cursor
20878 
     * @param {Object} boundaries
20879 
     * @param {CanvasRenderingContext2D} ctx transformed context to draw on
20880 
     */
20881 
    renderCursor: function(boundaries, ctx) {
20882 
 
20883 
      var cursorLocation = this.get2DCursorLocation(),
20884 
          lineIndex = cursorLocation.lineIndex,
20885 
          charIndex = cursorLocation.charIndex,
20886 
          charHeight = this.getCurrentCharFontSize(lineIndex, charIndex),
20887 
          leftOffset = (lineIndex === 0 && charIndex === 0)
20888 
                    ? this._getCachedLineOffset(lineIndex)
20889 
                    : boundaries.leftOffset;
20890 
 
20891 
      ctx.fillStyle = this.getCurrentCharColor(lineIndex, charIndex);
20892 
      ctx.globalAlpha = this.__isMousedown ? 1 : this._currentCursorOpacity;
20893 
 
20894 
      ctx.fillRect(
20895 
        boundaries.left + leftOffset,
20896 
        boundaries.top + boundaries.topOffset,
20897 
        this.cursorWidth / this.scaleX,
20898 
        charHeight);
20899 
 
20900 
    },
20901 
 
20902 
    /**
20903 
     * Renders text selection
20904 
     * @param {Array} chars Array of characters
20905 
     * @param {Object} boundaries Object with left/top/leftOffset/topOffset
20906 
     * @param {CanvasRenderingContext2D} ctx transformed context to draw on
20907 
     */
20908 
    renderSelection: function(chars, boundaries, ctx) {
20909 
 
20910 
      ctx.fillStyle = this.selectionColor;
20911 
 
20912 
      var start = this.get2DCursorLocation(this.selectionStart),
20913 
          end = this.get2DCursorLocation(this.selectionEnd),
20914 
          startLine = start.lineIndex,
20915 
          endLine = end.lineIndex;
20916 
 
20917 
      for (var i = startLine; i <= endLine; i++) {
20918 
        var lineOffset = this._getCachedLineOffset(i) || 0,
20919 
            lineHeight = this._getHeightOfLine(this.ctx, i),
20920 
            boxWidth = 0, line = this._textLines[i];
20921 
 
20922 
        if (i === startLine) {
20923 
          for (var j = 0, len = line.length; j < len; j++) {
20924 
            if (j >= start.charIndex && (i !== endLine || j < end.charIndex)) {
20925 
              boxWidth += this._getWidthOfChar(ctx, line[j], i, j);
20926 
            }
20927 
            if (j < start.charIndex) {
20928 
              lineOffset += this._getWidthOfChar(ctx, line[j], i, j);
20929 
            }
20930 
          }
20931 
        }
20932 
        else if (i > startLine && i < endLine) {
20933 
          boxWidth += this._getLineWidth(ctx, i) || 5;
20934 
        }
20935 
        else if (i === endLine) {
20936 
          for (var j2 = 0, j2len = end.charIndex; j2 < j2len; j2++) {
20937 
            boxWidth += this._getWidthOfChar(ctx, line[j2], i, j2);
20938 
          }
20939 
        }
20940 
 
20941 
        ctx.fillRect(
20942 
          boundaries.left + lineOffset,
20943 
          boundaries.top + boundaries.topOffset,
20944 
          boxWidth,
20945 
          lineHeight);
20946 
 
20947 
        boundaries.topOffset += lineHeight;
20948 
      }
20949 
    },
20950 
 
20951 
    /**
20952 
     * @private
20953 
     * @param {String} method
20954 
     * @param {CanvasRenderingContext2D} ctx Context to render on
20955 
     */
20956 
    _renderChars: function(method, ctx, line, left, top, lineIndex) {
20957 
 
20958 
      if (this.isEmptyStyles()) {
20959 
        return this._renderCharsFast(method, ctx, line, left, top);
20960 
      }
20961 
 
20962 
      this.skipTextAlign = true;
20963 
 
20964 
      // set proper box offset
20965 
      left -= this.textAlign === 'center'
20966 
        ? (this.width / 2)
20967 
        : (this.textAlign === 'right')
20968 
          ? this.width
20969 
          : 0;
20970 
 
20971 
      // set proper line offset
20972 
      var lineHeight = this._getHeightOfLine(ctx, lineIndex),
20973 
          lineLeftOffset = this._getCachedLineOffset(lineIndex),
20974 
          chars = line.split(''),
20975 
          prevStyle,
20976 
          charsToRender = '';
20977 
 
20978 
      left += lineLeftOffset || 0;
20979 
 
20980 
      ctx.save();
20981 
      top -= lineHeight / this.lineHeight * this._fontSizeFraction;
20982 
      for (var i = 0, len = chars.length; i <= len; i++) {
20983 
        prevStyle = prevStyle || this.getCurrentCharStyle(lineIndex, i);
20984 
        var thisStyle = this.getCurrentCharStyle(lineIndex, i + 1);
20985 
 
20986 
        if (this._hasStyleChanged(prevStyle, thisStyle) || i === len) {
20987 
          this._renderChar(method, ctx, lineIndex, i - 1, charsToRender, left, top, lineHeight);
20988 
          charsToRender = '';
20989 
          prevStyle = thisStyle;
20990 
        }
20991 
        charsToRender += chars[i];
20992 
      }
20993 
 
20994 
      ctx.restore();
20995 
    },
20996 
 
20997 
    /**
20998 
     * @private
20999 
     * @param {String} method
21000 
     * @param {CanvasRenderingContext2D} ctx Context to render on
21001 
     * @param {String} line Content of the line
21002 
     * @param {Number} left Left coordinate
21003 
     * @param {Number} top Top coordinate
21004 
     */
21005 
    _renderCharsFast: function(method, ctx, line, left, top) {
21006 
      this.skipTextAlign = false;
21007 
 
21008 
      if (method === 'fillText' && this.fill) {
21009 
        this.callSuper('_renderChars', method, ctx, line, left, top);
21010 
      }
21011 
      if (method === 'strokeText' && ((this.stroke && this.strokeWidth > 0) || this.skipFillStrokeCheck)) {
21012 
        this.callSuper('_renderChars', method, ctx, line, left, top);
21013 
      }
21014 
    },
21015 
 
21016 
    /**
21017 
     * @private
21018 
     * @param {String} method
21019 
     * @param {CanvasRenderingContext2D} ctx Context to render on
21020 
     * @param {Number} lineIndex
21021 
     * @param {Number} i
21022 
     * @param {String} _char
21023 
     * @param {Number} left Left coordinate
21024 
     * @param {Number} top Top coordinate
21025 
     * @param {Number} lineHeight Height of the line
21026 
     */
21027 
    _renderChar: function(method, ctx, lineIndex, i, _char, left, top, lineHeight) {
21028 
      var decl, charWidth, charHeight,
21029 
          offset = this._fontSizeFraction * lineHeight / this.lineHeight;
21030 
 
21031 
      if (this.styles && this.styles[lineIndex] && (decl = this.styles[lineIndex][i])) {
21032 
 
21033 
        var shouldStroke = decl.stroke || this.stroke,
21034 
            shouldFill = decl.fill || this.fill;
21035 
 
21036 
        ctx.save();
21037 
        charWidth = this._applyCharStylesGetWidth(ctx, _char, lineIndex, i, decl);
21038 
        charHeight = this._getHeightOfChar(ctx, _char, lineIndex, i);
21039 
 
21040 
        if (shouldFill) {
21041 
          ctx.fillText(_char, left, top);
21042 
        }
21043 
        if (shouldStroke) {
21044 
          ctx.strokeText(_char, left, top);
21045 
        }
21046 
 
21047 
        this._renderCharDecoration(ctx, decl, left, top, offset, charWidth, charHeight);
21048 
        ctx.restore();
21049 
 
21050 
        ctx.translate(charWidth, 0);
21051 
      }
21052 
      else {
21053 
        if (method === 'strokeText' && this.stroke) {
21054 
          ctx[method](_char, left, top);
21055 
        }
21056 
        if (method === 'fillText' && this.fill) {
21057 
          ctx[method](_char, left, top);
21058 
        }
21059 
        charWidth = this._applyCharStylesGetWidth(ctx, _char, lineIndex, i);
21060 
        this._renderCharDecoration(ctx, null, left, top, offset, charWidth, this.fontSize);
21061 
 
21062 
        ctx.translate(ctx.measureText(_char).width, 0);
21063 
      }
21064 
    },
21065 
 
21066 
    /**
21067 
     * @private
21068 
     * @param {Object} prevStyle
21069 
     * @param {Object} thisStyle
21070 
     */
21071 
    _hasStyleChanged: function(prevStyle, thisStyle) {
21072 
      return (prevStyle.fill !== thisStyle.fill ||
21073 
              prevStyle.fontSize !== thisStyle.fontSize ||
21074 
              prevStyle.textBackgroundColor !== thisStyle.textBackgroundColor ||
21075 
              prevStyle.textDecoration !== thisStyle.textDecoration ||
21076 
              prevStyle.fontFamily !== thisStyle.fontFamily ||
21077 
              prevStyle.fontWeight !== thisStyle.fontWeight ||
21078 
              prevStyle.fontStyle !== thisStyle.fontStyle ||
21079 
              prevStyle.stroke !== thisStyle.stroke ||
21080 
              prevStyle.strokeWidth !== thisStyle.strokeWidth
21081 
      );
21082 
    },
21083 
 
21084 
    /**
21085 
     * @private
21086 
     * @param {CanvasRenderingContext2D} ctx Context to render on
21087 
     */
21088 
    _renderCharDecoration: function(ctx, styleDeclaration, left, top, offset, charWidth, charHeight) {
21089 
 
21090 
      var textDecoration = styleDeclaration
21091 
            ? (styleDeclaration.textDecoration || this.textDecoration)
21092 
            : this.textDecoration;
21093 
 
21094 
      if (!textDecoration) {
21095 
        return;
21096 
      }
21097 
 
21098 
      if (textDecoration.indexOf('underline') > -1) {
21099 
        ctx.fillRect(
21100 
          left,
21101 
          top + charHeight / 10,
21102 
          charWidth ,
21103 
          charHeight / 15
21104 
        );
21105 
      }
21106 
      if (textDecoration.indexOf('line-through') > -1) {
21107 
        ctx.fillRect(
21108 
          left,
21109 
          top - charHeight * (this._fontSizeFraction + this._fontSizeMult - 1) + charHeight / 15,
21110 
          charWidth,
21111 
          charHeight / 15
21112 
        );
21113 
      }
21114 
      if (textDecoration.indexOf('overline') > -1) {
21115 
        ctx.fillRect(
21116 
          left,
21117 
          top - (this._fontSizeMult - this._fontSizeFraction) * charHeight,
21118 
          charWidth,
21119 
          charHeight / 15
21120 
        );
21121 
      }
21122 
    },
21123 
 
21124 
    /**
21125 
     * @private
21126 
     * @param {String} method
21127 
     * @param {CanvasRenderingContext2D} ctx Context to render on
21128 
     * @param {String} line
21129 
     */
21130 
    _renderTextLine: function(method, ctx, line, left, top, lineIndex) {
21131 
      // to "cancel" this.fontSize subtraction in fabric.Text#_renderTextLine
21132 
      // the adding 0.03 is just to align text with itext by overlap test
21133 
      if (!this.isEmptyStyles()) {
21134 
        top += this.fontSize * (this._fontSizeFraction + 0.03);
21135 
      }
21136 
      this.callSuper('_renderTextLine', method, ctx, line, left, top, lineIndex);
21137 
    },
21138 
 
21139 
    /**
21140 
     * @private
21141 
     * @param {CanvasRenderingContext2D} ctx Context to render on
21142 
     */
21143 
    _renderTextDecoration: function(ctx) {
21144 
      if (this.isEmptyStyles()) {
21145 
        return this.callSuper('_renderTextDecoration', ctx);
21146 
      }
21147 
    },
21148 
 
21149 
    /**
21150 
     * @private
21151 
     * @param {CanvasRenderingContext2D} ctx Context to render on
21152 
     */
21153 
    _renderTextLinesBackground: function(ctx) {
21154 
      if (!this.textBackgroundColor && !this.styles) {
21155 
        return;
21156 
      }
21157 
 
21158 
      ctx.save();
21159 
 
21160 
      if (this.textBackgroundColor) {
21161 
        ctx.fillStyle = this.textBackgroundColor;
21162 
      }
21163 
 
21164 
      var lineHeights = 0;
21165 
 
21166 
      for (var i = 0, len = this._textLines.length; i < len; i++) {
21167 
 
21168 
        var heightOfLine = this._getHeightOfLine(ctx, i);
21169 
        if (this._textLines[i] === '') {
21170 
          lineHeights += heightOfLine;
21171 
          continue;
21172 
        }
21173 
 
21174 
        var lineWidth = this._getLineWidth(ctx, i),
21175 
            lineLeftOffset = this._getCachedLineOffset(i);
21176 
 
21177 
        if (this.textBackgroundColor) {
21178 
          ctx.fillStyle = this.textBackgroundColor;
21179 
 
21180 
          ctx.fillRect(
21181 
            this._getLeftOffset() + lineLeftOffset,
21182 
            this._getTopOffset() + lineHeights,
21183 
            lineWidth,
21184 
            heightOfLine / this.lineHeight
21185 
          );
21186 
        }
21187 
        if (this.styles[i]) {
21188 
          for (var j = 0, jlen = this._textLines[i].length; j < jlen; j++) {
21189 
            if (this.styles[i] && this.styles[i][j] && this.styles[i][j].textBackgroundColor) {
21190 
 
21191 
              var _char = this._textLines[i][j];
21192 
 
21193 
              ctx.fillStyle = this.styles[i][j].textBackgroundColor;
21194 
 
21195 
              ctx.fillRect(
21196 
                this._getLeftOffset() + lineLeftOffset + this._getWidthOfCharsAt(ctx, i, j),
21197 
                this._getTopOffset() + lineHeights,
21198 
                this._getWidthOfChar(ctx, _char, i, j) + 1,
21199 
                heightOfLine / this.lineHeight
21200 
              );
21201 
            }
21202 
          }
21203 
        }
21204 
        lineHeights += heightOfLine;
21205 
      }
21206 
      ctx.restore();
21207 
    },
21208 
 
21209 
    /**
21210 
     * @private
21211 
     */
21212 
    _getCacheProp: function(_char, styleDeclaration) {
21213 
      return _char +
21214 
             styleDeclaration.fontFamily +
21215 
             styleDeclaration.fontSize +
21216 
             styleDeclaration.fontWeight +
21217 
             styleDeclaration.fontStyle +
21218 
             styleDeclaration.shadow;
21219 
    },
21220 
 
21221 
    /**
21222 
     * @private
21223 
     * @param {CanvasRenderingContext2D} ctx Context to render on
21224 
     * @param {String} _char
21225 
     * @param {Number} lineIndex
21226 
     * @param {Number} charIndex
21227 
     * @param {Object} [decl]
21228 
     */
21229 
    _applyCharStylesGetWidth: function(ctx, _char, lineIndex, charIndex, decl) {
21230 
      var styleDeclaration = decl ||
21231 
                            (this.styles[lineIndex] &&
21232 
                             this.styles[lineIndex][charIndex]);
21233 
 
21234 
      if (styleDeclaration) {
21235 
        // cloning so that original style object is not polluted with following font declarations
21236 
        styleDeclaration = clone(styleDeclaration);
21237 
      }
21238 
      else {
21239 
        styleDeclaration = { };
21240 
      }
21241 
 
21242 
      this._applyFontStyles(styleDeclaration);
21243 
 
21244 
      var cacheProp = this._getCacheProp(_char, styleDeclaration);
21245 
 
21246 
      // short-circuit if no styles
21247 
      if (this.isEmptyStyles() && this._charWidthsCache[cacheProp] && this.caching) {
21248 
        return this._charWidthsCache[cacheProp];
21249 
      }
21250 
 
21251 
      if (typeof styleDeclaration.shadow === 'string') {
21252 
        styleDeclaration.shadow = new fabric.Shadow(styleDeclaration.shadow);
21253 
      }
21254 
 
21255 
      var fill = styleDeclaration.fill || this.fill;
21256 
      ctx.fillStyle = fill.toLive
21257 
        ? fill.toLive(ctx, this)
21258 
        : fill;
21259 
 
21260 
      if (styleDeclaration.stroke) {
21261 
        ctx.strokeStyle = (styleDeclaration.stroke && styleDeclaration.stroke.toLive)
21262 
          ? styleDeclaration.stroke.toLive(ctx, this)
21263 
          : styleDeclaration.stroke;
21264 
      }
21265 
 
21266 
      ctx.lineWidth = styleDeclaration.strokeWidth || this.strokeWidth;
21267 
      ctx.font = this._getFontDeclaration.call(styleDeclaration);
21268 
      this._setShadow.call(styleDeclaration, ctx);
21269 
 
21270 
      if (!this.caching) {
21271 
        return ctx.measureText(_char).width;
21272 
      }
21273 
 
21274 
      if (!this._charWidthsCache[cacheProp]) {
21275 
        this._charWidthsCache[cacheProp] = ctx.measureText(_char).width;
21276 
      }
21277 
 
21278 
      return this._charWidthsCache[cacheProp];
21279 
    },
21280 
 
21281 
    /**
21282 
     * @private
21283 
     * @param {Object} styleDeclaration
21284 
     */
21285 
    _applyFontStyles: function(styleDeclaration) {
21286 
      if (!styleDeclaration.fontFamily) {
21287 
        styleDeclaration.fontFamily = this.fontFamily;
21288 
      }
21289 
      if (!styleDeclaration.fontSize) {
21290 
        styleDeclaration.fontSize = this.fontSize;
21291 
      }
21292 
      if (!styleDeclaration.fontWeight) {
21293 
        styleDeclaration.fontWeight = this.fontWeight;
21294 
      }
21295 
      if (!styleDeclaration.fontStyle) {
21296 
        styleDeclaration.fontStyle = this.fontStyle;
21297 
      }
21298 
    },
21299 
 
21300 
    /**
21301 
     * @private
21302 
     * @param {Number} lineIndex
21303 
     * @param {Number} charIndex
21304 
     */
21305 
    _getStyleDeclaration: function(lineIndex, charIndex) {
21306 
      return (this.styles[lineIndex] && this.styles[lineIndex][charIndex])
21307 
        ? clone(this.styles[lineIndex][charIndex])
21308 
        : { };
21309 
    },
21310 
 
21311 
    /**
21312 
     * @private
21313 
     * @param {CanvasRenderingContext2D} ctx Context to render on
21314 
     */
21315 
    _getWidthOfChar: function(ctx, _char, lineIndex, charIndex) {
21316 
      if (this.textAlign === 'justify' && /\s/.test(_char)) {
21317 
        return this._getWidthOfSpace(ctx, lineIndex);
21318 
      }
21319 
 
21320 
      var styleDeclaration = this._getStyleDeclaration(lineIndex, charIndex);
21321 
      this._applyFontStyles(styleDeclaration);
21322 
      var cacheProp = this._getCacheProp(_char, styleDeclaration);
21323 
 
21324 
      if (this._charWidthsCache[cacheProp] && this.caching) {
21325 
        return this._charWidthsCache[cacheProp];
21326 
      }
21327 
      else if (ctx) {
21328 
        ctx.save();
21329 
        var width = this._applyCharStylesGetWidth(ctx, _char, lineIndex, charIndex);
21330 
        ctx.restore();
21331 
        return width;
21332 
      }
21333 
    },
21334 
 
21335 
    /**
21336 
     * @private
21337 
     * @param {CanvasRenderingContext2D} ctx Context to render on
21338 
     */
21339 
    _getHeightOfChar: function(ctx, _char, lineIndex, charIndex) {
21340 
      if (this.styles[lineIndex] && this.styles[lineIndex][charIndex]) {
21341 
        return this.styles[lineIndex][charIndex].fontSize || this.fontSize;
21342 
      }
21343 
      return this.fontSize;
21344 
    },
21345 
 
21346 
    /**
21347 
     * @private
21348 
     * @param {CanvasRenderingContext2D} ctx Context to render on
21349 
     */
21350 
    _getHeightOfCharAt: function(ctx, lineIndex, charIndex) {
21351 
      var _char = this._textLines[lineIndex][charIndex];
21352 
      return this._getHeightOfChar(ctx, _char, lineIndex, charIndex);
21353 
    },
21354 
 
21355 
    /**
21356 
     * @private
21357 
     * @param {CanvasRenderingContext2D} ctx Context to render on
21358 
     */
21359 
    _getWidthOfCharsAt: function(ctx, lineIndex, charIndex) {
21360 
      var width = 0, i, _char;
21361 
      for (i = 0; i < charIndex; i++) {
21362 
        _char = this._textLines[lineIndex][i];
21363 
        width += this._getWidthOfChar(ctx, _char, lineIndex, i);
21364 
      }
21365 
      return width;
21366 
    },
21367 
 
21368 
    /**
21369 
     * @private
21370 
     * @param {CanvasRenderingContext2D} ctx Context to render on
21371 
     */
21372 
    _getLineWidth: function(ctx, lineIndex) {
21373 
      if (this.__lineWidths[lineIndex]) {
21374 
        return this.__lineWidths[lineIndex];
21375 
      }
21376 
      this.__lineWidths[lineIndex] = this._getWidthOfCharsAt(ctx, lineIndex, this._textLines[lineIndex].length);
21377 
      return this.__lineWidths[lineIndex];
21378 
    },
21379 
 
21380 
    /**
21381 
     * @private
21382 
     * @param {CanvasRenderingContext2D} ctx Context to render on
21383 
     * @param {Number} lineIndex
21384 
     */
21385 
    _getWidthOfSpace: function (ctx, lineIndex) {
21386 
      if (this.__widthOfSpace[lineIndex]) {
21387 
        return this.__widthOfSpace[lineIndex];
21388 
      }
21389 
      var line = this._textLines[lineIndex],
21390 
          wordsWidth = this._getWidthOfWords(ctx, line, lineIndex),
21391 
          widthDiff = this.width - wordsWidth,
21392 
          numSpaces = line.length - line.replace(/\s+/g, '').length,
21393 
          width = widthDiff / numSpaces;
21394 
      this.__widthOfSpace[lineIndex] = width;
21395 
      return width;
21396 
    },
21397 
 
21398 
    /**
21399 
     * @private
21400 
     * @param {CanvasRenderingContext2D} ctx Context to render on
21401 
     * @param {Number} line
21402 
     * @param {Number} lineIndex
21403 
     */
21404 
    _getWidthOfWords: function (ctx, line, lineIndex) {
21405 
      var width = 0;
21406 
 
21407 
      for (var charIndex = 0; charIndex < line.length; charIndex++) {
21408 
        var _char = line[charIndex];
21409 
 
21410 
        if (!_char.match(/\s/)) {
21411 
          width += this._getWidthOfChar(ctx, _char, lineIndex, charIndex);
21412 
        }
21413 
      }
21414 
 
21415 
      return width;
21416 
    },
21417 
 
21418 
    /**
21419 
     * @private
21420 
     * @param {CanvasRenderingContext2D} ctx Context to render on
21421 
     */
21422 
    _getHeightOfLine: function(ctx, lineIndex) {
21423 
      if (this.__lineHeights[lineIndex]) {
21424 
        return this.__lineHeights[lineIndex];
21425 
      }
21426 
 
21427 
      var line = this._textLines[lineIndex],
21428 
          maxHeight = this._getHeightOfChar(ctx, line[0], lineIndex, 0);
21429 
 
21430 
      for (var i = 1, len = line.length; i < len; i++) {
21431 
        var currentCharHeight = this._getHeightOfChar(ctx, line[i], lineIndex, i);
21432 
        if (currentCharHeight > maxHeight) {
21433 
          maxHeight = currentCharHeight;
21434 
        }
21435 
      }
21436 
      this.__maxFontHeights[lineIndex] = maxHeight;
21437 
      this.__lineHeights[lineIndex] = maxHeight * this.lineHeight * this._fontSizeMult;
21438 
      return this.__lineHeights[lineIndex];
21439 
    },
21440 
 
21441 
    /**
21442 
     * @private
21443 
     * @param {CanvasRenderingContext2D} ctx Context to render on
21444 
     */
21445 
    _getTextHeight: function(ctx) {
21446 
      var height = 0;
21447 
      for (var i = 0, len = this._textLines.length; i < len; i++) {
21448 
        height += this._getHeightOfLine(ctx, i);
21449 
      }
21450 
      return height;
21451 
    },
21452 
 
21453 
    /**
21454 
     * This method is overwritten to account for different top offset
21455 
     * @private
21456 
     */
21457 
    _renderTextBoxBackground: function(ctx) {
21458 
      if (!this.backgroundColor) {
21459 
        return;
21460 
      }
21461 
 
21462 
      ctx.save();
21463 
      ctx.fillStyle = this.backgroundColor;
21464 
 
21465 
      ctx.fillRect(
21466 
        this._getLeftOffset(),
21467 
        this._getTopOffset(),
21468 
        this.width,
21469 
        this.height
21470 
      );
21471 
 
21472 
      ctx.restore();
21473 
    },
21474 
 
21475 
    /**
21476 
     * Returns object representation of an instance
21477 
     * @method toObject
21478 
     * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
21479 
     * @return {Object} object representation of an instance
21480 
     */
21481 
    toObject: function(propertiesToInclude) {
21482 
      return fabric.util.object.extend(this.callSuper('toObject', propertiesToInclude), {
21483 
        styles: clone(this.styles)
21484 
      });
21485 
    }
21486 
  });
21487 
 
21488 
  /**
21489 
   * Returns fabric.IText instance from an object representation
21490 
   * @static
21491 
   * @memberOf fabric.IText
21492 
   * @param {Object} object Object to create an instance from
21493 
   * @return {fabric.IText} instance of fabric.IText
21494 
   */
21495 
  fabric.IText.fromObject = function(object) {
21496 
    return new fabric.IText(object.text, clone(object));
21497 
  };
21498 
})();
21499 
 
21500 
 
21501 
(function() {
21502 
 
21503 
  var clone = fabric.util.object.clone;
21504 
 
21505 
  fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ {
21506 
 
21507 
    /**
21508 
     * Initializes all the interactive behavior of IText
21509 
     */
21510 
    initBehavior: function() {
21511 
      this.initAddedHandler();
21512 
      this.initRemovedHandler();
21513 
      this.initCursorSelectionHandlers();
21514 
      this.initDoubleClickSimulation();
21515 
    },
21516 
 
21517 
    /**
21518 
     * Initializes "selected" event handler
21519 
     */
21520 
    initSelectedHandler: function() {
21521 
      this.on('selected', function() {
21522 
 
21523 
        var _this = this;
21524 
        setTimeout(function() {
21525 
          _this.selected = true;
21526 
        }, 100);
21527 
      });
21528 
    },
21529 
 
21530 
    /**
21531 
     * Initializes "added" event handler
21532 
     */
21533 
    initAddedHandler: function() {
21534 
      var _this = this;
21535 
      this.on('added', function() {
21536 
        if (this.canvas && !this.canvas._hasITextHandlers) {
21537 
          this.canvas._hasITextHandlers = true;
21538 
          this._initCanvasHandlers();
21539 
        }
21540 
 
21541 
        // Track IText instances per-canvas. Only register in this array once added
21542 
        // to a canvas; we don't want to leak a reference to the instance forever
21543 
        // simply because it existed at some point.
21544 
        //
21545 
        // (Might be added to a collection, but not on a canvas.)
21546 
        if (_this.canvas) {
21547 
          _this.canvas._iTextInstances = _this.canvas._iTextInstances || [];
21548 
          _this.canvas._iTextInstances.push(_this);
21549 
        }
21550 
      });
21551 
    },
21552 
 
21553 
    initRemovedHandler: function() {
21554 
      var _this = this;
21555 
      this.on('removed', function() {
21556 
        // (Might be removed from a collection, but not on a canvas.)
21557 
        if (_this.canvas) {
21558 
          _this.canvas._iTextInstances = _this.canvas._iTextInstances || [];
21559 
          fabric.util.removeFromArray(_this.canvas._iTextInstances, _this);
21560 
        }
21561 
      });
21562 
    },
21563 
 
21564 
    /**
21565 
     * @private
21566 
     */
21567 
    _initCanvasHandlers: function() {
21568 
      var _this = this;
21569 
 
21570 
      this.canvas.on('selection:cleared', function() {
21571 
        fabric.IText.prototype.exitEditingOnOthers(_this.canvas);
21572 
      });
21573 
 
21574 
      this.canvas.on('mouse:up', function() {
21575 
        if (_this.canvas._iTextInstances) {
21576 
          _this.canvas._iTextInstances.forEach(function(obj) {
21577 
            obj.__isMousedown = false;
21578 
          });
21579 
        }
21580 
      });
21581 
 
21582 
      this.canvas.on('object:selected', function() {
21583 
        fabric.IText.prototype.exitEditingOnOthers(_this.canvas);
21584 
      });
21585 
    },
21586 
 
21587 
    /**
21588 
     * @private
21589 
     */
21590 
    _tick: function() {
21591 
      this._currentTickState = this._animateCursor(this, 1, this.cursorDuration, '_onTickComplete');
21592 
    },
21593 
 
21594 
    /**
21595 
     * @private
21596 
     */
21597 
    _animateCursor: function(obj, targetOpacity, duration, completeMethod) {
21598 
 
21599 
      var tickState;
21600 
 
21601 
      tickState = {
21602 
        isAborted: false,
21603 
        abort: function() {
21604 
          this.isAborted = true;
21605 
        },
21606 
      };
21607 
 
21608 
      obj.animate('_currentCursorOpacity', targetOpacity, {
21609 
        duration: duration,
21610 
        onComplete: function() {
21611 
          if (!tickState.isAborted) {
21612 
            obj[completeMethod]();
21613 
          }
21614 
        },
21615 
        onChange: function() {
21616 
          if (obj.canvas) {
21617 
            obj.canvas.clearContext(obj.canvas.contextTop || obj.ctx);
21618 
            obj.renderCursorOrSelection();
21619 
          }
21620 
        },
21621 
        abort: function() {
21622 
          return tickState.isAborted;
21623 
        }
21624 
      });
21625 
      return tickState;
21626 
    },
21627 
 
21628 
    /**
21629 
     * @private
21630 
     */
21631 
    _onTickComplete: function() {
21632 
 
21633 
      var _this = this;
21634 
 
21635 
      if (this._cursorTimeout1) {
21636 
        clearTimeout(this._cursorTimeout1);
21637 
      }
21638 
      this._cursorTimeout1 = setTimeout(function() {
21639 
        _this._currentTickCompleteState = _this._animateCursor(_this, 0, this.cursorDuration / 2, '_tick');
21640 
      }, 100);
21641 
    },
21642 
 
21643 
    /**
21644 
     * Initializes delayed cursor
21645 
     */
21646 
    initDelayedCursor: function(restart) {
21647 
      var _this = this,
21648 
          delay = restart ? 0 : this.cursorDelay;
21649 
 
21650 
      this._currentTickState && this._currentTickState.abort();
21651 
      this._currentTickCompleteState && this._currentTickCompleteState.abort();
21652 
      clearTimeout(this._cursorTimeout1);
21653 
      this._currentCursorOpacity = 1;
21654 
      if (this.canvas) {
21655 
        this.canvas.clearContext(this.canvas.contextTop || this.ctx);
21656 
        this.renderCursorOrSelection();
21657 
      }
21658 
      if (this._cursorTimeout2) {
21659 
        clearTimeout(this._cursorTimeout2);
21660 
      }
21661 
      this._cursorTimeout2 = setTimeout(function() {
21662 
        _this._tick();
21663 
      }, delay);
21664 
    },
21665 
 
21666 
    /**
21667 
     * Aborts cursor animation and clears all timeouts
21668 
     */
21669 
    abortCursorAnimation: function() {
21670 
      this._currentTickState && this._currentTickState.abort();
21671 
      this._currentTickCompleteState && this._currentTickCompleteState.abort();
21672 
 
21673 
      clearTimeout(this._cursorTimeout1);
21674 
      clearTimeout(this._cursorTimeout2);
21675 
 
21676 
      this._currentCursorOpacity = 0;
21677 
      this.canvas && this.canvas.clearContext(this.canvas.contextTop || this.ctx);
21678 
    },
21679 
 
21680 
    /**
21681 
     * Selects entire text
21682 
     */
21683 
    selectAll: function() {
21684 
      this.setSelectionStart(0);
21685 
      this.setSelectionEnd(this.text.length);
21686 
    },
21687 
 
21688 
    /**
21689 
     * Returns selected text
21690 
     * @return {String}
21691 
     */
21692 
    getSelectedText: function() {
21693 
      return this.text.slice(this.selectionStart, this.selectionEnd);
21694 
    },
21695 
 
21696 
    /**
21697 
     * Find new selection index representing start of current word according to current selection index
21698 
     * @param {Number} startFrom Surrent selection index
21699 
     * @return {Number} New selection index
21700 
     */
21701 
    findWordBoundaryLeft: function(startFrom) {
21702 
      var offset = 0, index = startFrom - 1;
21703 
 
21704 
      // remove space before cursor first
21705 
      if (this._reSpace.test(this.text.charAt(index))) {
21706 
        while (this._reSpace.test(this.text.charAt(index))) {
21707 
          offset++;
21708 
          index--;
21709 
        }
21710 
      }
21711 
      while (/\S/.test(this.text.charAt(index)) && index > -1) {
21712 
        offset++;
21713 
        index--;
21714 
      }
21715 
 
21716 
      return startFrom - offset;
21717 
    },
21718 
 
21719 
    /**
21720 
     * Find new selection index representing end of current word according to current selection index
21721 
     * @param {Number} startFrom Current selection index
21722 
     * @return {Number} New selection index
21723 
     */
21724 
    findWordBoundaryRight: function(startFrom) {
21725 
      var offset = 0, index = startFrom;
21726 
 
21727 
      // remove space after cursor first
21728 
      if (this._reSpace.test(this.text.charAt(index))) {
21729 
        while (this._reSpace.test(this.text.charAt(index))) {
21730 
          offset++;
21731 
          index++;
21732 
        }
21733 
      }
21734 
      while (/\S/.test(this.text.charAt(index)) && index < this.text.length) {
21735 
        offset++;
21736 
        index++;
21737 
      }
21738 
 
21739 
      return startFrom + offset;
21740 
    },
21741 
 
21742 
    /**
21743 
     * Find new selection index representing start of current line according to current selection index
21744 
     * @param {Number} startFrom Current selection index
21745 
     * @return {Number} New selection index
21746 
     */
21747 
    findLineBoundaryLeft: function(startFrom) {
21748 
      var offset = 0, index = startFrom - 1;
21749 
 
21750 
      while (!/\n/.test(this.text.charAt(index)) && index > -1) {
21751 
        offset++;
21752 
        index--;
21753 
      }
21754 
 
21755 
      return startFrom - offset;
21756 
    },
21757 
 
21758 
    /**
21759 
     * Find new selection index representing end of current line according to current selection index
21760 
     * @param {Number} startFrom Current selection index
21761 
     * @return {Number} New selection index
21762 
     */
21763 
    findLineBoundaryRight: function(startFrom) {
21764 
      var offset = 0, index = startFrom;
21765 
 
21766 
      while (!/\n/.test(this.text.charAt(index)) && index < this.text.length) {
21767 
        offset++;
21768 
        index++;
21769 
      }
21770 
 
21771 
      return startFrom + offset;
21772 
    },
21773 
 
21774 
    /**
21775 
     * Returns number of newlines in selected text
21776 
     * @return {Number} Number of newlines in selected text
21777 
     */
21778 
    getNumNewLinesInSelectedText: function() {
21779 
      var selectedText = this.getSelectedText(),
21780 
          numNewLines = 0;
21781 
 
21782 
      for (var i = 0, chars = selectedText.split(''), len = chars.length; i < len; i++) {
21783 
        if (chars[i] === '\n') {
21784 
          numNewLines++;
21785 
        }
21786 
      }
21787 
      return numNewLines;
21788 
    },
21789 
 
21790 
    /**
21791 
     * Finds index corresponding to beginning or end of a word
21792 
     * @param {Number} selectionStart Index of a character
21793 
     * @param {Number} direction: 1 or -1
21794 
     * @return {Number} Index of the beginning or end of a word
21795 
     */
21796 
    searchWordBoundary: function(selectionStart, direction) {
21797 
      var index = this._reSpace.test(this.text.charAt(selectionStart)) ? selectionStart - 1 : selectionStart,
21798 
          _char = this.text.charAt(index),
21799 
          reNonWord = /[ \n\.,;!\?\-]/;
21800 
 
21801 
      while (!reNonWord.test(_char) && index > 0 && index < this.text.length) {
21802 
        index += direction;
21803 
        _char = this.text.charAt(index);
21804 
      }
21805 
      if (reNonWord.test(_char) && _char !== '\n') {
21806 
        index += direction === 1 ? 0 : 1;
21807 
      }
21808 
      return index;
21809 
    },
21810 
 
21811 
    /**
21812 
     * Selects a word based on the index
21813 
     * @param {Number} selectionStart Index of a character
21814 
     */
21815 
    selectWord: function(selectionStart) {
21816 
      var newSelectionStart = this.searchWordBoundary(selectionStart, -1), /* search backwards */
21817 
          newSelectionEnd = this.searchWordBoundary(selectionStart, 1); /* search forward */
21818 
 
21819 
      this.setSelectionStart(newSelectionStart);
21820 
      this.setSelectionEnd(newSelectionEnd);
21821 
    },
21822 
 
21823 
    /**
21824 
     * Selects a line based on the index
21825 
     * @param {Number} selectionStart Index of a character
21826 
     */
21827 
    selectLine: function(selectionStart) {
21828 
      var newSelectionStart = this.findLineBoundaryLeft(selectionStart),
21829 
          newSelectionEnd = this.findLineBoundaryRight(selectionStart);
21830 
 
21831 
      this.setSelectionStart(newSelectionStart);
21832 
      this.setSelectionEnd(newSelectionEnd);
21833 
    },
21834 
 
21835 
    /**
21836 
     * Enters editing state
21837 
     * @return {fabric.IText} thisArg
21838 
     * @chainable
21839 
     */
21840 
    enterEditing: function() {
21841 
      if (this.isEditing || !this.editable) {
21842 
        return;
21843 
      }
21844 
 
21845 
      if (this.canvas) {
21846 
        this.exitEditingOnOthers(this.canvas);
21847 
      }
21848 
 
21849 
      this.isEditing = true;
21850 
 
21851 
      this.initHiddenTextarea();
21852 
      this.hiddenTextarea.focus();
21853 
      this._updateTextarea();
21854 
      this._saveEditingProps();
21855 
      this._setEditingProps();
21856 
 
21857 
      this._tick();
21858 
      this.fire('editing:entered');
21859 
 
21860 
      if (!this.canvas) {
21861 
        return this;
21862 
      }
21863 
 
21864 
      this.canvas.renderAll();
21865 
      this.canvas.fire('text:editing:entered', { target: this });
21866 
      this.initMouseMoveHandler();
21867 
      return this;
21868 
    },
21869 
 
21870 
    exitEditingOnOthers: function(canvas) {
21871 
      if (canvas._iTextInstances) {
21872 
        canvas._iTextInstances.forEach(function(obj) {
21873 
          obj.selected = false;
21874 
          if (obj.isEditing) {
21875 
            obj.exitEditing();
21876 
          }
21877 
        });
21878 
      }
21879 
    },
21880 
 
21881 
    /**
21882 
    * Initializes "mousemove" event handler
21883 
    */
21884 
    initMouseMoveHandler: function() {
21885 
      var _this = this;
21886 
      this.canvas.on('mouse:move',  function(options) {
21887 
        if (!_this.__isMousedown || !_this.isEditing) {
21888 
          return;
21889 
        }
21890 
 
21891 
        var newSelectionStart = _this.getSelectionStartFromPointer(options.e);
21892 
        if (newSelectionStart >= _this.__selectionStartOnMouseDown) {
21893 
          _this.setSelectionStart(_this.__selectionStartOnMouseDown);
21894 
          _this.setSelectionEnd(newSelectionStart);
21895 
        }
21896 
        else {
21897 
          _this.setSelectionStart(newSelectionStart);
21898 
          _this.setSelectionEnd(_this.__selectionStartOnMouseDown);
21899 
        }
21900 
      });
21901 
    },
21902 
 
21903 
    /**
21904 
     * @private
21905 
     */
21906 
    _setEditingProps: function() {
21907 
      this.hoverCursor = 'text';
21908 
 
21909 
      if (this.canvas) {
21910 
        this.canvas.defaultCursor = this.canvas.moveCursor = 'text';
21911 
      }
21912 
 
21913 
      this.borderColor = this.editingBorderColor;
21914 
 
21915 
      this.hasControls = this.selectable = false;
21916 
      this.lockMovementX = this.lockMovementY = true;
21917 
    },
21918 
 
21919 
    /**
21920 
     * @private
21921 
     */
21922 
    _updateTextarea: function() {
21923 
      if (!this.hiddenTextarea) {
21924 
        return;
21925 
      }
21926 
 
21927 
      this.hiddenTextarea.value = this.text;
21928 
      this.hiddenTextarea.selectionStart = this.selectionStart;
21929 
      this.hiddenTextarea.selectionEnd = this.selectionEnd;
21930 
    },
21931 
 
21932 
    /**
21933 
     * @private
21934 
     */
21935 
    _saveEditingProps: function() {
21936 
      this._savedProps = {
21937 
        hasControls: this.hasControls,
21938 
        borderColor: this.borderColor,
21939 
        lockMovementX: this.lockMovementX,
21940 
        lockMovementY: this.lockMovementY,
21941 
        hoverCursor: this.hoverCursor,
21942 
        defaultCursor: this.canvas && this.canvas.defaultCursor,
21943 
        moveCursor: this.canvas && this.canvas.moveCursor
21944 
      };
21945 
    },
21946 
 
21947 
    /**
21948 
     * @private
21949 
     */
21950 
    _restoreEditingProps: function() {
21951 
      if (!this._savedProps) {
21952 
        return;
21953 
      }
21954 
 
21955 
      this.hoverCursor = this._savedProps.overCursor;
21956 
      this.hasControls = this._savedProps.hasControls;
21957 
      this.borderColor = this._savedProps.borderColor;
21958 
      this.lockMovementX = this._savedProps.lockMovementX;
21959 
      this.lockMovementY = this._savedProps.lockMovementY;
21960 
 
21961 
      if (this.canvas) {
21962 
        this.canvas.defaultCursor = this._savedProps.defaultCursor;
21963 
        this.canvas.moveCursor = this._savedProps.moveCursor;
21964 
      }
21965 
    },
21966 
 
21967 
    /**
21968 
     * Exits from editing state
21969 
     * @return {fabric.IText} thisArg
21970 
     * @chainable
21971 
     */
21972 
    exitEditing: function() {
21973 
 
21974 
      this.selected = false;
21975 
      this.isEditing = false;
21976 
      this.selectable = true;
21977 
 
21978 
      this.selectionEnd = this.selectionStart;
21979 
      this.hiddenTextarea && this.canvas && this.hiddenTextarea.parentNode.removeChild(this.hiddenTextarea);
21980 
      this.hiddenTextarea = null;
21981 
 
21982 
      this.abortCursorAnimation();
21983 
      this._restoreEditingProps();
21984 
      this._currentCursorOpacity = 0;
21985 
 
21986 
      this.fire('editing:exited');
21987 
      this.canvas && this.canvas.fire('text:editing:exited', { target: this });
21988 
 
21989 
      return this;
21990 
    },
21991 
 
21992 
    /**
21993 
     * @private
21994 
     */
21995 
    _removeExtraneousStyles: function() {
21996 
      for (var prop in this.styles) {
21997 
        if (!this._textLines[prop]) {
21998 
          delete this.styles[prop];
21999 
        }
22000 
      }
22001 
    },
22002 
 
22003 
    /**
22004 
     * @private
22005 
     */
22006 
    _removeCharsFromTo: function(start, end) {
22007 
 
22008 
      var i = end;
22009 
      while (i !== start) {
22010 
 
22011 
        var prevIndex = this.get2DCursorLocation(i).charIndex;
22012 
        i--;
22013 
 
22014 
        var index = this.get2DCursorLocation(i).charIndex,
22015 
            isNewline = index > prevIndex;
22016 
 
22017 
        if (isNewline) {
22018 
          this.removeStyleObject(isNewline, i + 1);
22019 
        }
22020 
        else {
22021 
          this.removeStyleObject(this.get2DCursorLocation(i).charIndex === 0, i);
22022 
        }
22023 
 
22024 
      }
22025 
 
22026 
      this.text = this.text.slice(0, start) +
22027 
                  this.text.slice(end);
22028 
      this._clearCache();
22029 
    },
22030 
 
22031 
    /**
22032 
     * Inserts a character where cursor is (replacing selection if one exists)
22033 
     * @param {String} _chars Characters to insert
22034 
     */
22035 
    insertChars: function(_chars, useCopiedStyle) {
22036 
      var isEndOfLine = this.text.slice(this.selectionStart, this.selectionStart + 1) === '\n';
22037 
 
22038 
      this.text = this.text.slice(0, this.selectionStart) +
22039 
                    _chars +
22040 
                  this.text.slice(this.selectionEnd);
22041 
 
22042 
      if (this.selectionStart === this.selectionEnd) {
22043 
        this.insertStyleObjects(_chars, isEndOfLine, useCopiedStyle);
22044 
      }
22045 
      // else if (this.selectionEnd - this.selectionStart > 1) {
22046 
      // TODO: replace styles properly
22047 
      // console.log('replacing MORE than 1 char');
22048 
      // }
22049 
      this.setSelectionStart(this.selectionStart + _chars.length);
22050 
      this.setSelectionEnd(this.selectionStart);
22051 
      this._clearCache();
22052 
      this.canvas && this.canvas.renderAll();
22053 
 
22054 
      this.setCoords();
22055 
      this.fire('changed');
22056 
      this.canvas && this.canvas.fire('text:changed', { target: this });
22057 
    },
22058 
 
22059 
    /**
22060 
     * Inserts new style object
22061 
     * @param {Number} lineIndex Index of a line
22062 
     * @param {Number} charIndex Index of a char
22063 
     * @param {Boolean} isEndOfLine True if it's end of line
22064 
     */
22065 
    insertNewlineStyleObject: function(lineIndex, charIndex, isEndOfLine) {
22066 
 
22067 
      this.shiftLineStyles(lineIndex, +1);
22068 
 
22069 
      if (!this.styles[lineIndex + 1]) {
22070 
        this.styles[lineIndex + 1] = { };
22071 
      }
22072 
 
22073 
      var currentCharStyle = this.styles[lineIndex][charIndex - 1],
22074 
          newLineStyles = { };
22075 
 
22076 
      // if there's nothing after cursor,
22077 
      // we clone current char style onto the next (otherwise empty) line
22078 
      if (isEndOfLine) {
22079 
        newLineStyles[0] = clone(currentCharStyle);
22080 
        this.styles[lineIndex + 1] = newLineStyles;
22081 
      }
22082 
      // otherwise we clone styles of all chars
22083 
      // after cursor onto the next line, from the beginning
22084 
      else {
22085 
        for (var index in this.styles[lineIndex]) {
22086 
          if (parseInt(index, 10) >= charIndex) {
22087 
            newLineStyles[parseInt(index, 10) - charIndex] = this.styles[lineIndex][index];
22088 
            // remove lines from the previous line since they're on a new line now
22089 
            delete this.styles[lineIndex][index];
22090 
          }
22091 
        }
22092 
        this.styles[lineIndex + 1] = newLineStyles;
22093 
      }
22094 
      this._clearCache();
22095 
    },
22096 
 
22097 
    /**
22098 
     * Inserts style object for a given line/char index
22099 
     * @param {Number} lineIndex Index of a line
22100 
     * @param {Number} charIndex Index of a char
22101 
     * @param {Object} [style] Style object to insert, if given
22102 
     */
22103 
    insertCharStyleObject: function(lineIndex, charIndex, style) {
22104 
 
22105 
      var currentLineStyles = this.styles[lineIndex],
22106 
          currentLineStylesCloned = clone(currentLineStyles);
22107 
 
22108 
      if (charIndex === 0 && !style) {
22109 
        charIndex = 1;
22110 
      }
22111 
 
22112 
      // shift all char styles by 1 forward
22113 
      // 0,1,2,3 -> (charIndex=2) -> 0,1,3,4 -> (insert 2) -> 0,1,2,3,4
22114 
      for (var index in currentLineStylesCloned) {
22115 
        var numericIndex = parseInt(index, 10);
22116 
        if (numericIndex >= charIndex) {
22117 
          currentLineStyles[numericIndex + 1] = currentLineStylesCloned[numericIndex];
22118 
          //delete currentLineStyles[index];
22119 
        }
22120 
      }
22121 
 
22122 
      this.styles[lineIndex][charIndex] =
22123 
        style || clone(currentLineStyles[charIndex - 1]);
22124 
      this._clearCache();
22125 
    },
22126 
 
22127 
    /**
22128 
     * Inserts style object(s)
22129 
     * @param {String} _chars Characters at the location where style is inserted
22130 
     * @param {Boolean} isEndOfLine True if it's end of line
22131 
     * @param {Boolean} [useCopiedStyle] Style to insert
22132 
     */
22133 
    insertStyleObjects: function(_chars, isEndOfLine, useCopiedStyle) {
22134 
      // removed shortcircuit over isEmptyStyles
22135 
 
22136 
      var cursorLocation = this.get2DCursorLocation(),
22137 
          lineIndex = cursorLocation.lineIndex,
22138 
          charIndex = cursorLocation.charIndex;
22139 
 
22140 
      if (!this.styles[lineIndex]) {
22141 
        this.styles[lineIndex] = { };
22142 
      }
22143 
 
22144 
      if (_chars === '\n') {
22145 
        this.insertNewlineStyleObject(lineIndex, charIndex, isEndOfLine);
22146 
      }
22147 
      else {
22148 
        if (useCopiedStyle) {
22149 
          this._insertStyles(this.copiedStyles);
22150 
        }
22151 
        else {
22152 
          // TODO: support multiple style insertion if _chars.length > 1
22153 
          this.insertCharStyleObject(lineIndex, charIndex);
22154 
        }
22155 
      }
22156 
    },
22157 
 
22158 
    /**
22159 
     * @private
22160 
     */
22161 
    _insertStyles: function(styles) {
22162 
      for (var i = 0, len = styles.length; i < len; i++) {
22163 
 
22164 
        var cursorLocation = this.get2DCursorLocation(this.selectionStart + i),
22165 
            lineIndex = cursorLocation.lineIndex,
22166 
            charIndex = cursorLocation.charIndex;
22167 
 
22168 
        this.insertCharStyleObject(lineIndex, charIndex, styles[i]);
22169 
      }
22170 
    },
22171 
 
22172 
    /**
22173 
     * Shifts line styles up or down
22174 
     * @param {Number} lineIndex Index of a line
22175 
     * @param {Number} offset Can be -1 or +1
22176 
     */
22177 
    shiftLineStyles: function(lineIndex, offset) {
22178 
      // shift all line styles by 1 upward
22179 
      var clonedStyles = clone(this.styles);
22180 
      for (var line in this.styles) {
22181 
        var numericLine = parseInt(line, 10);
22182 
        if (numericLine > lineIndex) {
22183 
          this.styles[numericLine + offset] = clonedStyles[numericLine];
22184 
        }
22185 
      }
22186 
    },
22187 
 
22188 
    /**
22189 
     * Removes style object
22190 
     * @param {Boolean} isBeginningOfLine True if cursor is at the beginning of line
22191 
     * @param {Number} [index] Optional index. When not given, current selectionStart is used.
22192 
     */
22193 
    removeStyleObject: function(isBeginningOfLine, index) {
22194 
 
22195 
      var cursorLocation = this.get2DCursorLocation(index),
22196 
          lineIndex = cursorLocation.lineIndex,
22197 
          charIndex = cursorLocation.charIndex;
22198 
 
22199 
      if (isBeginningOfLine) {
22200 
 
22201 
        var textOnPreviousLine = this._textLines[lineIndex - 1],
22202 
            newCharIndexOnPrevLine = textOnPreviousLine
22203 
              ? textOnPreviousLine.length
22204 
              : 0;
22205 
 
22206 
        if (!this.styles[lineIndex - 1]) {
22207 
          this.styles[lineIndex - 1] = { };
22208 
        }
22209 
 
22210 
        for (charIndex in this.styles[lineIndex]) {
22211 
          this.styles[lineIndex - 1][parseInt(charIndex, 10) + newCharIndexOnPrevLine]
22212 
            = this.styles[lineIndex][charIndex];
22213 
        }
22214 
 
22215 
        this.shiftLineStyles(lineIndex, -1);
22216 
      }
22217 
      else {
22218 
        var currentLineStyles = this.styles[lineIndex];
22219 
 
22220 
        if (currentLineStyles) {
22221 
          var offset = this.selectionStart === this.selectionEnd ? -1 : 0;
22222 
          delete currentLineStyles[charIndex + offset];
22223 
          // console.log('deleting', lineIndex, charIndex + offset);
22224 
        }
22225 
 
22226 
        var currentLineStylesCloned = clone(currentLineStyles);
22227 
 
22228 
        // shift all styles by 1 backwards
22229 
        for (var i in currentLineStylesCloned) {
22230 
          var numericIndex = parseInt(i, 10);
22231 
          if (numericIndex >= charIndex && numericIndex !== 0) {
22232 
            currentLineStyles[numericIndex - 1] = currentLineStylesCloned[numericIndex];
22233 
            delete currentLineStyles[numericIndex];
22234 
          }
22235 
        }
22236 
      }
22237 
    },
22238 
 
22239 
    /**
22240 
     * Inserts new line
22241 
     */
22242 
    insertNewline: function() {
22243 
      this.insertChars('\n');
22244 
    }
22245 
  });
22246 
})();
22247 
 
22248 
 
22249 
fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ {
22250 
  /**
22251 
   * Initializes "dbclick" event handler
22252 
   */
22253 
  initDoubleClickSimulation: function() {
22254 
 
22255 
    // for double click
22256 
    this.__lastClickTime = +new Date();
22257 
 
22258 
    // for triple click
22259 
    this.__lastLastClickTime = +new Date();
22260 
 
22261 
    this.__lastPointer = { };
22262 
 
22263 
    this.on('mousedown', this.onMouseDown.bind(this));
22264 
  },
22265 
 
22266 
  onMouseDown: function(options) {
22267 
 
22268 
    this.__newClickTime = +new Date();
22269 
    var newPointer = this.canvas.getPointer(options.e);
22270 
 
22271 
    if (this.isTripleClick(newPointer)) {
22272 
      this.fire('tripleclick', options);
22273 
      this._stopEvent(options.e);
22274 
    }
22275 
    else if (this.isDoubleClick(newPointer)) {
22276 
      this.fire('dblclick', options);
22277 
      this._stopEvent(options.e);
22278 
    }
22279 
 
22280 
    this.__lastLastClickTime = this.__lastClickTime;
22281 
    this.__lastClickTime = this.__newClickTime;
22282 
    this.__lastPointer = newPointer;
22283 
    this.__lastIsEditing = this.isEditing;
22284 
    this.__lastSelected = this.selected;
22285 
  },
22286 
 
22287 
  isDoubleClick: function(newPointer) {
22288 
    return this.__newClickTime - this.__lastClickTime < 500 &&
22289 
        this.__lastPointer.x === newPointer.x &&
22290 
        this.__lastPointer.y === newPointer.y && this.__lastIsEditing;
22291 
  },
22292 
 
22293 
  isTripleClick: function(newPointer) {
22294 
    return this.__newClickTime - this.__lastClickTime < 500 &&
22295 
        this.__lastClickTime - this.__lastLastClickTime < 500 &&
22296 
        this.__lastPointer.x === newPointer.x &&
22297 
        this.__lastPointer.y === newPointer.y;
22298 
  },
22299 
 
22300 
  /**
22301 
   * @private
22302 
   */
22303 
  _stopEvent: function(e) {
22304 
    e.preventDefault && e.preventDefault();
22305 
    e.stopPropagation && e.stopPropagation();
22306 
  },
22307 
 
22308 
  /**
22309 
   * Initializes event handlers related to cursor or selection
22310 
   */
22311 
  initCursorSelectionHandlers: function() {
22312 
    this.initSelectedHandler();
22313 
    this.initMousedownHandler();
22314 
    this.initMouseupHandler();
22315 
    this.initClicks();
22316 
  },
22317 
 
22318 
  /**
22319 
   * Initializes double and triple click event handlers
22320 
   */
22321 
  initClicks: function() {
22322 
    this.on('dblclick', function(options) {
22323 
      this.selectWord(this.getSelectionStartFromPointer(options.e));
22324 
    });
22325 
    this.on('tripleclick', function(options) {
22326 
      this.selectLine(this.getSelectionStartFromPointer(options.e));
22327 
    });
22328 
  },
22329 
 
22330 
  /**
22331 
   * Initializes "mousedown" event handler
22332 
   */
22333 
  initMousedownHandler: function() {
22334 
    this.on('mousedown', function(options) {
22335 
 
22336 
      var pointer = this.canvas.getPointer(options.e);
22337 
 
22338 
      this.__mousedownX = pointer.x;
22339 
      this.__mousedownY = pointer.y;
22340 
      this.__isMousedown = true;
22341 
 
22342 
      if (this.hiddenTextarea && this.canvas) {
22343 
        this.canvas.wrapperEl.appendChild(this.hiddenTextarea);
22344 
      }
22345 
 
22346 
      if (this.selected) {
22347 
        this.setCursorByClick(options.e);
22348 
      }
22349 
 
22350 
      if (this.isEditing) {
22351 
        this.__selectionStartOnMouseDown = this.selectionStart;
22352 
        this.initDelayedCursor(true);
22353 
      }
22354 
    });
22355 
  },
22356 
 
22357 
  /**
22358 
   * @private
22359 
   */
22360 
  _isObjectMoved: function(e) {
22361 
    var pointer = this.canvas.getPointer(e);
22362 
 
22363 
    return this.__mousedownX !== pointer.x ||
22364 
           this.__mousedownY !== pointer.y;
22365 
  },
22366 
 
22367 
  /**
22368 
   * Initializes "mouseup" event handler
22369 
   */
22370 
  initMouseupHandler: function() {
22371 
    this.on('mouseup', function(options) {
22372 
      this.__isMousedown = false;
22373 
      if (this._isObjectMoved(options.e)) {
22374 
        return;
22375 
      }
22376 
 
22377 
      if (this.__lastSelected) {
22378 
        this.enterEditing();
22379 
        this.initDelayedCursor(true);
22380 
      }
22381 
      this.selected = true;
22382 
    });
22383 
  },
22384 
 
22385 
  /**
22386 
   * Changes cursor location in a text depending on passed pointer (x/y) object
22387 
   * @param {Event} e Event object
22388 
   */
22389 
  setCursorByClick: function(e) {
22390 
    var newSelectionStart = this.getSelectionStartFromPointer(e);
22391 
 
22392 
    if (e.shiftKey) {
22393 
      if (newSelectionStart < this.selectionStart) {
22394 
        this.setSelectionEnd(this.selectionStart);
22395 
        this.setSelectionStart(newSelectionStart);
22396 
      }
22397 
      else {
22398 
        this.setSelectionEnd(newSelectionStart);
22399 
      }
22400 
    }
22401 
    else {
22402 
      this.setSelectionStart(newSelectionStart);
22403 
      this.setSelectionEnd(newSelectionStart);
22404 
    }
22405 
  },
22406 
 
22407 
  /**
22408 
   * @private
22409 
   * @param {Event} e Event object
22410 
   * @return {Object} Coordinates of a pointer (x, y)
22411 
   */
22412 
  _getLocalRotatedPointer: function(e) {
22413 
    var pointer = this.canvas.getPointer(e),
22414 
 
22415 
        pClicked = new fabric.Point(pointer.x, pointer.y),
22416 
        pLeftTop = new fabric.Point(this.left, this.top),
22417 
 
22418 
        rotated = fabric.util.rotatePoint(
22419 
          pClicked, pLeftTop, fabric.util.degreesToRadians(-this.angle));
22420 
 
22421 
    return this.getLocalPointer(e, rotated);
22422 
  },
22423 
 
22424 
  /**
22425 
   * Returns index of a character corresponding to where an object was clicked
22426 
   * @param {Event} e Event object
22427 
   * @return {Number} Index of a character
22428 
   */
22429 
  getSelectionStartFromPointer: function(e) {
22430 
    var mouseOffset = this._getLocalRotatedPointer(e),
22431 
        prevWidth = 0,
22432 
        width = 0,
22433 
        height = 0,
22434 
        charIndex = 0,
22435 
        newSelectionStart,
22436 
        line;
22437 
 
22438 
    for (var i = 0, len = this._textLines.length; i < len; i++) {
22439 
      line = this._textLines[i].split('');
22440 
      height += this._getHeightOfLine(this.ctx, i) * this.scaleY;
22441 
 
22442 
      var widthOfLine = this._getLineWidth(this.ctx, i),
22443 
          lineLeftOffset = this._getLineLeftOffset(widthOfLine);
22444 
 
22445 
      width = lineLeftOffset * this.scaleX;
22446 
 
22447 
      if (this.flipX) {
22448 
        // when oject is horizontally flipped we reverse chars
22449 
        this._textLines[i] = line.reverse().join('');
22450 
      }
22451 
 
22452 
      for (var j = 0, jlen = line.length; j < jlen; j++) {
22453 
 
22454 
        var _char = line[j];
22455 
        prevWidth = width;
22456 
 
22457 
        width += this._getWidthOfChar(this.ctx, _char, i, this.flipX ? jlen - j : j) *
22458 
                 this.scaleX;
22459 
 
22460 
        if (height <= mouseOffset.y || width <= mouseOffset.x) {
22461 
          charIndex++;
22462 
          continue;
22463 
        }
22464 
 
22465 
        return this._getNewSelectionStartFromOffset(
22466 
          mouseOffset, prevWidth, width, charIndex + i, jlen);
22467 
      }
22468 
 
22469 
      if (mouseOffset.y < height) {
22470 
        return this._getNewSelectionStartFromOffset(
22471 
          mouseOffset, prevWidth, width, charIndex + i, jlen);
22472 
      }
22473 
    }
22474 
 
22475 
    // clicked somewhere after all chars, so set at the end
22476 
    if (typeof newSelectionStart === 'undefined') {
22477 
      return this.text.length;
22478 
    }
22479 
  },
22480 
 
22481 
  /**
22482 
   * @private
22483 
   */
22484 
  _getNewSelectionStartFromOffset: function(mouseOffset, prevWidth, width, index, jlen) {
22485 
 
22486 
    var distanceBtwLastCharAndCursor = mouseOffset.x - prevWidth,
22487 
        distanceBtwNextCharAndCursor = width - mouseOffset.x,
22488 
        offset = distanceBtwNextCharAndCursor > distanceBtwLastCharAndCursor ? 0 : 1,
22489 
        newSelectionStart = index + offset;
22490 
 
22491 
    // if object is horizontally flipped, mirror cursor location from the end
22492 
    if (this.flipX) {
22493 
      newSelectionStart = jlen - newSelectionStart;
22494 
    }
22495 
 
22496 
    if (newSelectionStart > this.text.length) {
22497 
      newSelectionStart = this.text.length;
22498 
    }
22499 
 
22500 
    return newSelectionStart;
22501 
  }
22502 
});
22503 
 
22504 
 
22505 
fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ {
22506 
 
22507 
  /**
22508 
   * Initializes hidden textarea (needed to bring up keyboard in iOS)
22509 
   */
22510 
  initHiddenTextarea: function() {
22511 
    this.hiddenTextarea = fabric.document.createElement('textarea');
22512 
 
22513 
    this.hiddenTextarea.setAttribute('autocapitalize', 'off');
22514 
    this.hiddenTextarea.style.cssText = 'position: fixed; bottom: 20px; left: 0px; opacity: 0;'
22515 
                                        + ' width: 0px; height: 0px; z-index: -999;';
22516 
    fabric.document.body.appendChild(this.hiddenTextarea);
22517 
 
22518 
    fabric.util.addListener(this.hiddenTextarea, 'keydown', this.onKeyDown.bind(this));
22519 
    fabric.util.addListener(this.hiddenTextarea, 'keypress', this.onKeyPress.bind(this));
22520 
    fabric.util.addListener(this.hiddenTextarea, 'copy', this.copy.bind(this));
22521 
    fabric.util.addListener(this.hiddenTextarea, 'paste', this.paste.bind(this));
22522 
 
22523 
    if (!this._clickHandlerInitialized && this.canvas) {
22524 
      fabric.util.addListener(this.canvas.upperCanvasEl, 'click', this.onClick.bind(this));
22525 
      this._clickHandlerInitialized = true;
22526 
    }
22527 
  },
22528 
 
22529 
  /**
22530 
   * @private
22531 
   */
22532 
  _keysMap: {
22533 
    8:  'removeChars',
22534 
    9:  'exitEditing',
22535 
    27: 'exitEditing',
22536 
    13: 'insertNewline',
22537 
    33: 'moveCursorUp',
22538 
    34: 'moveCursorDown',
22539 
    35: 'moveCursorRight',
22540 
    36: 'moveCursorLeft',
22541 
    37: 'moveCursorLeft',
22542 
    38: 'moveCursorUp',
22543 
    39: 'moveCursorRight',
22544 
    40: 'moveCursorDown',
22545 
    46: 'forwardDelete'
22546 
  },
22547 
 
22548 
  /**
22549 
   * @private
22550 
   */
22551 
  _ctrlKeysMap: {
22552 
    65: 'selectAll',
22553 
    88: 'cut'
22554 
  },
22555 
 
22556 
  onClick: function() {
22557 
    // No need to trigger click event here, focus is enough to have the keyboard appear on Android
22558 
    this.hiddenTextarea && this.hiddenTextarea.focus();
22559 
  },
22560 
 
22561 
  /**
22562 
   * Handles keyup event
22563 
   * @param {Event} e Event object
22564 
   */
22565 
  onKeyDown: function(e) {
22566 
    if (!this.isEditing) {
22567 
      return;
22568 
    }
22569 
    if (e.keyCode in this._keysMap) {
22570 
      this[this._keysMap[e.keyCode]](e);
22571 
    }
22572 
    else if ((e.keyCode in this._ctrlKeysMap) && (e.ctrlKey || e.metaKey)) {
22573 
      this[this._ctrlKeysMap[e.keyCode]](e);
22574 
    }
22575 
    else {
22576 
      return;
22577 
    }
22578 
    e.stopImmediatePropagation();
22579 
    e.preventDefault();
22580 
    this.canvas && this.canvas.renderAll();
22581 
  },
22582 
 
22583 
  /**
22584 
   * Forward delete
22585 
   */
22586 
  forwardDelete: function(e) {
22587 
    if (this.selectionStart === this.selectionEnd) {
22588 
      this.moveCursorRight(e);
22589 
    }
22590 
    this.removeChars(e);
22591 
  },
22592 
 
22593 
  /**
22594 
   * Copies selected text
22595 
   * @param {Event} e Event object
22596 
   */
22597 
  copy: function(e) {
22598 
    var selectedText = this.getSelectedText(),
22599 
        clipboardData = this._getClipboardData(e);
22600 
 
22601 
    // Check for backward compatibility with old browsers
22602 
    if (clipboardData) {
22603 
      clipboardData.setData('text', selectedText);
22604 
    }
22605 
 
22606 
    this.copiedText = selectedText;
22607 
    this.copiedStyles = this.getSelectionStyles(
22608 
                          this.selectionStart,
22609 
                          this.selectionEnd);
22610 
  },
22611 
 
22612 
  /**
22613 
   * Pastes text
22614 
   * @param {Event} e Event object
22615 
   */
22616 
  paste: function(e) {
22617 
    var copiedText = null,
22618 
        clipboardData = this._getClipboardData(e);
22619 
 
22620 
    // Check for backward compatibility with old browsers
22621 
    if (clipboardData) {
22622 
      copiedText = clipboardData.getData('text');
22623 
    }
22624 
    else {
22625 
      copiedText = this.copiedText;
22626 
    }
22627 
 
22628 
    if (copiedText) {
22629 
      this.insertChars(copiedText, true);
22630 
    }
22631 
  },
22632 
 
22633 
  /**
22634 
   * Cuts text
22635 
   * @param {Event} e Event object
22636 
   */
22637 
  cut: function(e) {
22638 
    if (this.selectionStart === this.selectionEnd) {
22639 
      return;
22640 
    }
22641 
 
22642 
    this.copy();
22643 
    this.removeChars(e);
22644 
  },
22645 
 
22646 
  /**
22647 
   * @private
22648 
   * @param {Event} e Event object
22649 
   * @return {Object} Clipboard data object
22650 
   */
22651 
  _getClipboardData: function(e) {
22652 
    return e && (e.clipboardData || fabric.window.clipboardData);
22653 
  },
22654 
 
22655 
  /**
22656 
   * Handles keypress event
22657 
   * @param {Event} e Event object
22658 
   */
22659 
  onKeyPress: function(e) {
22660 
    if (!this.isEditing || e.metaKey || e.ctrlKey) {
22661 
      return;
22662 
    }
22663 
    if (e.which !== 0) {
22664 
      this.insertChars(String.fromCharCode(e.which));
22665 
    }
22666 
    e.stopPropagation();
22667 
  },
22668 
 
22669 
  /**
22670 
   * Gets start offset of a selection
22671 
   * @param {Event} e Event object
22672 
   * @param {Boolean} isRight
22673 
   * @return {Number}
22674 
   */
22675 
  getDownCursorOffset: function(e, isRight) {
22676 
    var selectionProp = isRight ? this.selectionEnd : this.selectionStart,
22677 
        _char, lineLeftOffset,
22678 
        textBeforeCursor = this.text.slice(0, selectionProp),
22679 
        textAfterCursor = this.text.slice(selectionProp),
22680 
 
22681 
        textOnSameLineBeforeCursor = textBeforeCursor.slice(textBeforeCursor.lastIndexOf('\n') + 1),
22682 
        textOnSameLineAfterCursor = textAfterCursor.match(/(.*)\n?/)[1],
22683 
        textOnNextLine = (textAfterCursor.match(/.*\n(.*)\n?/) || { })[1] || '',
22684 
 
22685 
        cursorLocation = this.get2DCursorLocation(selectionProp);
22686 
 
22687 
    // if on last line, down cursor goes to end of line
22688 
    if (cursorLocation.lineIndex === this._textLines.length - 1 || e.metaKey || e.keyCode === 34) {
22689 
 
22690 
      // move to the end of a text
22691 
      return this.text.length - selectionProp;
22692 
    }
22693 
 
22694 
    var widthOfSameLineBeforeCursor = this._getLineWidth(this.ctx, cursorLocation.lineIndex);
22695 
    lineLeftOffset = this._getLineLeftOffset(widthOfSameLineBeforeCursor);
22696 
 
22697 
    var widthOfCharsOnSameLineBeforeCursor = lineLeftOffset,
22698 
        lineIndex = cursorLocation.lineIndex;
22699 
 
22700 
    for (var i = 0, len = textOnSameLineBeforeCursor.length; i < len; i++) {
22701 
      _char = textOnSameLineBeforeCursor[i];
22702 
      widthOfCharsOnSameLineBeforeCursor += this._getWidthOfChar(this.ctx, _char, lineIndex, i);
22703 
    }
22704 
 
22705 
    var indexOnNextLine = this._getIndexOnNextLine(
22706 
      cursorLocation, textOnNextLine, widthOfCharsOnSameLineBeforeCursor);
22707 
 
22708 
    return textOnSameLineAfterCursor.length + 1 + indexOnNextLine;
22709 
  },
22710 
 
22711 
  /**
22712 
   * @private
22713 
   */
22714 
  _getIndexOnNextLine: function(cursorLocation, textOnNextLine, widthOfCharsOnSameLineBeforeCursor) {
22715 
    var lineIndex = cursorLocation.lineIndex + 1,
22716 
        widthOfNextLine = this._getLineWidth(this.ctx, lineIndex),
22717 
        lineLeftOffset = this._getLineLeftOffset(widthOfNextLine),
22718 
        widthOfCharsOnNextLine = lineLeftOffset,
22719 
        indexOnNextLine = 0,
22720 
        foundMatch;
22721 
 
22722 
    for (var j = 0, jlen = textOnNextLine.length; j < jlen; j++) {
22723 
 
22724 
      var _char = textOnNextLine[j],
22725 
          widthOfChar = this._getWidthOfChar(this.ctx, _char, lineIndex, j);
22726 
 
22727 
      widthOfCharsOnNextLine += widthOfChar;
22728 
 
22729 
      if (widthOfCharsOnNextLine > widthOfCharsOnSameLineBeforeCursor) {
22730 
 
22731 
        foundMatch = true;
22732 
 
22733 
        var leftEdge = widthOfCharsOnNextLine - widthOfChar,
22734 
            rightEdge = widthOfCharsOnNextLine,
22735 
            offsetFromLeftEdge = Math.abs(leftEdge - widthOfCharsOnSameLineBeforeCursor),
22736 
            offsetFromRightEdge = Math.abs(rightEdge - widthOfCharsOnSameLineBeforeCursor);
22737 
 
22738 
        indexOnNextLine = offsetFromRightEdge < offsetFromLeftEdge ? j + 1 : j;
22739 
 
22740 
        break;
22741 
      }
22742 
    }
22743 
 
22744 
    // reached end
22745 
    if (!foundMatch) {
22746 
      indexOnNextLine = textOnNextLine.length;
22747 
    }
22748 
 
22749 
    return indexOnNextLine;
22750 
  },
22751 
 
22752 
  /**
22753 
   * Moves cursor down
22754 
   * @param {Event} e Event object
22755 
   */
22756 
  moveCursorDown: function(e) {
22757 
    this.abortCursorAnimation();
22758 
    this._currentCursorOpacity = 1;
22759 
 
22760 
    var offset = this.getDownCursorOffset(e, this._selectionDirection === 'right');
22761 
 
22762 
    if (e.shiftKey) {
22763 
      this.moveCursorDownWithShift(offset);
22764 
    }
22765 
    else {
22766 
      this.moveCursorDownWithoutShift(offset);
22767 
    }
22768 
 
22769 
    this.initDelayedCursor();
22770 
  },
22771 
 
22772 
  /**
22773 
   * Moves cursor down without keeping selection
22774 
   * @param {Number} offset
22775 
   */
22776 
  moveCursorDownWithoutShift: function(offset) {
22777 
    this._selectionDirection = 'right';
22778 
    this.setSelectionStart(this.selectionStart + offset);
22779 
    this.setSelectionEnd(this.selectionStart);
22780 
  },
22781 
 
22782 
  /**
22783 
   * private
22784 
   */
22785 
  swapSelectionPoints: function() {
22786 
    var swapSel = this.selectionEnd;
22787 
    this.setSelectionEnd(this.selectionStart);
22788 
    this.setSelectionStart(swapSel);
22789 
  },
22790 
 
22791 
  /**
22792 
   * Moves cursor down while keeping selection
22793 
   * @param {Number} offset
22794 
   */
22795 
  moveCursorDownWithShift: function(offset) {
22796 
    if (this.selectionEnd === this.selectionStart) {
22797 
      this._selectionDirection = 'right';
22798 
    }
22799 
    if (this._selectionDirection === 'right') {
22800 
      this.setSelectionEnd(this.selectionEnd + offset);
22801 
    }
22802 
    else {
22803 
      this.setSelectionStart(this.selectionStart + offset);
22804 
    }
22805 
    if (this.selectionEnd < this.selectionStart  && this._selectionDirection === 'left') {
22806 
      this.swapSelectionPoints();
22807 
      this._selectionDirection = 'right';
22808 
    }
22809 
    if (this.selectionEnd > this.text.length) {
22810 
      this.setSelectionEnd(this.text.length);
22811 
    }
22812 
  },
22813 
 
22814 
  /**
22815 
   * @param {Event} e Event object
22816 
   * @param {Boolean} isRight
22817 
   * @return {Number}
22818 
   */
22819 
  getUpCursorOffset: function(e, isRight) {
22820 
    var selectionProp = isRight ? this.selectionEnd : this.selectionStart,
22821 
        cursorLocation = this.get2DCursorLocation(selectionProp);
22822 
    // if on first line, up cursor goes to start of line
22823 
    if (cursorLocation.lineIndex === 0 || e.metaKey || e.keyCode === 33) {
22824 
      return selectionProp;
22825 
    }
22826 
 
22827 
    var textBeforeCursor = this.text.slice(0, selectionProp),
22828 
        textOnSameLineBeforeCursor = textBeforeCursor.slice(textBeforeCursor.lastIndexOf('\n') + 1),
22829 
        textOnPreviousLine = (textBeforeCursor.match(/\n?(.*)\n.*$/) || {})[1] || '',
22830 
        _char,
22831 
        widthOfSameLineBeforeCursor = this._getLineWidth(this.ctx, cursorLocation.lineIndex),
22832 
        lineLeftOffset = this._getLineLeftOffset(widthOfSameLineBeforeCursor),
22833 
        widthOfCharsOnSameLineBeforeCursor = lineLeftOffset,
22834 
        lineIndex = cursorLocation.lineIndex;
22835 
 
22836 
    for (var i = 0, len = textOnSameLineBeforeCursor.length; i < len; i++) {
22837 
      _char = textOnSameLineBeforeCursor[i];
22838 
      widthOfCharsOnSameLineBeforeCursor += this._getWidthOfChar(this.ctx, _char, lineIndex, i);
22839 
    }
22840 
 
22841 
    var indexOnPrevLine = this._getIndexOnPrevLine(
22842 
      cursorLocation, textOnPreviousLine, widthOfCharsOnSameLineBeforeCursor);
22843 
 
22844 
    return textOnPreviousLine.length - indexOnPrevLine + textOnSameLineBeforeCursor.length;
22845 
  },
22846 
 
22847 
  /**
22848 
   * @private
22849 
   */
22850 
  _getIndexOnPrevLine: function(cursorLocation, textOnPreviousLine, widthOfCharsOnSameLineBeforeCursor) {
22851 
 
22852 
    var lineIndex = cursorLocation.lineIndex - 1,
22853 
        widthOfPreviousLine = this._getLineWidth(this.ctx, lineIndex),
22854 
        lineLeftOffset = this._getLineLeftOffset(widthOfPreviousLine),
22855 
        widthOfCharsOnPreviousLine = lineLeftOffset,
22856 
        indexOnPrevLine = 0,
22857 
        foundMatch;
22858 
 
22859 
    for (var j = 0, jlen = textOnPreviousLine.length; j < jlen; j++) {
22860 
 
22861 
      var _char = textOnPreviousLine[j],
22862 
          widthOfChar = this._getWidthOfChar(this.ctx, _char, lineIndex, j);
22863 
 
22864 
      widthOfCharsOnPreviousLine += widthOfChar;
22865 
 
22866 
      if (widthOfCharsOnPreviousLine > widthOfCharsOnSameLineBeforeCursor) {
22867 
 
22868 
        foundMatch = true;
22869 
 
22870 
        var leftEdge = widthOfCharsOnPreviousLine - widthOfChar,
22871 
            rightEdge = widthOfCharsOnPreviousLine,
22872 
            offsetFromLeftEdge = Math.abs(leftEdge - widthOfCharsOnSameLineBeforeCursor),
22873 
            offsetFromRightEdge = Math.abs(rightEdge - widthOfCharsOnSameLineBeforeCursor);
22874 
 
22875 
        indexOnPrevLine = offsetFromRightEdge < offsetFromLeftEdge ? j : (j - 1);
22876 
 
22877 
        break;
22878 
      }
22879 
    }
22880 
 
22881 
    // reached end
22882 
    if (!foundMatch) {
22883 
      indexOnPrevLine = textOnPreviousLine.length - 1;
22884 
    }
22885 
 
22886 
    return indexOnPrevLine;
22887 
  },
22888 
 
22889 
  /**
22890 
   * Moves cursor up
22891 
   * @param {Event} e Event object
22892 
   */
22893 
  moveCursorUp: function(e) {
22894 
 
22895 
    this.abortCursorAnimation();
22896 
    this._currentCursorOpacity = 1;
22897 
 
22898 
    var offset = this.getUpCursorOffset(e, this._selectionDirection === 'right');
22899 
    if (e.shiftKey) {
22900 
      this.moveCursorUpWithShift(offset);
22901 
    }
22902 
    else {
22903 
      this.moveCursorUpWithoutShift(offset);
22904 
    }
22905 
 
22906 
    this.initDelayedCursor();
22907 
  },
22908 
 
22909 
  /**
22910 
   * Moves cursor up with shift
22911 
   * @param {Number} offset
22912 
   */
22913 
  moveCursorUpWithShift: function(offset) {
22914 
    if (this.selectionEnd === this.selectionStart) {
22915 
      this._selectionDirection = 'left';
22916 
    }
22917 
    if (this._selectionDirection === 'right') {
22918 
      this.setSelectionEnd(this.selectionEnd - offset);
22919 
    }
22920 
    else {
22921 
      this.setSelectionStart(this.selectionStart - offset);
22922 
    }
22923 
    if (this.selectionEnd < this.selectionStart && this._selectionDirection === 'right') {
22924 
      this.swapSelectionPoints();
22925 
      this._selectionDirection = 'left';
22926 
    }
22927 
  },
22928 
 
22929 
  /**
22930 
   * Moves cursor up without shift
22931 
   * @param {Number} offset
22932 
   */
22933 
  moveCursorUpWithoutShift: function(offset) {
22934 
    if (this.selectionStart === this.selectionEnd) {
22935 
      this.setSelectionStart(this.selectionStart - offset);
22936 
    }
22937 
    this.setSelectionEnd(this.selectionStart);
22938 
 
22939 
    this._selectionDirection = 'left';
22940 
  },
22941 
 
22942 
  /**
22943 
   * Moves cursor left
22944 
   * @param {Event} e Event object
22945 
   */
22946 
  moveCursorLeft: function(e) {
22947 
    if (this.selectionStart === 0 && this.selectionEnd === 0) {
22948 
      return;
22949 
    }
22950 
 
22951 
    this.abortCursorAnimation();
22952 
    this._currentCursorOpacity = 1;
22953 
 
22954 
    if (e.shiftKey) {
22955 
      this.moveCursorLeftWithShift(e);
22956 
    }
22957 
    else {
22958 
      this.moveCursorLeftWithoutShift(e);
22959 
    }
22960 
 
22961 
    this.initDelayedCursor();
22962 
  },
22963 
 
22964 
  /**
22965 
   * @private
22966 
   */
22967 
  _move: function(e, prop, direction) {
22968 
    var propMethod = (prop === 'selectionStart' ? 'setSelectionStart' : 'setSelectionEnd');
22969 
    if (e.altKey) {
22970 
      this[propMethod](this['findWordBoundary' + direction](this[prop]));
22971 
    }
22972 
    else if (e.metaKey || e.keyCode === 35 ||  e.keyCode === 36 ) {
22973 
      this[propMethod](this['findLineBoundary' + direction](this[prop]));
22974 
    }
22975 
    else {
22976 
      this[propMethod](this[prop] + (direction === 'Left' ? -1 : 1));
22977 
    }
22978 
  },
22979 
 
22980 
  /**
22981 
   * @private
22982 
   */
22983 
  _moveLeft: function(e, prop) {
22984 
    this._move(e, prop, 'Left');
22985 
  },
22986 
 
22987 
  /**
22988 
   * @private
22989 
   */
22990 
  _moveRight: function(e, prop) {
22991 
    this._move(e, prop, 'Right');
22992 
  },
22993 
 
22994 
  /**
22995 
   * Moves cursor left without keeping selection
22996 
   * @param {Event} e
22997 
   */
22998 
  moveCursorLeftWithoutShift: function(e) {
22999 
    this._selectionDirection = 'left';
23000 
 
23001 
    // only move cursor when there is no selection,
23002 
    // otherwise we discard it, and leave cursor on same place
23003 
    if (this.selectionEnd === this.selectionStart) {
23004 
      this._moveLeft(e, 'selectionStart');
23005 
    }
23006 
    this.setSelectionEnd(this.selectionStart);
23007 
  },
23008 
 
23009 
  /**
23010 
   * Moves cursor left while keeping selection
23011 
   * @param {Event} e
23012 
   */
23013 
  moveCursorLeftWithShift: function(e) {
23014 
    if (this._selectionDirection === 'right' && this.selectionStart !== this.selectionEnd) {
23015 
      this._moveLeft(e, 'selectionEnd');
23016 
    }
23017 
    else {
23018 
      this._selectionDirection = 'left';
23019 
      this._moveLeft(e, 'selectionStart');
23020 
 
23021 
      // increase selection by one if it's a newline
23022 
      if (this.text.charAt(this.selectionStart) === '\n') {
23023 
        this.setSelectionStart(this.selectionStart - 1);
23024 
      }
23025 
    }
23026 
  },
23027 
 
23028 
  /**
23029 
   * Moves cursor right
23030 
   * @param {Event} e Event object
23031 
   */
23032 
  moveCursorRight: function(e) {
23033 
    if (this.selectionStart >= this.text.length && this.selectionEnd >= this.text.length) {
23034 
      return;
23035 
    }
23036 
 
23037 
    this.abortCursorAnimation();
23038 
    this._currentCursorOpacity = 1;
23039 
 
23040 
    if (e.shiftKey) {
23041 
      this.moveCursorRightWithShift(e);
23042 
    }
23043 
    else {
23044 
      this.moveCursorRightWithoutShift(e);
23045 
    }
23046 
 
23047 
    this.initDelayedCursor();
23048 
  },
23049 
 
23050 
  /**
23051 
   * Moves cursor right while keeping selection
23052 
   * @param {Event} e
23053 
   */
23054 
  moveCursorRightWithShift: function(e) {
23055 
    if (this._selectionDirection === 'left' && this.selectionStart !== this.selectionEnd) {
23056 
      this._moveRight(e, 'selectionStart');
23057 
    }
23058 
    else {
23059 
      this._selectionDirection = 'right';
23060 
      this._moveRight(e, 'selectionEnd');
23061 
 
23062 
      // increase selection by one if it's a newline
23063 
      if (this.text.charAt(this.selectionEnd - 1) === '\n') {
23064 
        this.setSelectionEnd(this.selectionEnd + 1);
23065 
      }
23066 
    }
23067 
  },
23068 
 
23069 
  /**
23070 
   * Moves cursor right without keeping selection
23071 
   * @param {Event} e Event object
23072 
   */
23073 
  moveCursorRightWithoutShift: function(e) {
23074 
    this._selectionDirection = 'right';
23075 
 
23076 
    if (this.selectionStart === this.selectionEnd) {
23077 
      this._moveRight(e, 'selectionStart');
23078 
      this.setSelectionEnd(this.selectionStart);
23079 
    }
23080 
    else {
23081 
      this.setSelectionEnd(this.selectionEnd + this.getNumNewLinesInSelectedText());
23082 
      this.setSelectionStart(this.selectionEnd);
23083 
    }
23084 
  },
23085 
 
23086 
  /**
23087 
   * Removes characters selected by selection
23088 
   * @param {Event} e Event object
23089 
   */
23090 
  removeChars: function(e) {
23091 
    if (this.selectionStart === this.selectionEnd) {
23092 
      this._removeCharsNearCursor(e);
23093 
    }
23094 
    else {
23095 
      this._removeCharsFromTo(this.selectionStart, this.selectionEnd);
23096 
    }
23097 
 
23098 
    this.setSelectionEnd(this.selectionStart);
23099 
 
23100 
    this._removeExtraneousStyles();
23101 
 
23102 
    this._clearCache();
23103 
    this.canvas && this.canvas.renderAll();
23104 
 
23105 
    this.setCoords();
23106 
    this.fire('changed');
23107 
    this.canvas && this.canvas.fire('text:changed', { target: this });
23108 
  },
23109 
 
23110 
  /**
23111 
   * @private
23112 
   * @param {Event} e Event object
23113 
   */
23114 
  _removeCharsNearCursor: function(e) {
23115 
    if (this.selectionStart !== 0) {
23116 
 
23117 
      if (e.metaKey) {
23118 
        // remove all till the start of current line
23119 
        var leftLineBoundary = this.findLineBoundaryLeft(this.selectionStart);
23120 
 
23121 
        this._removeCharsFromTo(leftLineBoundary, this.selectionStart);
23122 
        this.setSelectionStart(leftLineBoundary);
23123 
      }
23124 
      else if (e.altKey) {
23125 
        // remove all till the start of current word
23126 
        var leftWordBoundary = this.findWordBoundaryLeft(this.selectionStart);
23127 
 
23128 
        this._removeCharsFromTo(leftWordBoundary, this.selectionStart);
23129 
        this.setSelectionStart(leftWordBoundary);
23130 
      }
23131 
      else {
23132 
        var isBeginningOfLine = this.text.slice(this.selectionStart - 1, this.selectionStart) === '\n';
23133 
        this.removeStyleObject(isBeginningOfLine);
23134 
        this.setSelectionStart(this.selectionStart - 1);
23135 
        this.text = this.text.slice(0, this.selectionStart) +
23136 
                    this.text.slice(this.selectionStart + 1);
23137 
      }
23138 
    }
23139 
  }
23140 
});
23141 
 
23142 
 
23143 
/* _TO_SVG_START_ */
23144 
fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ {
23145 
 
23146 
  /**
23147 
   * @private
23148 
   */
23149 
  _setSVGTextLineText: function(lineIndex, textSpans, height, textLeftOffset, textTopOffset, textBgRects) {
23150 
    if (!this.styles[lineIndex]) {
23151 
      this.callSuper('_setSVGTextLineText',
23152 
        lineIndex, textSpans, height, textLeftOffset, textTopOffset);
23153 
    }
23154 
    else {
23155 
      this._setSVGTextLineChars(
23156 
        lineIndex, textSpans, height, textLeftOffset, textBgRects);
23157 
    }
23158 
  },
23159 
 
23160 
  /**
23161 
   * @private
23162 
   */
23163 
  _setSVGTextLineChars: function(lineIndex, textSpans, height, textLeftOffset, textBgRects) {
23164 
 
23165 
    var chars = this._textLines[lineIndex].split(''),
23166 
        charOffset = 0,
23167 
        lineLeftOffset = this._getSVGLineLeftOffset(lineIndex) - this.width / 2,
23168 
        lineOffset = this._getSVGLineTopOffset(lineIndex),
23169 
        heightOfLine = this._getHeightOfLine(this.ctx, lineIndex);
23170 
 
23171 
    for (var i = 0, len = chars.length; i < len; i++) {
23172 
      var styleDecl = this.styles[lineIndex][i] || { };
23173 
 
23174 
      textSpans.push(
23175 
        this._createTextCharSpan(
23176 
          chars[i], styleDecl, lineLeftOffset, lineOffset.lineTop + lineOffset.offset, charOffset));
23177 
 
23178 
      var charWidth = this._getWidthOfChar(this.ctx, chars[i], lineIndex, i);
23179 
 
23180 
      if (styleDecl.textBackgroundColor) {
23181 
        textBgRects.push(
23182 
          this._createTextCharBg(
23183 
            styleDecl, lineLeftOffset, lineOffset.lineTop, heightOfLine, charWidth, charOffset));
23184 
      }
23185 
 
23186 
      charOffset += charWidth;
23187 
    }
23188 
  },
23189 
 
23190 
  /**
23191 
   * @private
23192 
   */
23193 
  _getSVGLineLeftOffset: function(lineIndex) {
23194 
    return fabric.util.toFixed(this._getLineLeftOffset(this.__lineWidths[lineIndex]), 2);
23195 
  },
23196 
 
23197 
  /**
23198 
   * @private
23199 
   */
23200 
  _getSVGLineTopOffset: function(lineIndex) {
23201 
    var lineTopOffset = 0, lastHeight = 0;
23202 
    for (var j = 0; j < lineIndex; j++) {
23203 
      lineTopOffset += this._getHeightOfLine(this.ctx, j);
23204 
    }
23205 
    lastHeight = this._getHeightOfLine(this.ctx, j);
23206 
    return {
23207 
      lineTop: lineTopOffset,
23208 
      offset: (this._fontSizeMult - this._fontSizeFraction) * lastHeight / (this.lineHeight * this._fontSizeMult)
23209 
    };
23210 
  },
23211 
 
23212 
  /**
23213 
   * @private
23214 
   */
23215 
  _createTextCharBg: function(styleDecl, lineLeftOffset, lineTopOffset, heightOfLine, charWidth, charOffset) {
23216 
    return [
23217 
      //jscs:disable validateIndentation
23218 
      '<rect fill="', styleDecl.textBackgroundColor,
23219 
      '" x="', lineLeftOffset + charOffset,
23220 
      '" y="', lineTopOffset - this.height/2,
23221 
      '" width="', charWidth,
23222 
      '" height="', heightOfLine / this.lineHeight,
23223 
      '"></rect>'
23224 
      //jscs:enable validateIndentation
23225 
    ].join('');
23226 
  },
23227 
 
23228 
  /**
23229 
   * @private
23230 
   */
23231 
  _createTextCharSpan: function(_char, styleDecl, lineLeftOffset, lineTopOffset, charOffset) {
23232 
 
23233 
    var fillStyles = this.getSvgStyles.call(fabric.util.object.extend({
23234 
      visible: true,
23235 
      fill: this.fill,
23236 
      stroke: this.stroke,
23237 
      type: 'text'
23238 
    }, styleDecl));
23239 
 
23240 
    return [
23241 
      //jscs:disable validateIndentation
23242 
      '<tspan x="', lineLeftOffset + charOffset, '" y="',
23243 
        lineTopOffset - this.height/2, '" ',
23244 
        (styleDecl.fontFamily ? 'font-family="' + styleDecl.fontFamily.replace(/"/g, '\'') + '" ': ''),
23245 
        (styleDecl.fontSize ? 'font-size="' + styleDecl.fontSize + '" ': ''),
23246 
        (styleDecl.fontStyle ? 'font-style="' + styleDecl.fontStyle + '" ': ''),
23247 
        (styleDecl.fontWeight ? 'font-weight="' + styleDecl.fontWeight + '" ': ''),
23248 
        (styleDecl.textDecoration ? 'text-decoration="' + styleDecl.textDecoration + '" ': ''),
23249 
        'style="', fillStyles, '">',
23250 
        fabric.util.string.escapeXml(_char),
23251 
      '</tspan>'
23252 
      //jscs:enable validateIndentation
23253 
    ].join('');
23254 
  }
23255 
});
23256 
/* _TO_SVG_END_ */
23257 
 
23258 
 
23259 
(function() {
23260 
 
23261 
  if (typeof document !== 'undefined' && typeof window !== 'undefined') {
23262 
    return;
23263 
  }
23264 
 
23265 
  var DOMParser = require('xmldom').DOMParser,
23266 
      URL = require('url'),
23267 
      HTTP = require('http'),
23268 
      HTTPS = require('https'),
23269 
 
23270 
      Canvas = require('canvas'),
23271 
      Image = require('canvas').Image;
23272 
 
23273 
  /** @private */
23274 
  function request(url, encoding, callback) {
23275 
    var oURL = URL.parse(url);
23276 
 
23277 
    // detect if http or https is used
23278 
    if ( !oURL.port ) {
23279 
      oURL.port = ( oURL.protocol.indexOf('https:') === 0 ) ? 443 : 80;
23280 
    }
23281 
 
23282 
    // assign request handler based on protocol
23283 
    var reqHandler = (oURL.protocol.indexOf('https:') === 0 ) ? HTTPS : HTTP,
23284 
        req = reqHandler.request({
23285 
          hostname: oURL.hostname,
23286 
          port: oURL.port,
23287 
          path: oURL.path,
23288 
          method: 'GET'
23289 
        }, function(response) {
23290 
          var body = '';
23291 
          if (encoding) {
23292 
            response.setEncoding(encoding);
23293 
          }
23294 
          response.on('end', function () {
23295 
            callback(body);
23296 
          });
23297 
          response.on('data', function (chunk) {
23298 
            if (response.statusCode === 200) {
23299 
              body += chunk;
23300 
            }
23301 
          });
23302 
        });
23303 
 
23304 
    req.on('error', function(err) {
23305 
      if (err.errno === process.ECONNREFUSED) {
23306 
        fabric.log('ECONNREFUSED: connection refused to ' + oURL.hostname + ':' + oURL.port);
23307 
      }
23308 
      else {
23309 
        fabric.log(err.message);
23310 
      }
23311 
    });
23312 
 
23313 
    req.end();
23314 
  }
23315 
 
23316 
  /** @private */
23317 
  function requestFs(path, callback) {
23318 
    var fs = require('fs');
23319 
    fs.readFile(path, function (err, data) {
23320 
      if (err) {
23321 
        fabric.log(err);
23322 
        throw err;
23323 
      }
23324 
      else {
23325 
        callback(data);
23326 
      }
23327 
    });
23328 
  }
23329 
 
23330 
  fabric.util.loadImage = function(url, callback, context) {
23331 
    function createImageAndCallBack(data) {
23332 
      img.src = new Buffer(data, 'binary');
23333 
      // preserving original url, which seems to be lost in node-canvas
23334 
      img._src = url;
23335 
      callback && callback.call(context, img);
23336 
    }
23337 
    var img = new Image();
23338 
    if (url && (url instanceof Buffer || url.indexOf('data') === 0)) {
23339 
      img.src = img._src = url;
23340 
      callback && callback.call(context, img);
23341 
    }
23342 
    else if (url && url.indexOf('http') !== 0) {
23343 
      requestFs(url, createImageAndCallBack);
23344 
    }
23345 
    else if (url) {
23346 
      request(url, 'binary', createImageAndCallBack);
23347 
    }
23348 
    else {
23349 
      callback && callback.call(context, url);
23350 
    }
23351 
  };
23352 
 
23353 
  fabric.loadSVGFromURL = function(url, callback, reviver) {
23354 
    url = url.replace(/^\n\s*/, '').replace(/\?.*$/, '').trim();
23355 
    if (url.indexOf('http') !== 0) {
23356 
      requestFs(url, function(body) {
23357 
        fabric.loadSVGFromString(body.toString(), callback, reviver);
23358 
      });
23359 
    }
23360 
    else {
23361 
      request(url, '', function(body) {
23362 
        fabric.loadSVGFromString(body, callback, reviver);
23363 
      });
23364 
    }
23365 
  };
23366 
 
23367 
  fabric.loadSVGFromString = function(string, callback, reviver) {
23368 
    var doc = new DOMParser().parseFromString(string);
23369 
    fabric.parseSVGDocument(doc.documentElement, function(results, options) {
23370 
      callback && callback(results, options);
23371 
    }, reviver);
23372 
  };
23373 
 
23374 
  fabric.util.getScript = function(url, callback) {
23375 
    request(url, '', function(body) {
23376 
      eval(body);
23377 
      callback && callback();
23378 
    });
23379 
  };
23380 
 
23381 
  fabric.Image.fromObject = function(object, callback) {
23382 
    fabric.util.loadImage(object.src, function(img) {
23383 
      var oImg = new fabric.Image(img);
23384 
 
23385 
      oImg._initConfig(object);
23386 
      oImg._initFilters(object, function(filters) {
23387 
        oImg.filters = filters || [ ];
23388 
        callback && callback(oImg);
23389 
      });
23390 
    });
23391 
  };
23392 
 
23393 
  /**
23394 
   * Only available when running fabric on node.js
23395 
   * @param {Number} width Canvas width
23396 
   * @param {Number} height Canvas height
23397 
   * @param {Object} [options] Options to pass to FabricCanvas.
23398 
   * @param {Object} [nodeCanvasOptions] Options to pass to NodeCanvas.
23399 
   * @return {Object} wrapped canvas instance
23400 
   */
23401 
  fabric.createCanvasForNode = function(width, height, options, nodeCanvasOptions) {
23402 
    nodeCanvasOptions = nodeCanvasOptions || options;
23403 
 
23404 
    var canvasEl = fabric.document.createElement('canvas'),
23405 
        nodeCanvas = new Canvas(width || 600, height || 600, nodeCanvasOptions);
23406 
 
23407 
    // jsdom doesn't create style on canvas element, so here be temp. workaround
23408 
    canvasEl.style = { };
23409 
 
23410 
    canvasEl.width = nodeCanvas.width;
23411 
    canvasEl.height = nodeCanvas.height;
23412 
 
23413 
    var FabricCanvas = fabric.Canvas || fabric.StaticCanvas,
23414 
        fabricCanvas = new FabricCanvas(canvasEl, options);
23415 
 
23416 
    fabricCanvas.contextContainer = nodeCanvas.getContext('2d');
23417 
    fabricCanvas.nodeCanvas = nodeCanvas;
23418 
    fabricCanvas.Font = Canvas.Font;
23419 
 
23420 
    return fabricCanvas;
23421 
  };
23422 
 
23423 
  /** @ignore */
23424 
  fabric.StaticCanvas.prototype.createPNGStream = function() {
23425 
    return this.nodeCanvas.createPNGStream();
23426 
  };
23427 
 
23428 
  fabric.StaticCanvas.prototype.createJPEGStream = function(opts) {
23429 
    return this.nodeCanvas.createJPEGStream(opts);
23430 
  };
23431 
 
23432 
  var origSetWidth = fabric.StaticCanvas.prototype.setWidth;
23433 
  fabric.StaticCanvas.prototype.setWidth = function(width, options) {
23434 
    origSetWidth.call(this, width, options);
23435 
    this.nodeCanvas.width = width;
23436 
    return this;
23437 
  };
23438 
  if (fabric.Canvas) {
23439 
    fabric.Canvas.prototype.setWidth = fabric.StaticCanvas.prototype.setWidth;
23440 
  }
23441 
 
23442 
  var origSetHeight = fabric.StaticCanvas.prototype.setHeight;
23443 
  fabric.StaticCanvas.prototype.setHeight = function(height, options) {
23444 
    origSetHeight.call(this, height, options);
23445 
    this.nodeCanvas.height = height;
23446 
    return this;
23447 
  };
23448 
  if (fabric.Canvas) {
23449 
    fabric.Canvas.prototype.setHeight = fabric.StaticCanvas.prototype.setHeight;
23450 
  }
23451 
 
23452 
})();