From 1a1c2674fdc7ffe09ed494e7241947ab572cbd44 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=BCrg=20Lehni?= <juerg@scratchdisk.com>
Date: Wed, 14 Aug 2013 11:27:04 -0700
Subject: [PATCH] Take Item#matrix into account when drawing gradients.

Closes #267.
---
 src/item/Item.js   |  7 +++++--
 src/style/Color.js | 12 ++++++++----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/item/Item.js b/src/item/Item.js
index 6d6e3829..75c82d0e 100644
--- a/src/item/Item.js
+++ b/src/item/Item.js
@@ -2915,6 +2915,7 @@ var Item = Base.extend(Callback, /** @lends Item# */{
 		// We can access internal properties since we're only using this on
 		// items without children, where styles would be merged.
 		var style = this._style,
+			matrix = this._matrix,
 			width = style.getStrokeWidth(),
 			join = style.getStrokeJoin(),
 			cap = style.getStrokeCap(),
@@ -2930,10 +2931,12 @@ var Item = Base.extend(Callback, /** @lends Item# */{
 			ctx.lineCap = cap;
 		if (limit)
 			ctx.miterLimit = limit;
+		// We need to take matrix into account for gradients,
+		// see #toCanvasStyle()
 		if (fillColor)
-			ctx.fillStyle = fillColor.toCanvasStyle(ctx);
+			ctx.fillStyle = fillColor.toCanvasStyle(ctx, matrix);
 		if (strokeColor) {
-			ctx.strokeStyle = strokeColor.toCanvasStyle(ctx);
+			ctx.strokeStyle = strokeColor.toCanvasStyle(ctx, matrix);
 			var dashArray = style.getDashArray(),
 				dashOffset = style.getDashOffset();
 			if (paper.support.nativeDash && dashArray && dashArray.length) {
diff --git a/src/style/Color.js b/src/style/Color.js
index 34f9e6a3..00f7aef1 100644
--- a/src/style/Color.js
+++ b/src/style/Color.js
@@ -783,7 +783,7 @@ var Color = Base.extend(new function() {
 					+ components.join(',') + ')';
 		},
 
-		toCanvasStyle: function(ctx) {
+		toCanvasStyle: function(ctx, matrix) {
 			if (this._canvasStyle)
 				return this._canvasStyle;
 			// Normal colors are simply represented by their css string.
@@ -791,16 +791,20 @@ var Color = Base.extend(new function() {
 				return this._canvasStyle = this.toCSS();
 			// Gradient code form here onwards
 			var components = this._components,
+				// We need to counteract the matrix translation. The other
+				// transformations will be handled by the matrix which was
+				// applied to ctx.
+				translation = matrix ? matrix.getTranslation() : new Point(),
 				gradient = components[0],
 				stops = gradient._stops,
-				origin = components[1],
-				destination = components[2],
+				origin = components[1].subtract(translation),
+				destination = components[2].subtract(translation),
 				canvasGradient;
 			if (gradient._radial) {
 				var radius = destination.getDistance(origin),
 					highlight = components[3];
 				if (highlight) {
-					var vector = highlight.subtract(origin);
+					var vector = highlight.subtract(translation).subtract(origin);
 					if (vector.getLength() > radius)
 						highlight = origin.add(vector.normalize(radius - 0.1));
 				}