Implement Gradient, GradientColor, GradientStop.

src/color/Color.js

@@ -26,6 +26,10 @@ Color = Base.extend({
 		return this._alpha != -1;
 	},
 	
+	getCanvasStyle: function() {
+		return this.cssString;
+	},
+	
 	statics: {
 		read: function(args, index) {
 			var index = index || 0, length = args.length - index;

src/color/Gradient.js

@@ -0,0 +1,20 @@
+Gradient = Base.extend({
+	initialize: function() {
+		this.stops = [new GradientStop('white', 0), new GradientStop('black', 1)];
+		this.type = 'linear';
+	},
+	
+	getStops: function() {
+		return this._stops;
+	},
+	
+	setStops: function(stops) {
+		if(stops.length < 2)
+			throw Error('Gradient stop list needs to contain at least two stops.');
+		this._stops = stops;
+	},
+	
+	getStops: function() {
+		return this._stops;
+	}
+});

src/color/GradientColor.js

@@ -0,0 +1,61 @@
+GradientColor = Color.extend({
+	beans: true,
+
+	initialize: function(gradient, origin, destination, hilite) {
+		this.gradient = gradient || new Gradient();
+		this.origin = new Point(origin);
+		this.destination = new Point(destination);
+		if(hilite)
+			this.hilite = new Point(hilite);
+	},
+	
+	getOrigin: function() {
+		return this._origin;
+	},
+	
+	setOrigin: function() {
+		this._origin = Point.read(arguments);
+		if(this._destination)
+			this._radius = this._destination.getDistance(this._origin);
+	},
+	
+	getDestination: function() {
+		return this._destination;
+	},
+	
+	setDestination: function() {
+		this._destination = Point.read(arguments);
+		this._radius = this._destination.getDistance(this._origin);
+	},
+	
+	getHilite: function() {
+		return this._hilite;
+	},
+	
+	setHilite: function() {
+		var hilite = Point.read(arguments);
+		var vector = hilite.subtract(this.origin);
+		if(vector.length > this._radius) {
+			this._hilite = this.origin.add(vector.normalize(this._radius - 0.1));
+		} else {
+			this._hilite = hilite;
+		}
+	},
+	
+	getCanvasStyle: function(ctx) {
+		var gradient;
+		if(this.gradient.type == 'linear') {
+			gradient = ctx.createLinearGradient(this.origin.x, this.origin.y,
+				this.destination.x, this.destination.y);
+		} else {
+			var origin = this.hilite || this.origin;
+			gradient = ctx.createRadialGradient(origin.x, origin.y,
+				0, this.origin.x, this.origin.y, this._radius);
+		}
+		for(var i = 0, l = this.gradient.stops.length; i < l; i++) {
+			var stop = this.gradient.stops[i];
+			gradient.addColorStop(stop.rampPoint, stop.color.getCssString());
+		}
+		return gradient;
+	}
+});

src/color/GradientStop.js

@@ -0,0 +1,25 @@
+GradientStop = Base.extend({
+	beans: true,
+
+	// TODO: support midPoint? (initial tests didn't look nice)
+	initialize: function(color, rampPoint) {
+		this.color = Color.read([color]);
+		this.rampPoint = rampPoint !== null ? rampPoint : 0;
+	},
+	
+	getRampPoint: function() {
+		return this._rampPoint;
+	},
+	
+	setRampPoint: function(rampPoint) {
+		this._rampPoint = rampPoint;
+	},
+	
+	getColor: function() {
+		return this._color;
+	},
+	
+	setColor: function() {
+		this._color = Color.read(arguments);
+	}
+});

src/path/Path.js

@@ -370,11 +370,11 @@ Path = PathItem.extend({
 			ctx.save();
 			ctx.globalAlpha = this.opacity;
 			if (this.fillColor) {
-				ctx.fillStyle = this.fillColor.getCssString();
+				ctx.fillStyle = this.fillColor.getCanvasStyle(ctx);
 				ctx.fill();
 			}
 			if (this.strokeColor) {
-				ctx.strokeStyle = this.strokeColor.getCssString();
+				ctx.strokeStyle = this.strokeColor.getCanvasStyle(ctx);
 				ctx.stroke();
 			}
 			ctx.restore();