diff --git a/examples/Animated/RadialRainbows.html b/examples/Animated/RadialRainbows.html
index 73eaa1ec..284d875b 100644
--- 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');
diff --git a/examples/Animated/RoundedRectangles.html b/examples/Animated/RoundedRectangles.html
index 910beb92..46714708 100644
--- 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');
diff --git a/examples/Animated/animatedStar.html b/examples/Animated/animatedStar.html
index 04724479..e292339c 100644
--- 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');
diff --git a/examples/Scripts/BouncingBalls.html b/examples/Scripts/BouncingBalls.html
index 98afbd07..869506c5 100644
--- 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();
 
@@ -66,6 +65,7 @@
 					this.item = new PlacedSymbol(symbol);
 					this.item.position = point;
 					this.item.scale(this.radius / 10);
+					this.item.rotate(30);
 					group.appendTop(this.item);
 				},
 
diff --git a/examples/Scripts/arcTo.html b/examples/Scripts/arcTo.html
index 0d599166..7c6cd805 100644
--- 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');
diff --git a/examples/Scripts/circle.html b/examples/Scripts/circle.html
index 4977a731..15e6a8e4 100644
--- 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;
diff --git a/examples/Scripts/letter.html b/examples/Scripts/letter.html
index 00a8ccca..804cb383 100644
--- 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');
diff --git a/examples/Scripts/lines.html b/examples/Scripts/lines.html
index e06a002a..a18c1943 100644
--- 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;
diff --git a/examples/Scripts/rectangle.html b/examples/Scripts/rectangle.html
index e720cd2d..b74ab4c8 100644
--- 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;
diff --git a/examples/Scripts/roundRectangle.html b/examples/Scripts/roundRectangle.html
index 08ff59a8..afa61bb4 100644
--- 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;
diff --git a/examples/Scripts/star.html b/examples/Scripts/star.html
index cb128caa..9c0fcf53 100644
--- 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');
diff --git a/examples/Scripts/strokeJoin.html b/examples/Scripts/strokeJoin.html
index e290a604..ab8243b5 100644
--- 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');
diff --git a/examples/Tools/BezierTool.html b/examples/Tools/BezierTool.html
index efb997be..b3ab601a 100644
--- 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;
diff --git a/examples/Tools/Circles.html b/examples/Tools/Circles.html
index 188d4e52..4126e149 100644
--- 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');
diff --git a/examples/Tools/Clouds.html b/examples/Tools/Clouds.html
index 51e2f9ce..b574eabd 100644
--- 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');
diff --git a/examples/Tools/Dripping Brush.html b/examples/Tools/Dripping Brush.html
index 6ff6120c..d42f774c 100644
--- a/examples/Tools/Dripping Brush.html	
+++ b/examples/Tools/Dripping Brush.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');
diff --git a/examples/Tools/Fancy Brush.html b/examples/Tools/Fancy Brush.html
index 46f8ac7b..64c23fd8 100644
--- a/examples/Tools/Fancy Brush.html	
+++ b/examples/Tools/Fancy Brush.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');
diff --git a/examples/Tools/Grid.html b/examples/Tools/Grid.html
index 4bd7a8ba..5aee6a48 100644
--- 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() {
 			
diff --git a/examples/Tools/MultiLines.html b/examples/Tools/MultiLines.html
index f0733b1a..4ac6f980 100644
--- 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');
diff --git a/examples/Tools/Wave.html b/examples/Tools/Wave.html
index 70013aaf..df4359bf 100644
--- 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');
diff --git a/examples/Tools/Worm Farm.html b/examples/Tools/Worm Farm.html
index 0a8612d9..ecd197ba 100644
--- a/examples/Tools/Worm Farm.html	
+++ b/examples/Tools/Worm Farm.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');