diff --git a/src/group.class.js b/src/group.class.js index 2d95d197..43592715 100644 --- a/src/group.class.js +++ b/src/group.class.js @@ -245,6 +245,8 @@ var groupScaleFactor = Math.max(this.scaleX, this.scaleY); + this.clipTo && fabric.util.clipContext(this, ctx); + //The array is now sorted in order of highest first, so start from end. for (var i = this.objects.length; i > 0; i--) { @@ -260,6 +262,7 @@ object.borderScaleFactor = originalScaleFactor; object.hasRotatingPoint = originalHasRotatingPoint; } + this.clipTo && ctx.restore(); if (!noTransform && this.active) { this.drawBorders(ctx); diff --git a/src/image.class.js b/src/image.class.js index df4d1b58..de92b865 100644 --- a/src/image.class.js +++ b/src/image.class.js @@ -104,7 +104,9 @@ } this._setShadow(ctx); + this.clipTo && fabric.util.clipContext(this, ctx); this._render(ctx); + this.clipTo && ctx.restore(); this._removeShadow(ctx); if (this.active && !noTransform) { diff --git a/src/object.class.js b/src/object.class.js index bf1da741..bf4353b3 100644 --- a/src/object.class.js +++ b/src/object.class.js @@ -289,6 +289,13 @@ */ includeDefaultValues: true, + /** + * Function that determines clipping of an object (context is passed as a first argument) + * @property + * @type Function + */ + clipTo: null, + /** * List of properties to consider when checking if state of an object is changed (fabric.Object#hasStateChanged); * as well as for history (undo/redo) purposes @@ -667,7 +674,9 @@ } this._setShadow(ctx); + this.clipTo && fabric.util.clipContext(this, ctx); this._render(ctx, noTransform); + this.clipTo && ctx.restore(); this._removeShadow(ctx); if (this.active && !noTransform) { diff --git a/src/path.class.js b/src/path.class.js index 67857b47..b123d6b6 100644 --- a/src/path.class.js +++ b/src/path.class.js @@ -553,14 +553,16 @@ ? this.stroke.toLive(ctx) : this.stroke; } - ctx.beginPath(); - this._setShadow(ctx); + this.clipTo && fabric.util.clipContext(this, ctx); + + ctx.beginPath(); this._render(ctx); if (this.fill) { ctx.fill(); } + this.clipTo && ctx.restore(); this._removeShadow(ctx); if (this.stroke) { diff --git a/src/path_group.class.js b/src/path_group.class.js index ed64d7e8..211c40dc 100644 --- a/src/path_group.class.js +++ b/src/path_group.class.js @@ -79,9 +79,11 @@ this.transform(ctx); this._setShadow(ctx); + this.clipTo && fabric.util.clipContext(this, ctx); for (var i = 0, l = this.paths.length; i < l; ++i) { this.paths[i].render(ctx, true); } + this.clipTo && ctx.restore(); this._removeShadow(ctx); if (this.active) { diff --git a/src/static_canvas.class.js b/src/static_canvas.class.js index b4019123..65fac8e3 100644 --- a/src/static_canvas.class.js +++ b/src/static_canvas.class.js @@ -563,7 +563,7 @@ this.fire('before:render'); if (this.clipTo) { - this._clipCanvas(canvasToDrawOn); + fabric.util.clipCanvas(this, canvasToDrawOn); } if (this.backgroundColor) { @@ -616,17 +616,6 @@ return this; }, - /** - * @private - * @method _clipCanvas - */ - _clipCanvas: function(canvasToDrawOn) { - canvasToDrawOn.save(); - canvasToDrawOn.beginPath(); - this.clipTo(canvasToDrawOn); - canvasToDrawOn.clip(); - }, - /** * @private * @method _drawBackroundImage diff --git a/src/text.class.js b/src/text.class.js index bf146c6c..439e3980 100644 --- a/src/text.class.js +++ b/src/text.class.js @@ -287,10 +287,12 @@ } this._setTextShadow(ctx); + this.clipTo && fabric.util.clipContext(this, ctx); this._renderTextFill(ctx, textLines); + this._renderTextStroke(ctx, textLines); + this.clipTo && ctx.restore(); this.textShadow && ctx.restore(); - this._renderTextStroke(ctx, textLines); if (this.textAlign !== 'left' && this.textAlign !== 'justify') { ctx.restore(); } diff --git a/src/util/misc.js b/src/util/misc.js index c843689f..5327c2ab 100644 --- a/src/util/misc.js +++ b/src/util/misc.js @@ -386,6 +386,16 @@ } } + /** + * @method clipContext + */ + function clipContext(receiver, ctx) { + ctx.save(); + ctx.beginPath(); + receiver.clipTo(ctx); + ctx.clip(); + } + fabric.util.removeFromArray = removeFromArray; fabric.util.degreesToRadians = degreesToRadians; fabric.util.radiansToDegrees = radiansToDegrees; @@ -402,5 +412,6 @@ fabric.util.drawDashedLine = drawDashedLine; fabric.util.createCanvasElement = createCanvasElement; fabric.util.createAccessors = createAccessors; + fabric.util.clipContext = clipContext; })(); \ No newline at end of file