More work on Path#draw().

src/item/Group.js

@@ -104,6 +104,7 @@ var Group = this.Group = Item.extend({
 	draw: function(ctx, param) {
 		for (var i = 0, l = this._children.length; i < l; i++) {
 			Item.draw(this._children[i], ctx, param);
+			// TODO: Shouldn't clipping paths not be filled / stroked?
 			if (this._clipped && i == 0)
 				ctx.clip();
 		}

src/item/Raster.js

@@ -246,10 +246,8 @@ var Raster = this.Raster = Item.extend({
 		ctx.scale(width / bounds.width, height / bounds.height);
 		ctx.translate(-bounds.x, -bounds.y);
 		// If a path was passed, draw it as a clipping mask:
-		if (path) {
+		if (path)
-			path.draw(ctx, { ignoreStyle: true });
+			path.draw(ctx, { clip: true });
-			ctx.clip();
-		}
 		// Now draw the image clipped into it.
 		this.matrix.applyToContext(ctx);
 		ctx.drawImage(this._canvas || this._image,

src/path/Path.js

@@ -716,70 +716,77 @@ var Path = this.Path = PathItem.extend({
 		}
 	}
 
+	function drawSegments(ctx, segments) {
+		var length = segments.length,
+			handleOut, outX, outY;
+
+		function drawSegment(i) {
+			var segment = segments[i],
+				point = segment._point,
+				x = point._x,
+				y = point._y,
+				handleIn = segment._handleIn;
+			if (!handleOut) {
+				ctx.moveTo(x, y);
+			} else {
+				if (handleIn.isZero() && handleOut.isZero()) {
+					ctx.lineTo(x, y);
+				} else {
+					ctx.bezierCurveTo(outX, outY,
+							handleIn._x + x, handleIn._y + y, x, y);
+				}
+			}
+			handleOut = segment._handleOut;
+			outX = handleOut._x + x;
+			outY = handleOut._y + y;
+		}
+
+		for (var i = 0; i < length; i++)
+			drawSegment(i);
+		// Close path by drawing first segment again
+		if (this._closed && length > 1)
+			drawSegment(0);
+	}
+
 	return {
 		draw: function(ctx, param) {
 			if (!param.compound)
 				ctx.beginPath();
-			var segments = this._segments,
-				length = segments.length,
-				handleOut, outX, outY;
 
-			function drawSegment(i) {
+			var fillColor = this.getFillColor(),
-				var segment = segments[i],
+				strokeColor = this.getStrokeColor();
-					point = segment._point,
+
-					x = point._x,
+			if (param.compound || param.selection || param.clip || fillColor || strokeColor) {
-					y = point._y,
+				drawSegments(ctx, this._segments);
-					handleIn = segment._handleIn;
-				if (!handleOut) {
-					ctx.moveTo(x, y);
-				} else {
-					if (handleIn.isZero() && handleOut.isZero()) {
-						ctx.lineTo(x, y);
-					} else {
-						ctx.bezierCurveTo(outX, outY,
-								handleIn._x + x, handleIn._y + y, x, y);
-					}
-				}
-				handleOut = segment._handleOut;
-				outX = handleOut._x + x;
-				outY = handleOut._y + y;
 			}
 
-			for (var i = 0; i < length; i++)
-				drawSegment(i);
-			// Close path by drawing first segment again
-			if (this._closed && length > 1)
-				drawSegment(0);
-
 			// If we are drawing the selection of a path, stroke it and draw
 			// its handles:
 			if (param.selection) {
 				ctx.stroke();
 				drawHandles(ctx, this._segments);
-			} else if (!param.ignoreStyle) {
+			} else if (param.clip) {
+				ctx.clip();
+			} else if (!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.
-				var fillColor = this.getFillColor(),
+				ctx.save();
-					strokeColor = this.getStrokeColor();
+				this._setStyles(ctx);
-				if (!param.compound && (fillColor || strokeColor)) {
+				// If the path only defines a strokeColor or a fillColor,
-					this._setStyles(ctx);
+				// draw it directly with the globalAlpha set, otherwise
-					ctx.save();
+				// we will do it later when we composite the temporary
-					// If the path only defines a strokeColor or a fillColor,
+				// canvas.
-					// draw it directly with the globalAlpha set, otherwise
+				if (!fillColor || !strokeColor)
-					// we will do it later when we composite the temporary
+					ctx.globalAlpha = this.opacity;
-					// canvas.
+				if (fillColor) {
-					if (!fillColor || !strokeColor)
+					ctx.fillStyle = fillColor.getCanvasStyle(ctx);
-						ctx.globalAlpha = this.opacity;
+					ctx.fill();
-					if (fillColor) {
-						ctx.fillStyle = fillColor.getCanvasStyle(ctx);
-						ctx.fill();
-					}
-					if (strokeColor) {
-						ctx.strokeStyle = strokeColor.getCanvasStyle(ctx);
-						ctx.stroke();
-					}
-					ctx.restore();
 				}
+				if (strokeColor) {
+					ctx.strokeStyle = strokeColor.getCanvasStyle(ctx);
+					ctx.stroke();
+				}
+				ctx.restore();
 			}
 		}
 	};