Clear ctx.shadowColor after ctx.fill() to avoid application to both fill and stroke.

Closes #314.

src/item/Item.js

@@ -420,6 +420,11 @@ var Item = Base.extend(Callback, /** @lends Item# */{
 	// DOCS: Item#hasStroke()
 	hasStroke: function() {
 		return this.getStyle().hasStroke();
+	},
+
+	// DOCS: Item#hasShadow()
+	hasShadow: function() {
+		return this.getStyle().hasShadow();
 	}
 }, Base.each(['locked', 'visible', 'blendMode', 'opacity', 'guide'],
 	// Produce getter/setters for properties. We need setters because we want to
@@ -3105,7 +3110,6 @@ var Item = Base.extend(Callback, /** @lends Item# */{
 		// items without children, where styles would be merged.
 		var style = this._style,
 			matrix = this._matrix,
-			strokeWidth = style.getStrokeWidth(),
 			fillColor = style.getFillColor(),
 			strokeColor = style.getStrokeColor(),
 			shadowColor = style.getShadowColor();
@@ -3113,36 +3117,44 @@ var Item = Base.extend(Callback, /** @lends Item# */{
 		// see #toCanvasStyle()
 		if (fillColor)
 			ctx.fillStyle = fillColor.toCanvasStyle(ctx, matrix);
-		if (strokeColor && strokeWidth > 0) {
+		if (strokeColor) {
-			ctx.strokeStyle = strokeColor.toCanvasStyle(ctx, matrix);
+			var strokeWidth = style.getStrokeWidth();
-			ctx.lineWidth = strokeWidth;
+			if (strokeWidth > 0) {
-			var strokeJoin = style.getStrokeJoin(),
+				ctx.strokeStyle = strokeColor.toCanvasStyle(ctx, matrix);
-				strokeCap = style.getStrokeCap(),
+				ctx.lineWidth = strokeWidth;
-				miterLimit = style.getMiterLimit(),
+				var strokeJoin = style.getStrokeJoin(),
-				dashArray = style.getDashArray(),
+					strokeCap = style.getStrokeCap(),
-				dashOffset = style.getDashOffset();
+					miterLimit = style.getMiterLimit();
-			if (strokeJoin)
+				if (strokeJoin)
-				ctx.lineJoin = strokeJoin;
+					ctx.lineJoin = strokeJoin;
-			if (strokeCap)
+				if (strokeCap)
-				ctx.lineCap = strokeCap;
+					ctx.lineCap = strokeCap;
-			if (miterLimit)
+				if (miterLimit)
-				ctx.miterLimit = miterLimit;
+					ctx.miterLimit = miterLimit;
-			if (paper.support.nativeDash && dashArray && dashArray.length) {
+				if (paper.support.nativeDash) {
-				if ('setLineDash' in ctx) {
+					var dashArray = style.getDashArray(),
-					ctx.setLineDash(dashArray);
+						dashOffset = style.getDashOffset();
-					ctx.lineDashOffset = dashOffset;
+					if (dashArray && dashArray.length) {
-				} else {
+						if ('setLineDash' in ctx) {
-					ctx.mozDash = dashArray;
+							ctx.setLineDash(dashArray);
-					ctx.mozDashOffset = dashOffset;
+							ctx.lineDashOffset = dashOffset;
+						} else {
+							ctx.mozDash = dashArray;
+							ctx.mozDashOffset = dashOffset;
+						}
+					}
 				}
 			}
 		}
 		if (shadowColor) {
-			ctx.shadowColor = shadowColor.toCanvasStyle(ctx);
+			var shadowBlur = style.getShadowBlur();
-			ctx.shadowBlur = style.getShadowBlur();
+			if (shadowBlur > 0) {
-			var offset = this.getShadowOffset();
+				ctx.shadowColor = shadowColor.toCanvasStyle(ctx);
-			ctx.shadowOffsetX = offset.x;
+				ctx.shadowBlur = shadowBlur;
-			ctx.shadowOffsetY = offset.y;
+				var offset = this.getShadowOffset();
+				ctx.shadowOffsetX = offset.x;
+				ctx.shadowOffsetY = offset.y;
+			}
 		}
 	},
 

src/item/Shape.js

@@ -204,8 +204,10 @@ var Shape = Item.extend(/** @lends Shape# */{
 		}
 		if (!clip && (hasFill || hasStroke)) {
 			this._setStyles(ctx);
-			if (hasFill)
+			if (hasFill) {
 				ctx.fill(style.getWindingRule());
+				ctx.shadowColor = 'rgba(0,0,0,0)';
+			}
 			if (hasStroke)
 				ctx.stroke();
 		}

src/path/CompoundPath.js

@@ -225,8 +225,10 @@ var CompoundPath = PathItem.extend(/** @lends CompoundPath# */{
 		if (!param.clip) {
 			this._setStyles(ctx);
 			var style = this._style;
-			if (style.hasFill())
+			if (style.hasFill()) {
 				ctx.fill(style.getWindingRule());
+				ctx.shadowColor = 'rgba(0,0,0,0)';
+			}
 			if (style.hasStroke())
 				ctx.stroke();
 		}

src/path/Path.js

@@ -2024,8 +2024,13 @@ var Path = PathItem.extend(/** @lends Path# */{
 				// If the path is part of a compound path or doesn't have a fill
 				// or stroke, there is no need to continue.
 				this._setStyles(ctx);
-				if (hasFill)
+				// If shadowColor is defined, clear it after fill, so it won't
+				// be applied to both fill and stroke. If the path is only
+				// stroked, we don't have to clear it.
+				if (hasFill) {
 					ctx.fill(style.getWindingRule());
+					ctx.shadowColor = 'rgba(0,0,0,0)';
+				}
 				if (hasStroke) {
 					if (dashLength) {
 						// We cannot use the path created by drawSegments above

src/style/Style.js

@@ -252,6 +252,11 @@ var Style = Base.extend(new function() {
 		return !!this.getStrokeColor() && this.getStrokeWidth() > 0;
 	},
 
+	// DOCS: Style#hasShadow()
+	hasShadow: function() {
+		return !!this.getShadowColor() && this.getShadowBlur() > 0;
+	},
+
 	// Overrides
 
 	getLeading: function getLeading() {

src/text/PointText.js

@@ -84,13 +84,19 @@ var PointText = TextItem.extend(/** @lends PointText# */{
 		this._setStyles(ctx);
 		var style = this._style,
 			lines = this._lines,
-			leading = style.getLeading();
+			leading = style.getLeading(),
+			shadowColor = ctx.shadowColor;
+
 		ctx.font = style.getFontStyle();
 		ctx.textAlign = style.getJustification();
 		for (var i = 0, l = lines.length; i < l; i++) {
+			// See Path._draw() for explanation about ctx.shadowColor
+			ctx.shadowColor = shadowColor;
 			var line = lines[i];
-			if (style.hasFill())
+			if (style.hasFill()) {
 				ctx.fillText(line, 0, 0);
+				ctx.shadowColor = 'rgba(0,0,0,0)';
+			}
 			if (style.hasStroke())
 				ctx.strokeText(line, 0, 0);
 			ctx.translate(0, leading);