Properly render gradients when strokeScaling = false

src/item/Item.js

@@ -4293,16 +4293,16 @@ new function() { // Injection scope for hit-test functions shared with project
  * Not defined in Path as it is required by other classes too,
  * e.g. PointText.
  */
- _setStyles: function(ctx, param, viewMatrix) {
+ _setStyles: function(ctx, param, viewMatrix, strokeMatrix) {
  // 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;
  if (style.hasFill()) {
- ctx.fillStyle = style.getFillColor().toCanvasStyle(ctx, matrix);
+ ctx.fillStyle = style.getFillColor().toCanvasStyle(ctx, matrix, strokeMatrix);
  }
  if (style.hasStroke()) {
- ctx.strokeStyle = style.getStrokeColor().toCanvasStyle(ctx, matrix);
+ ctx.strokeStyle = style.getStrokeColor().toCanvasStyle(ctx, matrix, strokeMatrix);
  ctx.lineWidth = style.getStrokeWidth();
  var strokeJoin = style.getStrokeJoin(),
  strokeCap = style.getStrokeCap(),

src/item/Shape.js

@@ -261,7 +261,7 @@ var Shape = Item.extend(/** @lends Shape# */{
  ctx.closePath();
  }
  if (!dontPaint && (hasFill || hasStroke)) {
- this._setStyles(ctx, param, viewMatrix);
+ this._setStyles(ctx, param, viewMatrix, strokeMatrix);
  if (hasFill) {
  ctx.fill(style.getFillRule());
  ctx.shadowColor = 'rgba(0,0,0,0)';

src/path/CompoundPath.js

@@ -311,7 +311,7 @@ var CompoundPath = PathItem.extend(/** @lends CompoundPath# */{
  children[i].draw(ctx, param, strokeMatrix);
 
  if (!param.clip) {
- this._setStyles(ctx, param, viewMatrix);
+ this._setStyles(ctx, param, viewMatrix, strokeMatrix);
  var style = this._style;
  if (style.hasFill()) {
  ctx.fill(style.getFillRule());

src/path/Path.js

@@ -2318,7 +2318,7 @@ new function() { // Scope for drawing
  if (!dontPaint && (hasFill || hasStroke)) {
  // 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, param, viewMatrix);
+ this._setStyles(ctx, param, viewMatrix, strokeMatrix);
  if (hasFill) {
  ctx.fill(style.getFillRule());
  // If shadowColor is defined, clear it after fill, so it

src/style/Color.js

@@ -899,8 +899,11 @@ var Color = Base.extend(new function() {
  + components.join(',') + ')';
  },
 
- toCanvasStyle: function(ctx, matrix) {
- if (this._canvasStyle)
+ toCanvasStyle: function(ctx, matrix, strokeMatrix) {
+ // strokeMatrix can change without triggering _changed here, so we
+ // can't use a cached gradient here.
+ var strokeMayChange = this._type === 'gradient' && strokeMatrix;
+ if (this._canvasStyle && !strokeMayChange)
  return this._canvasStyle;
  // Normal colors are simply represented by their CSS string.
  if (this._type !== 'gradient')
@@ -923,6 +926,12 @@ var Color = Base.extend(new function() {
  if (highlight)
  highlight = inverse._transformPoint(highlight);
  }
+ if (strokeMatrix) {
+ origin = strokeMatrix._transformPoint(origin);
+ destination = strokeMatrix._transformPoint(destination);
+ if (highlight)
+ highlight = strokeMatrix._transformPoint(highlight);
+ }
  if (gradient._radial) {
  var radius = destination.getDistance(origin);
  if (highlight) {
@@ -948,7 +957,12 @@ var Color = Base.extend(new function() {
  offset == null ? i / (l - 1) : offset,
  stop._color.toCanvasStyle());
  }
- return this._canvasStyle = canvasGradient;
+ // Don't store gradients that may change in the cache.
+ // If we cached a gradient that was transformed by strokeMatrix
+ // then set strokeScaling to true, then the transformed gradient
+ // could get "stuck" in the cache.
+ if (!strokeMayChange) this._canvasStyle = canvasGradient;
+ return canvasGradient;
  },
 
  /**

test/tests/Color.js

@@ -306,6 +306,41 @@ test('Gradients with applyMatrix', function() {
  comparePixels(path, shape);
 });
 
+test('Gradients with strokeScaling: false', function() {
+ var topLeft = [100, 100];
+ var bottomRight = [400, 400];
+ var gradientColor = {
+ gradient: {
+ stops: ['yellow', 'red', 'blue']
+ },
+ origin: topLeft,
+ destination: bottomRight
+ }
+
+ var path = new Shape.Rectangle({
+ topLeft: topLeft,
+ bottomRight: bottomRight,
+ fillColor: gradientColor,
+ strokeScaling: true
+ });
+
+ var shape = new Shape.Rectangle({
+ topLeft: topLeft,
+ bottomRight: bottomRight,
+ fillColor: gradientColor,
+ strokeScaling: false
+ });
+
+ comparePixels(path, shape);
+
+ path.scale(2);
+ path.rotate(45);
+ shape.scale(2);
+ shape.rotate(45);
+
+ comparePixels(path, shape);
+})
+
 test('Modifying group.strokeColor for multiple children', function() {
  var item = new Group(new Path(), new Path());
  item.strokeColor = 'red';