2 files changed, 56 insertions, 6 deletions

diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js
index 0278e49c..02a39ccd 100755
--- a/js/lib/geom/brush-stroke.js
+++ b/js/lib/geom/brush-stroke.js
@@ -4,9 +4,11 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 </copyright> */
 
-// Todo: This entire class should be converted to a module
 var VecUtils = require("js/helper-classes/3D/vec-utils").VecUtils;
 var GeomObj = require("js/lib/geom/geom-obj").GeomObj;
+var CanvasController = require("js/controllers/elements/canvas-controller").CanvasController;
+
+// Todo: This entire class should be converted to a module
 
 ///////////////////////////////////////////////////////////////////////
 // Class GLBrushStroke
@@ -28,7 +30,10 @@ var BrushStroke = function GLBrushStroke() {
     //whether or not to use the canvas drawing to stroke/fill
     this._useCanvasDrawing = true;
 
-    //the X and Y location of this subpath's canvas in stage world space of Ninja
+    //the HTML5 canvas that holds this brush stroke
+    this._canvas = null;
+
+    //the X and Y location of this brush stroke canvas in stage world space of Ninja
     this._canvasX = 0;
     this._canvasY = 0;
 
@@ -65,6 +70,10 @@ var BrushStroke = function GLBrushStroke() {
     /////////////////////////////////////////////////////////
     // Property Accessors/Setters
     /////////////////////////////////////////////////////////
+    this.setCanvas = function(c) {
+        this._canvas = c;
+    }
+
     this.setWorld = function (world) {
         this._world = world;
     };
@@ -195,6 +204,9 @@ var BrushStroke = function GLBrushStroke() {
             this._dirty = true;
         }
     }
+    this.getStrokeHardness = function(){
+        return this._strokeHardness;
+    }
 
     this.setDoSmoothing = function(s){
         if (this._strokeDoSmoothing!==s) {
@@ -203,12 +215,19 @@ var BrushStroke = function GLBrushStroke() {
         }
     }
 
+    this.getDoSmoothing = function(){
+        return this._strokeDoSmoothing;
+    }
+
     this.setSmoothingAmount = function(a){
         if (this._strokeAmountSmoothing!==a) {
             this._strokeAmountSmoothing = a;
             this._dirty = true;
         }
+    }
 
+    this.getSmoothingAmount = function(){
+        return this._strokeAmountSmoothing;
     }
 
     this.setStrokeUseCalligraphic = function(c){
@@ -225,6 +244,14 @@ var BrushStroke = function GLBrushStroke() {
         };
     }
 
+    this.getStrokeUseCalligraphic = function(){
+        return this._strokeUseCalligraphic;
+    }
+
+    this.getStrokeAngle = function(){
+        this._strokeAngle = a;
+    }
+
     this.getStrokeStyle = function () {
         return this._strokeStyle;
     };
@@ -301,12 +328,13 @@ var BrushStroke = function GLBrushStroke() {
             console.log("Inserted "+numInsertedPoints+" additional CatmullRom points");
             this._addedSamples = true;
             this._dirty=true;
-        }
+        } //if we need to add samples to this curve (done only once)
+
         //build a copy of the original points...this should be done only once
         if (this._storedOrigPoints === false) {
             this._OrigPoints = this._Points.slice(0);
             this._storedOrigPoints = true;
-        }
+        } //if we need to store a copy of the original points (done only once)
 
         if (this._dirty) {
             this._Points = this._OrigPoints.slice(0);
@@ -377,7 +405,7 @@ var BrushStroke = function GLBrushStroke() {
 
          // get the context
         var ctx = world.get2DContext();
-        if (!ctx)  throw ("null context in brushstroke render")
+        if (!ctx)  throw ("null context in brushstroke render");
 
         var numPoints = this.getNumPoints();
         if (numPoints === 0) {
@@ -391,6 +419,14 @@ var BrushStroke = function GLBrushStroke() {
         var bboxMax = this.getBBoxMax();
         var bboxWidth = bboxMax[0] - bboxMin[0];
         var bboxHeight = bboxMax[1] - bboxMin[1];
+
+        //assign the new width and height as the canvas dimensions through the canvas controller
+        if (this._canvas) {
+            CanvasController.setProperty(this._canvas, "width", bboxWidth+"px");
+            CanvasController.setProperty(this._canvas, "height", bboxHeight+"px");
+            this._canvas.elementModel.shapeModel.GLWorld.setViewportFromCanvas(this._canvas);
+        }
+
         ctx.clearRect(0, 0, bboxWidth, bboxHeight);
 
         if (this._strokeUseCalligraphic) {
diff --git a/js/lib/geom/sub-path.js b/js/lib/geom/sub-path.js
index 017cca92..e95be0e7 100755
--- a/js/lib/geom/sub-path.js
+++ b/js/lib/geom/sub-path.js
@@ -6,7 +6,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 
 
 var VecUtils =      require("js/helper-classes/3D/vec-utils").VecUtils;
-
+var CanvasController = require("js/controllers/elements/canvas-controller").CanvasController;
 var GeomObj =       require("js/lib/geom/geom-obj").GeomObj;
 var AnchorPoint =   require("js/lib/geom/anchor-point").AnchorPoint;
 var MaterialsModel = require("js/models/materials-model").MaterialsModel;
@@ -61,6 +61,9 @@ var GLSubpath = function GLSubpath() {
     //whether or not to use the canvas drawing to stroke/fill
     this._useCanvasDrawing = true;
 
+    //the canvas that will draw this subpath
+    this._canvas = null;
+    
     //the X and Y location of this subpath's canvas in stage world space of Ninja
     this._canvasX = 0;
     this._canvasY = 0;
@@ -131,6 +134,11 @@ var GLSubpath = function GLSubpath() {
         var bboxHeight = bboxMax[1] - bboxMin[1];
         var bboxMid = [0.5 * (bboxMax[0] + bboxMin[0]), 0.5 * (bboxMax[1] + bboxMin[1]), 0.5 * (bboxMax[2] + bboxMin[2])];
 
+        if (this._canvas) {
+            CanvasController.setProperty(this._canvas, "width", bboxWidth+"px");
+            CanvasController.setProperty(this._canvas, "height", bboxHeight+"px");
+            this._canvas.elementModel.shapeModel.GLWorld.setViewportFromCanvas(this._canvas);
+        }
         ctx.clearRect(0, 0, bboxWidth, bboxHeight);
 
         ctx.lineWidth = this._strokeWidth;
@@ -144,6 +152,7 @@ var GLSubpath = function GLSubpath() {
             //ctx.fillStyle = MathUtils.colorToHex( this._fillColor );
             var fillColorStr = "rgba("+parseInt(255*this._fillColor[0])+","+parseInt(255*this._fillColor[1])+","+parseInt(255*this._fillColor[2])+","+this._fillColor[3]+")";
             ctx.fillStyle = fillColorStr;
+            console.log("Fill color:" + fillColorStr);
         }
         var lineCap = ['butt','round','square'];
         ctx.lineCap = lineCap[1];
@@ -256,6 +265,10 @@ GLSubpath.prototype = new GeomObj();
 /////////////////////////////////////////////////////////
 // Property Accessors/Setters
 /////////////////////////////////////////////////////////
+GLSubpath.prototype.setCanvas = function (c) {
+    this._canvas = c;
+};
+
 GLSubpath.prototype.setWorld = function (world) {
     this._world = world;
 };
@@ -773,6 +786,7 @@ GLSubpath.prototype.getStrokeWidth = function () {
 
 GLSubpath.prototype.setStrokeWidth = function (w) {
     this._strokeWidth = w;
+    this._dirty=true;
 };
 
 GLSubpath.prototype.getStrokeMaterial = function () {