Change the way gradients are initialized.

They no longer need `ctx` property, which is now taken from object directly during rendering time.
Add unit tests for gradients.

src/object.class.js

@@ -136,7 +136,19 @@
      * @param {Object} [options] Options object
      */
     initialize: function(options) {
-      options && this.setOptions(options);
+      if (options) {
+        this._initGradient(options);
+        this.setOptions(options);
+      }
+    },
+
+    /**
+     * @method initGradient
+     */
+    _initGradient: function(options) {
+      if (options.fill && !(options.fill instanceof fabric.Gradient)) {
+        this.setGradientFill(options.fill);
+      }
     },
 
     /**
@@ -180,7 +192,7 @@
         top:              toFixed(this.top, this.NUM_FRACTION_DIGITS),
         width:            toFixed(this.width, this.NUM_FRACTION_DIGITS),
         height:           toFixed(this.height, this.NUM_FRACTION_DIGITS),
-        fill:             this.fill,
+        fill:             (this.fill && this.fill.toObject) ? this.fill.toObject() : this.fill,
         overlayFill:      this.overlayFill,
         stroke:           this.stroke,
         strokeWidth:      this.strokeWidth,
@@ -393,7 +405,9 @@
         ctx.fillStyle = this.overlayFill;
       }
       else if (this.fill) {
-        ctx.fillStyle = this.fill;
+        ctx.fillStyle = this.fill.toLiveGradient
+          ? this.fill.toLiveGradient(ctx)
+          : this.fill;
       }
 
       if (this.group && this.type === 'rect') {
@@ -1371,8 +1385,8 @@
       return this.toObject();
     },
 
-    setGradientFill: function(ctx, options) {
-      this.set('fill', fabric.Gradient.forObject(this, ctx, options));
+    setGradientFill: function(options) {
+      this.set('fill', fabric.Gradient.forObject(this, options));
     },
 
     animate: function(property, to, options) {

src/parser.js

@@ -292,11 +292,6 @@
   };
 
   function resolveGradients(instances) {
-    var activeInstance = fabric.Canvas.activeInstance,
-        ctx = activeInstance ? activeInstance.getContext() : null;
-
-    if (!ctx) return;
-
     for (var i = instances.length; i--; ) {
       var instanceFillValue = instances[i].get('fill');
 
@@ -306,7 +301,7 @@
 
         if (fabric.gradientDefs[gradientId]) {
           instances[i].set('fill',
-            fabric.Gradient.fromElement(fabric.gradientDefs[gradientId], ctx, instances[i]));
+            fabric.Gradient.fromElement(fabric.gradientDefs[gradientId], instances[i]));
         }
       }
     }

test.js

@@ -24,7 +24,8 @@ testrunner.run({
       './test/unit/group.js',
       './test/unit/parser.js',
       './test/unit/canvas.js',
-      './test/unit/canvas_static.js'
+      './test/unit/canvas_static.js',
+      './test/unit/gradient.js'
     ]
 }, function(err, report) {
   if(report.failed > 0){

test/unit/gradient.js

@@ -0,0 +1,118 @@
+(function() {
+
+  QUnit.module('fabric.Gradient');
+
+  function createGradient() {
+    return new fabric.Gradient({
+      x1: 0,
+      y1: 10,
+      x2: 100,
+      y2: 200,
+      colorStops: {
+        '0': 'red',
+        '1': 'green'
+      }
+    });
+  }
+
+  test('constructor', function() {
+    ok(fabric.Gradient);
+
+    var gradient = createGradient();
+    ok(gradient instanceof fabric.Gradient, 'should inherit from fabric.Gradient');
+  });
+
+  test('properties', function() {
+    var gradient = createGradient();
+
+    equal(gradient.x1, 0);
+    equal(gradient.y1, 10);
+    equal(gradient.x2, 100);
+    equal(gradient.y2, 200);
+
+    equal(gradient.colorStops['0'], 'red');
+    equal(gradient.colorStops['1'], 'green');
+  });
+
+  test('toObject', function() {
+    var gradient = createGradient();
+
+    ok(typeof gradient.toObject == 'function');
+
+    var object = gradient.toObject();
+
+    equal(object.x1, gradient.x1);
+    equal(object.x2, gradient.x2);
+    equal(object.y1, gradient.y1);
+    equal(object.y2, gradient.y2);
+    equal(object.colorStops, gradient.colorStops);
+  });
+
+  test('toLiveGradient', function() {
+    var gradient = createGradient();
+
+    ok(typeof gradient.toLiveGradient == 'function');
+  });
+
+  test('fromElement', function() {
+    ok(typeof fabric.Gradient.fromElement == 'function');
+
+    var element = fabric.document.createElement('linearGradient');
+    var stop1 = fabric.document.createElement('stop');
+    var stop2 = fabric.document.createElement('stop');
+
+    stop1.setAttribute('offset', '0%');
+    stop1.setAttribute('stop-color', 'white');
+
+    stop2.setAttribute('offset', '100%');
+    stop2.setAttribute('stop-color', 'black');
+
+    element.appendChild(stop1);
+    element.appendChild(stop2);
+
+    var object = new fabric.Object({ width: 100, height: 100 });
+    var gradient = fabric.Gradient.fromElement(element, object);
+
+    ok(gradient instanceof fabric.Gradient);
+
+    // TODO: need to double check these values
+
+    equal(gradient.x1, -50);
+    equal(gradient.y1, -50);
+
+    equal(gradient.x2, 50);
+    equal(gradient.y2, -50);
+
+    equal(gradient.colorStops[0], 'white');
+    equal(gradient.colorStops[1], 'black');
+  });
+
+  test('forObject', function() {
+    ok(typeof fabric.Gradient.forObject == 'function');
+
+    var object = new fabric.Object({ width: 50, height: 50 });
+
+    var gradient = fabric.Gradient.forObject(object, {
+      x1: 10,
+      y1: 10,
+      x2: 20,
+      y2: 20,
+      colorStops: {
+        '0': 'red',
+        '0.5': 'green',
+        '1': 'blue'
+      }
+    });
+
+    ok(gradient instanceof fabric.Gradient);
+
+    // TODO: need to double check these values
+
+    equal(gradient.x1, -15);
+    equal(gradient.y1, -15);
+
+    equal(gradient.x2, -5);
+    equal(gradient.y2, -5);
+  });
+
+})();