Move handling of clipping outside of draw function, so canvas context can correctly be saved and restored for clipping paths too.

src/item/Group.js

@@ -167,9 +167,9 @@ var Group = this.Group = Item.extend(/** @lends Group# */{
 	draw: function(ctx, param) {
 		var clipItem = this._getClipItem();
 		if (clipItem) {
-			param.clipping = true;
+			param.clip = true;
 			Item.draw(clipItem, ctx, param);
-			delete param.clipping;
+			delete param.clip;
 		}
 		for (var i = 0, l = this._children.length; i < l; i++) {
 			var item = this._children[i];

src/item/Item.js

@@ -2821,25 +2821,22 @@ var Item = this.Item = Base.extend(Callback, {
 				ctx = CanvasProvider.getContext(
 						bounds.getSize().ceil().add(Size.create(1, 1)));
 			}
-			if (!param.clipping)
-				ctx.save();
+			ctx.save();
 			// Translate the context so the topLeft of the item is at (0, 0)
 			// on the temporary canvas.
 			if (parentCtx)
 				ctx.translate(-itemOffset.x, -itemOffset.y);
 			// Keep calculating the current global matrix, by keeping a history
 			// and pushing / popping as we go along.
-			var transforms = param.transforms,
-				global = transforms[transforms.length - 1].clone().concatenate(
-						item._matrix);
-			param.transforms.push(item._globalMatrix = global);
+			var transforms = param.transforms;
+			transforms.push(item._globalMatrix = transforms[transforms.length-1]
+					.clone().concatenate(item._matrix));
 			item._matrix.applyToContext(ctx);
 			item.draw(ctx, param);
-			if (!param.clipping) {
-				param.transforms.pop();
-				ctx.restore();
-
-			}
+			transforms.pop();
+			ctx.restore();
+			if (param.clip)
+				ctx.clip();
 			// If a temporary canvas was created before, composite it onto the
 			// parent canvas:
 			if (parentCtx) {

src/path/CompoundPath.js

@@ -204,9 +204,7 @@ var CompoundPath = this.CompoundPath = PathItem.extend(/** @lends CompoundPath#
 		for (var i = 0, l = children.length; i < l; i++)
 			Item.draw(children[i], ctx, param);
 		param.compound = false;
-		if (param.clip || this._clipMask) {
-			ctx.clip();
-		} else {
+		if (!param.clip) {
 			this._setStyles(ctx);
 			if (style._fillColor)
 				ctx.fill();

src/path/Path.js

@@ -1841,21 +1841,18 @@ var Path = this.Path = PathItem.extend(/** @lends Path# */{
 				strokeColor = style._strokeColor,
 				dashArray = style._dashArray,
 				drawDash = !paper.support.nativeDash && strokeColor
-						&& dashArray && dashArray.length,
-				clip = param.clip || this._clipMask;
+						&& dashArray && dashArray.length;
 
 			// Prepare the canvas path if we have any situation that requires it
 			// to be defined.
-			if (param.compound || clip || fillColor || strokeColor
+			if (param.compound || param.clip || fillColor || strokeColor
 					&& !drawDash)
 				drawSegments(ctx, this);
 
 			if (this._closed)
 				ctx.closePath();
 
-			if (clip) {
-				ctx.clip();
-			} else if (!param.compound && (fillColor || strokeColor)) {
+			if (!param.clip && !param.compound && (fillColor || strokeColor)) {
 				// 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);