Merge remote-tracking branch 'origin/master'

2025-01-01 02:38:43 -05:00 · 2011-03-03 10:55:39 +00:00 · 2011-03-03 10:55:39 +00:00 · 54bb4d5527
commit 54bb4d5527
parent 964dc462e9 acf06937f5
29 changed files with 287 additions and 252 deletions
--- a/examples/Animated/RadialRainbows.html
+++ b/examples/Animated/RadialRainbows.html
@ -19,10 +19,12 @@
 	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/item/Layer.js"></script>
+	<script type="text/javascript" src="../../src/item/Raster.js"></script>
 	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
 	<script type="text/javascript" src="../../src/path/Segment.js"></script>
 	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.js"></script>
+	<script type="text/javascript" src="../../src/path/CompoundPath.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.Constructors.js"></script>
 	<script type="text/javascript" src="../../src/color/Color.js"></script>
 	<script type="text/javascript" src="../../src/color/RGBColor.js"></script>
@ -30,6 +32,7 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
+	<script type="text/javascript" src="../../src/util/CanvasDraw.js"></script>
 	<script>
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');
--- a/examples/Animated/RoundedRectangles.html
+++ b/examples/Animated/RoundedRectangles.html
@ -19,10 +19,12 @@
 	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/item/Layer.js"></script>
+	<script type="text/javascript" src="../../src/item/Raster.js"></script>
 	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
 	<script type="text/javascript" src="../../src/path/Segment.js"></script>
 	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.js"></script>
+	<script type="text/javascript" src="../../src/path/CompoundPath.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.Constructors.js"></script>
 	<script type="text/javascript" src="../../src/color/Color.js"></script>
 	<script type="text/javascript" src="../../src/color/RGBColor.js"></script>
@ -30,6 +32,7 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
+	<script type="text/javascript" src="../../src/util/CanvasDraw.js"></script>
 	<script>
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');
--- a/examples/Animated/animatedStar.html
+++ b/examples/Animated/animatedStar.html
@ -19,10 +19,12 @@
 	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/item/Layer.js"></script>
+	<script type="text/javascript" src="../../src/item/Raster.js"></script>
 	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
 	<script type="text/javascript" src="../../src/path/Segment.js"></script>
 	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.js"></script>
+	<script type="text/javascript" src="../../src/path/CompoundPath.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.Constructors.js"></script>
 	<script type="text/javascript" src="../../src/color/Color.js"></script>
 	<script type="text/javascript" src="../../src/color/RGBColor.js"></script>
@ -30,6 +32,7 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
+	<script type="text/javascript" src="../../src/util/CanvasDraw.js"></script>
 	<script>
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');
--- a/examples/Scripts/BouncingBalls.html
+++ b/examples/Scripts/BouncingBalls.html
@ -19,10 +19,12 @@
 	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/item/Layer.js"></script>
+	<script type="text/javascript" src="../../src/item/Raster.js"></script>
 	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
 	<script type="text/javascript" src="../../src/path/Segment.js"></script>
 	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.js"></script>
+	<script type="text/javascript" src="../../src/path/CompoundPath.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.Constructors.js"></script>
 	<script type="text/javascript" src="../../src/color/Color.js"></script>
 	<script type="text/javascript" src="../../src/color/RGBColor.js"></script>
