diff --git a/src/item/Item.js b/src/item/Item.js index 6af9544e..59800bc1 100644 --- a/src/item/Item.js +++ b/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) { - ctx.strokeStyle = strokeColor.toCanvasStyle(ctx, matrix); - ctx.lineWidth = strokeWidth; - var strokeJoin = style.getStrokeJoin(), - strokeCap = style.getStrokeCap(), - miterLimit = style.getMiterLimit(), - dashArray = style.getDashArray(), - dashOffset = style.getDashOffset(); - if (strokeJoin) - ctx.lineJoin = strokeJoin; - if (strokeCap) - ctx.lineCap = strokeCap; - if (miterLimit) - ctx.miterLimit = miterLimit; - if (paper.support.nativeDash && dashArray && dashArray.length) { - if ('setLineDash' in ctx) { - ctx.setLineDash(dashArray); - ctx.lineDashOffset = dashOffset; - } else { - ctx.mozDash = dashArray; - ctx.mozDashOffset = dashOffset; + if (strokeColor) { + var strokeWidth = style.getStrokeWidth(); + if (strokeWidth > 0) { + ctx.strokeStyle = strokeColor.toCanvasStyle(ctx, matrix); + ctx.lineWidth = strokeWidth; + var strokeJoin = style.getStrokeJoin(), + strokeCap = style.getStrokeCap(), + miterLimit = style.getMiterLimit(); + if (strokeJoin) + ctx.lineJoin = strokeJoin; + if (strokeCap) + ctx.lineCap = strokeCap; + if (miterLimit) + ctx.miterLimit = miterLimit; + if (paper.support.nativeDash) { + var dashArray = style.getDashArray(), + dashOffset = style.getDashOffset(); + if (dashArray && dashArray.length) { + if ('setLineDash' in ctx) { + ctx.setLineDash(dashArray); + ctx.lineDashOffset = dashOffset; + } else { + ctx.mozDash = dashArray; + ctx.mozDashOffset = dashOffset; + } + } } } } if (shadowColor) { - ctx.shadowColor = shadowColor.toCanvasStyle(ctx); - ctx.shadowBlur = style.getShadowBlur(); - var offset = this.getShadowOffset(); - ctx.shadowOffsetX = offset.x; - ctx.shadowOffsetY = offset.y; + var shadowBlur = style.getShadowBlur(); + if (shadowBlur > 0) { + ctx.shadowColor = shadowColor.toCanvasStyle(ctx); + ctx.shadowBlur = shadowBlur; + var offset = this.getShadowOffset(); + ctx.shadowOffsetX = offset.x; + ctx.shadowOffsetY = offset.y; + } } }, diff --git a/src/item/Shape.js b/src/item/Shape.js index 443e5b29..86b802e9 100644 --- a/src/item/Shape.js +++ b/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(); } diff --git a/src/path/CompoundPath.js b/src/path/CompoundPath.js index 690cf8b7..52652857 100644 --- a/src/path/CompoundPath.js +++ b/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(); } diff --git a/src/path/Path.js b/src/path/Path.js index a0d5be67..fee062d9 100644 --- a/src/path/Path.js +++ b/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 diff --git a/src/style/Style.js b/src/style/Style.js index d4d3f4ad..ce027fa1 100644 --- a/src/style/Style.js +++ b/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() { diff --git a/src/text/PointText.js b/src/text/PointText.js index 27ed92e8..34d61891 100644 --- a/src/text/PointText.js +++ b/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);