6 files changed, 33 insertions, 3 deletions

diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js
index ee3e2abd..f74d4e57 100755
--- a/js/lib/geom/circle.js
+++ b/js/lib/geom/circle.js
@@ -42,8 +42,8 @@ var Circle = function GLCircle() {
         
                         this._strokeWidth = strokeSize;
                         this._innerRadius = innerRadius;
-                        if (strokeColor)  this._strokeColor = strokeColor;
-                        if (fillColor)  this._fillColor = fillColor;
+                        this._strokeColor = strokeColor;
+                        this._fillColor = fillColor;
 
                         this._strokeStyle = strokeStyle;
                 }
diff --git a/js/lib/geom/line.js b/js/lib/geom/line.js
index 2b2434f5..f3806fac 100755
--- a/js/lib/geom/line.js
+++ b/js/lib/geom/line.js
@@ -44,7 +44,7 @@ var Line = function GLLine( world, xOffset, yOffset, width, height, slope, strok
 
                 this._slope = slope;
                 this._strokeWidth = strokeSize;
-                if (strokeColor)  this._strokeColor = strokeColor.slice();
+                this._strokeColor = strokeColor;
 
                 this._strokeStyle = strokeStyle;
                 this._scaleX = (world.getViewportWidth())/(world.getViewportHeight());
diff --git a/js/tools/LineTool.js b/js/tools/LineTool.js
index dd5a7c72..499a6b9d 100755
--- a/js/tools/LineTool.js
+++ b/js/tools/LineTool.js
@@ -216,6 +216,7 @@ exports.LineTool = Montage.create(ShapeTool, {
                 {
                     strokeMaterial = Object.create(MaterialsModel.getMaterial(strokeM));
                 }
+                strokeColor = this._getMaterialColor(strokeM) || strokeColor;
             }
 
             var world = this.getGLWorld(canvas, this.options.use3D);
diff --git a/js/tools/OvalTool.js b/js/tools/OvalTool.js
index 0ad74aa4..c09c9bc7 100755
--- a/js/tools/OvalTool.js
+++ b/js/tools/OvalTool.js
@@ -53,12 +53,14 @@ exports.OvalTool = Montage.create(ShapeTool, {
                 {
                     strokeMaterial = Object.create(MaterialsModel.getMaterial(strokeM));
                 }
+                strokeColor = this._getMaterialColor(strokeM) || strokeColor;
 
                 var fillM = this.options.fillMaterial;
                 if(fillM)
                 {
                     fillMaterial = Object.create(MaterialsModel.getMaterial(fillM));
                 }
+                fillColor = this._getMaterialColor(fillM) || fillColor;
             }
 
             var world = this.getGLWorld(canvas, this.options.use3D);
diff --git a/js/tools/RectTool.js b/js/tools/RectTool.js
index c56e4424..d69aa933 100755
--- a/js/tools/RectTool.js
+++ b/js/tools/RectTool.js
@@ -72,12 +72,14 @@ exports.RectTool = Montage.create(ShapeTool, {
                 {
                     strokeMaterial = Object.create(MaterialsModel.getMaterial(strokeM));
                 }
+                strokeColor = this._getMaterialColor(strokeM) || strokeColor;
 
                 var fillM = this.options.fillMaterial;
                 if(fillM)
                 {
                     fillMaterial = Object.create(MaterialsModel.getMaterial(fillM));
                 }
+                fillColor = this._getMaterialColor(fillM) || fillColor;
             }
 
             var world = this.getGLWorld(canvas, this.options.use3D);
diff --git a/js/tools/ShapeTool.js b/js/tools/ShapeTool.js
index d3a36163..1a12401f 100755
--- a/js/tools/ShapeTool.js
+++ b/js/tools/ShapeTool.js
@@ -206,7 +206,32 @@ exports.ShapeTool = Montage.create(DrawingTool, {
         }
     },
 
+    _getMaterialColor: {
+        value: function(m)
+        {
+            var css,
+                colorObj;
+            if(m === "LinearGradientMaterial")
+            {
+                css = "-webkit-gradient(linear, left top, right top, from(rgb(255, 0, 0)), color-stop(0.3, rgb(0, 255, 0)), color-stop(0.6, rgb(0, 0, 255)), to(rgb(0, 255, 255)))";
+            }
+            else if(m === "RadialGradientMaterial")
+            {
+                css = "-webkit-radial-gradient(50% 50%, ellipse cover, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 30%, rgb(0, 0, 255) 60%, rgb(0, 255, 255) 100%)";
+            }
+
+            if(css)
+            {
+                colorObj = this.application.ninja.colorController.getColorObjFromCss(css);
+                if(colorObj)
+                {
+                    return {gradientMode:colorObj.color.gradientMode, color:colorObj.color.stops};
+                }
+            }
 
+            return null;
+        }
+    },
 
         // We can draw on an existing canvas unless it has only a single shape object
         _useExistingCanvas: {