@ -30,11 +32,7 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
-	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
-	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-	<script type="text/javascript" src="../../src/document/Symbol.js"></script>
-	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
+	<script type="text/javascript" src="../../src/util/CanvasDraw.js"></script>
 	<script>
 		window.onload = function() {

@ -48,6 +46,7 @@
 			circlePath.fillColor.gradient.type = 'radial';

 			var symbol = new Symbol(circlePath);
+			

 			var group = new Group();

--- a/examples/Scripts/arcTo.html
+++ b/examples/Scripts/arcTo.html
@ -19,10 +19,12 @@
 	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/item/Layer.js"></script>
+	<script type="text/javascript" src="../../src/item/Raster.js"></script>
 	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
 	<script type="text/javascript" src="../../src/path/Segment.js"></script>
 	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.js"></script>
+	<script type="text/javascript" src="../../src/path/CompoundPath.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.Constructors.js"></script>
 	<script type="text/javascript" src="../../src/color/Color.js"></script>
 	<script type="text/javascript" src="../../src/color/RGBColor.js"></script>
@ -30,6 +32,7 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
+	<script type="text/javascript" src="../../src/util/CanvasDraw.js"></script>
 	<script>
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');
--- a/examples/Scripts/circle.html
+++ b/examples/Scripts/circle.html
@ -19,10 +19,12 @@
 	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/item/Layer.js"></script>
+	<script type="text/javascript" src="../../src/item/Raster.js"></script>
 	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
 	<script type="text/javascript" src="../../src/path/Segment.js"></script>
 	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.js"></script>
+	<script type="text/javascript" src="../../src/path/CompoundPath.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.Constructors.js"></script>
 	<script type="text/javascript" src="../../src/color/Color.js"></script>
 	<script type="text/javascript" src="../../src/color/RGBColor.js"></script>
@ -30,6 +32,7 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
+	<script type="text/javascript" src="../../src/util/CanvasDraw.js"></script>
 	<script>
 		var count = 0;
 		var doc;
--- a/examples/Scripts/letter.html
+++ b/examples/Scripts/letter.html
@ -19,10 +19,12 @@
 	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/item/Layer.js"></script>
+	<script type="text/javascript" src="../../src/item/Raster.js"></script>
 	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
 	<script type="text/javascript" src="../../src/path/Segment.js"></script>
 	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.js"></script>
+	<script type="text/javascript" src="../../src/path/CompoundPath.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.Constructors.js"></script>
 	<script type="text/javascript" src="../../src/color/Color.js"></script>
 	<script type="text/javascript" src="../../src/color/RGBColor.js"></script>
@ -30,6 +32,7 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
+	<script type="text/javascript" src="../../src/util/CanvasDraw.js"></script>
 	<script>
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');
--- a/examples/Scripts/lines.html
+++ b/examples/Scripts/lines.html
@ -19,10 +19,12 @@
 	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/item/Layer.js"></script>
+	<script type="text/javascript" src="../../src/item/Raster.js"></script>
 	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
 	<script type="text/javascript" src="../../src/path/Segment.js"></script>
 	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.js"></script>
+	<script type="text/javascript" src="../../src/path/CompoundPath.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.Constructors.js"></script>
 	<script type="text/javascript" src="../../src/color/Color.js"></script>
 	<script type="text/javascript" src="../../src/color/RGBColor.js"></script>
@ -30,6 +32,7 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
+	<script type="text/javascript" src="../../src/util/CanvasDraw.js"></script>
 	<script>
 		var count = 0;
 		var doc;
--- a/examples/Scripts/rectangle.html
+++ b/examples/Scripts/rectangle.html
@ -19,10 +19,12 @@
 	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/item/Layer.js"></script>
+	<script type="text/javascript" src="../../src/item/Raster.js"></script>
 	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
 	<script type="text/javascript" src="../../src/path/Segment.js"></script>
 	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.js"></script>
+	<script type="text/javascript" src="../../src/path/CompoundPath.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.Constructors.js"></script>
 	<script type="text/javascript" src="../../src/color/Color.js"></script>
 	<script type="text/javascript" src="../../src/color/RGBColor.js"></script>
@ -30,6 +32,7 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
+	<script type="text/javascript" src="../../src/util/CanvasDraw.js"></script>
 	<script>
 		var count = 0;
 		var doc;
--- a/examples/Scripts/roundRectangle.html
+++ b/examples/Scripts/roundRectangle.html
@ -19,10 +19,12 @@
 	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/item/Layer.js"></script>
+	<script type="text/javascript" src="../../src/item/Raster.js"></script>
 	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
 	<script type="text/javascript" src="../../src/path/Segment.js"></script>
 	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.js"></script>
+	<script type="text/javascript" src="../../src/path/CompoundPath.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.Constructors.js"></script>
 	<script type="text/javascript" src="../../src/color/Color.js"></script>
 	<script type="text/javascript" src="../../src/color/RGBColor.js"></script>
@ -30,6 +32,7 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
+	<script type="text/javascript" src="../../src/util/CanvasDraw.js"></script>
 	<script>
 		var count = 0;
 		var doc;
--- a/examples/Scripts/star.html
+++ b/examples/Scripts/star.html
@ -19,10 +19,12 @@
 	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/item/Layer.js"></script>
+	<script type="text/javascript" src="../../src/item/Raster.js"></script>
 	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
 	<script type="text/javascript" src="../../src/path/Segment.js"></script>
 	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.js"></script>
+	<script type="text/javascript" src="../../src/path/CompoundPath.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.Constructors.js"></script>
 	<script type="text/javascript" src="../../src/color/Color.js"></script>
 	<script type="text/javascript" src="../../src/color/RGBColor.js"></script>
@ -30,6 +32,7 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
+	<script type="text/javascript" src="../../src/util/CanvasDraw.js"></script>
 	<script>
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');
--- a/examples/Scripts/strokeJoin.html
+++ b/examples/Scripts/strokeJoin.html
@ -19,10 +19,12 @@
 	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/item/Layer.js"></script>
+	<script type="text/javascript" src="../../src/item/Raster.js"></script>
 	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
 	<script type="text/javascript" src="../../src/path/Segment.js"></script>
 	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.js"></script>
+	<script type="text/javascript" src="../../src/path/CompoundPath.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.Constructors.js"></script>
 	<script type="text/javascript" src="../../src/color/Color.js"></script>
 	<script type="text/javascript" src="../../src/color/RGBColor.js"></script>
@ -30,6 +32,7 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
+	<script type="text/javascript" src="../../src/util/CanvasDraw.js"></script>
 	<script>
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');
--- a/examples/Tools/BezierTool.html
+++ b/examples/Tools/BezierTool.html
@ -19,10 +19,12 @@
 	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/item/Layer.js"></script>
+	<script type="text/javascript" src="../../src/item/Raster.js"></script>
 	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
 	<script type="text/javascript" src="../../src/path/Segment.js"></script>
 	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.js"></script>
+	<script type="text/javascript" src="../../src/path/CompoundPath.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.Constructors.js"></script>
 	<script type="text/javascript" src="../../src/color/Color.js"></script>
 	<script type="text/javascript" src="../../src/color/RGBColor.js"></script>
@ -30,7 +32,7 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-
+	<script type="text/javascript" src="../../src/util/CanvasDraw.js"></script>
 	<script>
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');
@ -69,7 +71,7 @@
 			var curRect;
 			var tool = new Tool({
 				onMouseDown: function(event) {
-					if(event.count > 1) {
+					if (event.count > 1) {
 						var first = lastInLine.segments.first;
 						first.point = inLine.segments.first.point;
 						var last = lastInLine.segments.last;
--- a/examples/Tools/Circles.html
+++ b/examples/Tools/Circles.html
@ -19,10 +19,12 @@
 	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/item/Layer.js"></script>
+	<script type="text/javascript" src="../../src/item/Raster.js"></script>
 	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
 	<script type="text/javascript" src="../../src/path/Segment.js"></script>
 	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.js"></script>
+	<script type="text/javascript" src="../../src/path/CompoundPath.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.Constructors.js"></script>
 	<script type="text/javascript" src="../../src/color/Color.js"></script>
 	<script type="text/javascript" src="../../src/color/RGBColor.js"></script>
@ -30,7 +32,7 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
-
+	<script type="text/javascript" src="../../src/util/CanvasDraw.js"></script>
 	<script>
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');
--- a/examples/Tools/Clouds.html
+++ b/examples/Tools/Clouds.html
@ -19,10 +19,12 @@
 	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/item/Layer.js"></script>
+	<script type="text/javascript" src="../../src/item/Raster.js"></script>
 	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
 	<script type="text/javascript" src="../../src/path/Segment.js"></script>
 	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.js"></script>
+	<script type="text/javascript" src="../../src/path/CompoundPath.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.Constructors.js"></script>
 	<script type="text/javascript" src="../../src/color/Color.js"></script>
 	<script type="text/javascript" src="../../src/color/RGBColor.js"></script>
@ -30,6 +32,7 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
+	<script type="text/javascript" src="../../src/util/CanvasDraw.js"></script>
 	<script>
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');
--- a/examples/Tools/Dripping
+++ b/examples/Tools/Dripping
@ -19,10 +19,12 @@
 	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/item/Layer.js"></script>
+	<script type="text/javascript" src="../../src/item/Raster.js"></script>
 	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
 	<script type="text/javascript" src="../../src/path/Segment.js"></script>
 	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.js"></script>
+	<script type="text/javascript" src="../../src/path/CompoundPath.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.Constructors.js"></script>
 	<script type="text/javascript" src="../../src/color/Color.js"></script>
 	<script type="text/javascript" src="../../src/color/RGBColor.js"></script>
@ -30,6 +32,7 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
+	<script type="text/javascript" src="../../src/util/CanvasDraw.js"></script>
 	<script>
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');
--- a/examples/Tools/Fancy
+++ b/examples/Tools/Fancy
@ -19,10 +19,12 @@
 	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/item/Layer.js"></script>
+	<script type="text/javascript" src="../../src/item/Raster.js"></script>
 	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
 	<script type="text/javascript" src="../../src/path/Segment.js"></script>
 	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.js"></script>
+	<script type="text/javascript" src="../../src/path/CompoundPath.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.Constructors.js"></script>
 	<script type="text/javascript" src="../../src/color/Color.js"></script>
 	<script type="text/javascript" src="../../src/color/RGBColor.js"></script>
@ -30,6 +32,7 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
+	<script type="text/javascript" src="../../src/util/CanvasDraw.js"></script>
 	<script>
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');
--- a/examples/Tools/Grid.html
+++ b/examples/Tools/Grid.html
@ -19,10 +19,12 @@
 	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/item/Layer.js"></script>
+	<script type="text/javascript" src="../../src/item/Raster.js"></script>
 	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
 	<script type="text/javascript" src="../../src/path/Segment.js"></script>
 	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.js"></script>
+	<script type="text/javascript" src="../../src/path/CompoundPath.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.Constructors.js"></script>
 	<script type="text/javascript" src="../../src/color/Color.js"></script>
 	<script type="text/javascript" src="../../src/color/RGBColor.js"></script>
@ -30,6 +32,7 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
+	<script type="text/javascript" src="../../src/util/CanvasDraw.js"></script>
 	<script>
 		window.onload = function() {
 			
--- a/examples/Tools/MultiLines.html
+++ b/examples/Tools/MultiLines.html
@ -19,10 +19,12 @@
 	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/item/Layer.js"></script>
+	<script type="text/javascript" src="../../src/item/Raster.js"></script>
 	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
 	<script type="text/javascript" src="../../src/path/Segment.js"></script>
 	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.js"></script>
+	<script type="text/javascript" src="../../src/path/CompoundPath.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.Constructors.js"></script>
 	<script type="text/javascript" src="../../src/color/Color.js"></script>
 	<script type="text/javascript" src="../../src/color/RGBColor.js"></script>
@ -30,6 +32,7 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
+	<script type="text/javascript" src="../../src/util/CanvasDraw.js"></script>
 	<script>
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');
--- a/examples/Tools/Wave.html
+++ b/examples/Tools/Wave.html
@ -19,10 +19,12 @@
 	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/item/Layer.js"></script>
+	<script type="text/javascript" src="../../src/item/Raster.js"></script>
 	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
 	<script type="text/javascript" src="../../src/path/Segment.js"></script>
 	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.js"></script>
+	<script type="text/javascript" src="../../src/path/CompoundPath.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.Constructors.js"></script>
 	<script type="text/javascript" src="../../src/color/Color.js"></script>
 	<script type="text/javascript" src="../../src/color/RGBColor.js"></script>
@ -30,6 +32,7 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
+	<script type="text/javascript" src="../../src/util/CanvasDraw.js"></script>
 	<script>
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');
--- a/examples/Tools/Worm
+++ b/examples/Tools/Worm
@ -19,10 +19,12 @@
 	<script type="text/javascript" src="../../src/item/PlacedSymbol.js"></script>
 	<script type="text/javascript" src="../../src/item/Group.js"></script>
 	<script type="text/javascript" src="../../src/item/Layer.js"></script>
+	<script type="text/javascript" src="../../src/item/Raster.js"></script>
 	<script type="text/javascript" src="../../src/item/PathStyle.js"></script>
 	<script type="text/javascript" src="../../src/path/Segment.js"></script>
 	<script type="text/javascript" src="../../src/path/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.js"></script>
+	<script type="text/javascript" src="../../src/path/CompoundPath.js"></script>
 	<script type="text/javascript" src="../../src/path/Path.Constructors.js"></script>
 	<script type="text/javascript" src="../../src/color/Color.js"></script>
 	<script type="text/javascript" src="../../src/color/RGBColor.js"></script>
@ -30,6 +32,7 @@
 	<script type="text/javascript" src="../../src/color/GradientColor.js"></script>
 	<script type="text/javascript" src="../../src/color/Gradient.js"></script>
 	<script type="text/javascript" src="../../src/color/GradientStop.js"></script>
+	<script type="text/javascript" src="../../src/util/CanvasDraw.js"></script>
 	<script>
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');
--- a/src/document/Doc.js
+++ b/src/document/Doc.js
@ -36,19 +36,6 @@ Doc = Base.extend({
 	},

 	redraw: function() {
-		if (this.canvas) {
-			// Initial tests conclude that clearing the canvas using clearRect
-			// is always faster than setting canvas.width = canvas.width
-			// http://jsperf.com/clearrect-vs-setting-width/7
-			var view = this.activeView;
-			var bounds = view.bounds;
-			this.ctx.clearRect(0, 0, this.size.width + 1, this.size.height + 1);
-			this.ctx.save();
-			view.matrix.applyToContext(this.ctx, true);
-			for (var i = 0, l = this.layers.length; i < l; i++) {
-				this.layers[i].draw(this.ctx, {});
-			}
-			this.ctx.restore();
-		}
+		this._draw();
 	}
 });
--- a/src/item/BlendMode.js
+++ b/src/item/BlendMode.js
@ -27,40 +27,16 @@ BlendMode = {
 	// TODO: Add missing blendmodes like hue / saturation / color / luminosity
 	// TODO: Clean up codespacing of original code, or keep it as is, so 
 	// we can easily encorporate changes?
-	process: function(documentContext, item, param) {
-		// TODO: use strokeBounds
-		var itemBounds = item.bounds;
-		if (!itemBounds)
-			return;
-		var top = Math.floor(itemBounds.top);
-		var left = Math.floor(itemBounds.left);
-		var size = itemBounds.size.ceil().add(1, 1);
-		var width = size.width;
-		var height = size.height;
-
-		var itemCanvas = CanvasProvider.getCanvas(size);
-		var itemContext = itemCanvas.getContext('2d');
-		itemContext.save();
-		if (item.matrix) {
-			var matrix = item.matrix.clone();
-			var transMatrix = Matrix.getTranslateInstance(-left, -top);
-			matrix.preConcatenate(transMatrix);
-			// TODO: Profiling shows this as a hotspot
-			matrix.applyToContext(itemContext);
-		} else {
-			itemContext.translate(-itemBounds.left, -itemBounds.top);
-		}
-		param.ignoreBlendMode = true;
-		item.draw(itemContext, param);
-
-		var dstD = documentContext.getImageData(
-			left, top,
-			width, height
+	process: function(blendMode, sourceContext, destContext, opacity, offset) {
+		var sourceCanvas = sourceContext.canvas;
+		var dstD = destContext.getImageData(
+			offset.x, offset.y,
+			sourceCanvas.width, sourceCanvas.height
 		);
-		
-		var srcD = itemContext.getImageData(
+
+		var srcD = sourceContext.getImageData(
 			0, 0,
-			width, height
+			sourceCanvas.width, sourceCanvas.height
 		);

 		var src  = srcD.data;
@ -70,7 +46,7 @@ BlendMode = {
 		var demultiply;

 		for (var px=0;px<len;px+=4){
-			sA  = src[px+3]/255;
+			sA  = src[px+3]/255 * opacity;
 			dA  = dst[px+3]/255;
 			dA2 = (sA + dA - sA*dA);
 			dst[px+3] = dA2*255;
@ -81,10 +57,10 @@ BlendMode = {
 			dGA = dst[px+1]/255*dA;
 			sBA = src[px+2]/255*sA;
 			dBA = dst[px+2]/255*dA;
-			
+
 			demultiply = 255 / dA2;
-		
-			switch(item.blendMode){
+
+			switch(blendMode){
 				// ******* Very close match to Photoshop
 				case 'normal':
 				case 'src-over':
@ -155,12 +131,12 @@ BlendMode = {
 					// dst[px+2] = ( (sBA < 0.5) ? (2 * dBA * sBA) : (1 - 2 * (1 - sBA) * (1 - dBA)) ) * demultiply;
 				break;

-				case 'hardlight':
+				case 'hard-light':
 					dst[px  ] = (sRA<=0.5) ? (2*dst[px  ]*sRA/dA) : 255 - (2 - 2*sRA/sA) * (255-dst[px  ]);
 					dst[px+1] = (sGA<=0.5) ? (2*dst[px+1]*sGA/dA) : 255 - (2 - 2*sGA/sA) * (255-dst[px+1]);
 					dst[px+2] = (sBA<=0.5) ? (2*dst[px+2]*sBA/dA) : 255 - (2 - 2*sBA/sA) * (255-dst[px+2]);
 				break;
-				
+
 				case 'color-dodge':
 				case 'dodge':
 					if ( src[px  ] == 255 && dRA==0) dst[px  ] = 255;
@ -172,7 +148,7 @@ BlendMode = {
 					if ( src[px+2] == 255 && dBA==0) dst[px+2] = 255;
 					else dst[px+2] = Math.min(255, dst[px+2]/(255 - src[px+2])) * demultiply;
 				break;
-				
+
 				case 'color-burn':
 				case 'burn':
 					if ( src[px  ] == 0 && dRA==0) dst[px  ] = 0;
@ -184,14 +160,14 @@ BlendMode = {
 					if ( src[px+2] == 0 && dBA==0) dst[px+2] = 0;
 					else dst[px+2] = (1 - Math.min(1, (1 - dBA)/sBA)) * demultiply;
 				break;
-				
+
 				case 'darken':
 				case 'darker':
 					dst[px  ] = (sRA>dRA ? dRA : sRA) * demultiply;
 					dst[px+1] = (sGA>dGA ? dGA : sGA) * demultiply;
 					dst[px+2] = (sBA>dBA ? dBA : sBA) * demultiply;
 				break;
-				
+
 				case 'lighten':
 				case 'lighter':
 					dst[px  ] = (sRA<dRA ? dRA : sRA) * demultiply;
@ -212,8 +188,6 @@ BlendMode = {
 					dst[px+2] = px%8==0 ? 0 : 255;
 			}
 		}
-		documentContext.putImageData(dstD, left, top);
-		itemContext.restore();
-		CanvasProvider.returnCanvas(itemCanvas);
+		destContext.putImageData(dstD, offset.x, offset.y);
 	}
 };
--- a/src/item/Group.js
+++ b/src/item/Group.js
@ -11,48 +11,6 @@ Group = Item.extend({
 		this.clipped = false;
 	},
 	
-	draw: function(ctx, param) {
-		if (!this.visible)
-			return;
-		// If the group has an opacity of less then 1, draw its children on a
-		// temporary canvas, and then draw that canvas onto ctx afterwards
-		// with globalAlpha set.
-		var tempCanvas, originalCtx;
-		if (this.blendMode != 'normal' && !param.ignoreBlendMode) {
-			BlendMode.process(ctx, this, param);
-		} else {
-			param.ignoreBlendMode = false;
-			if (this.opacity < 1) {
-				var originalCtx = ctx;
-				// TODO: use strokeBounds for this, when implemented:
-				tempCanvas = CanvasProvider.getCanvas(this.document.size);
-				ctx = tempCanvas.getContext('2d');
-				ctx.save();
-				this.document.activeView.matrix.applyToContext(ctx);
-			}
-			for (var i = 0, l = this.children.length; i < l; i++) {
-				this.children[i].draw(ctx, param);
-				if (this.clipped & i == 0)
-					ctx.clip();
-			}
-			if (tempCanvas) {
-				// restore the activeView.matrix transformation,
-				// so we can draw the image without transformation.
-				originalCtx.restore();
-				originalCtx.save();
-				originalCtx.globalAlpha = this.opacity;
-				originalCtx.drawImage(tempCanvas, 0, 0);
-				originalCtx.restore();
-				// apply the view transformation again.
-				this.document.activeView.matrix.applyToContext(ctx);
-				// Restore the state of the temp canvas:
-				ctx.restore();
-				// Return the temp canvas, so it can be reused
-				CanvasProvider.returnCanvas(tempCanvas);
-			}
-		}
-	},
-	
 	getBounds: function() {
 		if (this.children.length) {
 			var rect = this.children[0].bounds;
--- a/src/item/PlacedSymbol.js
+++ b/src/item/PlacedSymbol.js
@ -57,46 +57,6 @@ PlacedSymbol = Item.extend({
 	
 	getBounds: function() {
 		return this._bounds;
-	},
-	
-	draw: function(ctx, param) {
-		if (this.blendMode != 'normal' && !param.ignoreBlendMode) {
-			BlendMode.process(ctx, this, param);
-		} else {
-			var tempCanvas, originalCtx;
-			if (this.opacity < 1) {
-				originalCtx = ctx;
-				// TODO: use strokeBounds for this, when implemented:
-				tempCanvas = CanvasProvider.getCanvas(this.document.size);
-				ctx = tempCanvas.getContext('2d');
-				ctx.save();
-				this.document.activeView.matrix.applyToContext(ctx);
-			}
-			
-			// TODO: we need to preserve strokewidth, but still transform the fill
-			ctx.save();
-			if (param.ignoreBlendMode !== true)
-				this.matrix.applyToContext(ctx);
-			param.ignoreBlendMode = false;
-			this.symbol.definition.draw(ctx, param);
-			ctx.restore();
-			
-			if (tempCanvas) {
-				// restore the activeView.matrix transformation,
-				// so we can draw the image without transformation.
-				originalCtx.restore();
-				originalCtx.save();
-				originalCtx.globalAlpha = this.opacity;
-				originalCtx.drawImage(tempCanvas, 0, 0);
-				originalCtx.restore();
-				// apply the view transformation again.
-				this.document.activeView.matrix.applyToContext(ctx, true);
-				// Restore the state of the temp canvas:
-				ctx.restore();
-				// Return the temp canvas, so it can be reused
-				CanvasProvider.returnCanvas(tempCanvas);
-			}
-		}
 	}
 	// TODO:
 	// embed()
--- a/src/item/Raster.js
+++ b/src/item/Raster.js
@ -183,22 +183,6 @@ Raster = Item.extend({
 	
 	getBounds: function() {
 		return this._bounds;
-	},
-	
-	draw: function(ctx, param) {
-		if (this.blendMode != 'normal' && !param.ignoreBlendMode) {
-			BlendMode.process(ctx, this, param);
-		} else {
-			ctx.save();
-			// TODO: Documment what ignoreBlendMode is really doing, and why
-			// this is necessary?
-			if(param.ignoreBlendMode !== true)
-				this.matrix.applyToContext(ctx);
-			ctx.drawImage(this._canvas || this._image,
-					-this.size.width / 2, -this.size.height / 2);
-			ctx.restore();
-			param.ignoreBlendMode = false;
-		}
 	}
 }, new function() {
 	function getAverageColor(pixels) {
--- a/src/path/CompoundPath.js
+++ b/src/path/CompoundPath.js
@ -18,34 +18,6 @@ CompoundPath = PathItem.extend(new function() {
 				}
 			}
 		},
-
-		draw: function(ctx, param) {
-			if (!this.visible)
-				return;
-			if (this.children.length) {
-				if (this.blendMode != 'normal' && !param.ignoreBlendMode) {
-					BlendMode.process(ctx, this, param);
-				} else {
-					var firstChild = this.children[0];
-					ctx.beginPath();
-					param.compound = true;
-					for (var i = 0, l = this.children.length; i < l; i++) {
-						var child = this.children[i];
-						child.draw(ctx, param);
-					}
-					param.compound = false;
-					firstChild.setCtxStyles(ctx);
-					if (firstChild.fillColor) {
-						ctx.fillStyle = firstChild.fillColor.getCssString();
-						ctx.fill();
-					}
-					if (firstChild.strokeColor) {
-						ctx.strokeStyle = firstChild.strokeColor.getCssString();
-						ctx.stroke();
-					}
-				}
-			}
-		},
 		
 		// TODO: have getBounds of Group / Layer / CompoundPath use the same
 		// code (from a utility script?)
--- a/src/path/Path.js
+++ b/src/path/Path.js
@ -328,66 +328,6 @@ Path = PathItem.extend({

 	closePath: function() {
 		this.closed = ture;
-	},
-
-	draw: function(ctx, param) {
-		if (!this.visible) return;
-		if (this.blendMode != 'normal' && !param.ignoreBlendMode) {
-			BlendMode.process(ctx, this, param);
-		} else {
-			param.ignoreBlendMode = false;
-			if (!param.compound)
-				ctx.beginPath();
-
-			var segments = this._segments;
-			var length = segments.length;
-			for (var i = 0; i < length; i++) {
-				var segment = segments[i];
-				var x = segment.point.x;
-				var y = segment.point.y;
-				var handleIn = segment.handleIn;
-				if (i == 0) {
-					ctx.moveTo(x, y);
-				} else {
-					if (handleOut.isZero() && handleIn.isZero()) {
-						ctx.lineTo(x, y);
-					} else {
-						ctx.bezierCurveTo(
-							outX, outY,
-							handleIn.x + x, handleIn.y + y,
-							x, y
-						);
-					}
-				}
-				var handleOut = segment.handleOut;
-				var outX = handleOut.x + x;
-				var outY = handleOut.y + y;
-			}
-			if (this.closed && length > 1) {
-				var segment = segments[0];
-				var x = segment.point.x;
-				var y = segment.point.y;
-				var handleIn = segment.handleIn;
-				ctx.bezierCurveTo(outX, outY, handleIn.x + x, handleIn.y + y,
-						x, y);
-				ctx.closePath();
-			}
-			if (!param.compound) {
-				this.setCtxStyles(ctx);
-				ctx.save();
-				ctx.globalAlpha = this.opacity;
-				if (this.fillColor) {
-					ctx.fillStyle = this.fillColor.getCanvasStyle(ctx);
-					ctx.fill();
-				}
-				if (this.strokeColor) {
-					ctx.strokeStyle = this.strokeColor.getCanvasStyle(ctx);
-					ctx.stroke();
-				}
-				ctx.restore();
-			}
-		}
-
 	}
 }, new function() { // Inject methods that require scoped privates

--- a/src/util/CanvasDraw.js
+++ b/src/util/CanvasDraw.js
@ -0,0 +1,203 @@
+new function() {
+	// TODO: Implement DocumentView into the drawing
+	// TODO: Optimize temporary canvas drawing to ignore parts that are
+	// outside of the visible view.
+	function draw(context, item, param) {
+		if (!item.visible || item.opacity == 0)
+			return;
+
+		var tempCanvas, parentContext;
+		// If the item has a blendMode or is defining an opacity, draw it on
+		// a temporary canvas first and composite the canvas afterwards.
+		// Paths with an opacity < 1 that both define a fillColor
+		// and strokeColor also need to be drawn on a temporary canvas first,
+		// since otherwise their stroke is drawn half transparent over their
+		// fill.
+		if (item.blendMode !== 'normal'
+			|| item.opacity < 1
+			&& !(item.segments && (!item.fillColor || !item.strokeColor))
+		) {
+			var bounds = item.strokeBounds;
+			if (!bounds.width || !bounds.height)
+				return;
+			
+			// Floor the offset and ceil the size, so we don't cut off any
+			// antialiased pixels when drawing onto the temporary canvas.
+			var itemOffset = bounds.topLeft.floor();
+			var size = bounds.size.ceil().add(1, 1);
+			tempCanvas = CanvasProvider.getCanvas(size);
+			
+			// Save the parent context, so we can draw onto it later
+			parentContext = context;
+			
+			// Set context to the context of the temporary canvas,
+			// so we draw onto it, instead of the parentContext
+			context = tempCanvas.getContext('2d');
+			context.save();
+			
+			// Translate the context so the topLeft of the item is at (0, 0)
+			// on the temporary canvas.
+			context.translate(-itemOffset.x, -itemOffset.y);
+		}
+
+		item._draw(context, {
+			offset: itemOffset || param.offset,
+			compound: param.compound
+		});
+		
+		// If we created a temporary canvas before, composite it onto the
+		// parent canvas:
+		if (tempCanvas) {
+
+			// Restore the temporary canvas to its state before the translation
+			// matrix was applied above.
+			context.restore();
+			
+			// If the item has a blendMode, use BlendMode#process to composite
+			// its canvas on the parentCanvas.
+			if (item.blendMode != 'normal') {
+				// The pixel offset of the temporary canvas to the parent
+				// canvas.
+				var pixelOffset = itemOffset.subtract(param.offset);
+				BlendMode.process(item.blendMode, context, parentContext,
+					item.opacity, pixelOffset);
+			} else {
+			// Otherwise we just need to set the globalAlpha before drawing
+			// the temporary canvas on the parent canvas.
+				parentContext.save();
+				parentContext.globalAlpha = item.opacity;
+				parentContext.drawImage(tempCanvas, itemOffset.x, itemOffset.y);
+				parentContext.restore();
+			}
+			
+			// Return the temporary canvas, so it can be reused
+			CanvasProvider.returnCanvas(tempCanvas);
+		}
+	}
+	
+	Doc.inject({
+		_draw: function() {
+			if (this.canvas) {
+				// Initial tests conclude that clearing the canvas using clearRect
+				// is always faster than setting canvas.width = canvas.width
+				// http://jsperf.com/clearrect-vs-setting-width/7
+				this.ctx.clearRect(0, 0, this.size.width + 1, this.size.height + 1);
+				this.ctx.save();
+
+				for (var i = 0, l = this.layers.length; i < l; i++) {
+					draw(this.ctx, this.layers[i], { offset: new Point(0, 0)});
+				}
+				this.ctx.restore();
+			}
+		}
+	});
+
+	Group.inject({
+		_draw: function(ctx, param) {
+			for (var i = 0, l = this.children.length; i < l; i++) {
+				draw(ctx, this.children[i], param);
+				if (this.clipped && i == 0)
+					ctx.clip();
+			}
+		}
+	});
+
+	PlacedSymbol.inject({
+		_draw: function(ctx, param) {
+			// TODO: we need to preserve strokewidth
+			ctx.save();
+			this.matrix.applyToContext(ctx);
+			draw(ctx, this.symbol.definition, param);
+			ctx.restore();
+		}
+	});
+
+	Raster.inject({
+		_draw: function(ctx, param) {
+			ctx.save();
+			this.matrix.applyToContext(ctx);
+			ctx.drawImage(this._canvas || this._image,
+					-this.size.width / 2, -this.size.height / 2);
+			ctx.restore();
+		}
+	});
+
+	Path.inject({
+		_draw: function(ctx, param) {
+			if (!param.compound)
+				ctx.beginPath();
+			var segments = this._segments;
+			var length = segments.length;
+			for (var i = 0; i < length; i++) {
+				var segment = segments[i];
+				var x = segment.point.x;
+				var y = segment.point.y;
+				var handleIn = segment.handleIn;
+				if (i == 0) {
+					ctx.moveTo(x, y);
+				} else {
+					if (handleOut.isZero() && handleIn.isZero()) {
+						ctx.lineTo(x, y);
+					} else {
+						ctx.bezierCurveTo(
+							outX, outY,
+							handleIn.x + x, handleIn.y + y,
+							x, y
+						);
+					}
+				}
+				var handleOut = segment.handleOut;
+				var outX = handleOut.x + x;
+				var outY = handleOut.y + y;
+			}
+			if (this.closed && length > 1) {
+				var segment = segments[0];
+				var x = segment.point.x;
+				var y = segment.point.y;
+				var handleIn = segment.handleIn;
+				ctx.bezierCurveTo(outX, outY, handleIn.x + x, handleIn.y + y, x, y);
+				ctx.closePath();
+			}
+			// If the path is part of a compound path or doesn't have a fill or
+			// stroke, there is no need to continue.
+			if (!param.compound && (this.fillColor || this.strokeColor)) {
+				this.setCtxStyles(ctx);
+				ctx.save();
+				// If the path only defines a strokeColor or a fillColor,
+				// draw it directly with the globalAlpha set, otherwise
+				// we will do it later when we composite the temporary canvas.
+				if (!this.fillColor || !this.strokeColor)
+					ctx.globalAlpha = this.opacity;
+				if (this.fillColor) {
+					ctx.fillStyle = this.fillColor.getCanvasStyle(ctx);
+					ctx.fill();
+				}
+				if (this.strokeColor) {
+					ctx.strokeStyle = this.strokeColor.getCanvasStyle(ctx);
+					ctx.stroke();
+				}
+				ctx.restore();
+			}
+		}
+	});
+
+	CompoundPath.inject({
+		_draw: function(ctx, param) {
+			var firstChild = this.children[0];
+			ctx.beginPath();
+			param.compound = true;
+			for (var i = 0, l = this.children.length; i < l; i++) {
+				draw(ctx, this.children[i], param);
+			}
+			firstChild.setCtxStyles(ctx);
+			if (firstChild.fillColor) {
+				ctx.fillStyle = firstChild.fillColor.getCssString();
+				ctx.fill();
+			}
+			if (firstChild.strokeColor) {
+				ctx.strokeStyle = firstChild.strokeColor.getCssString();
+				ctx.stroke();
+			}
+		}
+	});
+};